More Accessible User Interfaces with ARIA

On Tuesday I had the pleasure of attending Todd Kloots Yahoo! Dev talk on “More Accessible User Interfaces with ARIA”, apart from the added bonus of being located in the new Skills Matter conference and events centre. Todd made a very good presentation and a solid introduction to ARIA for those not aware of it. Rather than boring the audience with long spouts of text from the W3C ARIA spec he instead chose a more hands on approach showing everyday examples of ARIA on widgets he had developed with Yahoo and the YUI, whilst at each point stopping to show alternative options of implementation and which were the best practices and why he thought they were.

For those of you who are un-aware ARIA (or ‘Accessible Rich Internet Applications’) is a way further conveying a specific elements role within a webpage or application through the use of enhanced semantics. This allows for screen readers and assistive technologies to more accurately define to the user how to interact with a websites controls, in turn creating a richer user experience. It is especially useful to define the use of more advanced user interface controls (that are becoming increasingly more popular ) made using javascript and ajax, that have states that constantly change.

For the more interested developers out there, ARIA is applied to your applications by placing extra attributes within your elements tags, most commonly using the role=”” attribute.  One of the most important aspects of ARIA is the ability to apply multiple attributes to an element (as you would do with ID’s ort Classes). This is because each element can have multiple properties:

• It’s Role: role=”menu”
• It’s State: aria-disabled=”true”
• It’s Properties: aria-haspopup=”true”

A simpler way of describing this may be to show you an example of the markup one would use of a simple two panel tabbed interface.

<ul role="tablist">
       <li role="presentation"><a href="" role="tab">Tab 1</a></li>
       <li role="presentation"><a href="" role="tab">Tab 2</a></li>
<ul>

<div role="tabpanel">
       <p>Content</p>
</div>

<div role="tabpanel">
       <p>Content</p>
</div>

Although this is clear when visually displayed like that, the only true way of showing ARIA in use is to see (and more importantly hear) it working within a supported browser or screen reader. Though, as with all new or unfinished W3C specs, browser support and implementation varies across all vendors, with JAWS and Window-Eyes supporting the most amount of roles and states attributes. This leads us to the question of ‘is it worth all the hassle’, my own personal answer: YES, being a big support of progressive enhancement, as long as it is aiding in a better user experience for your some of your users then it is worth the small amount of extra time to implement it.

Overall, Todd’s talk was very insightful and good to see how Yahoo! are going about creating much richer user experiences for people with specific needs, and even more so educating others about the best practices which can hopefully lead to a more accessible web!

I will certainly be trying to force and implement the use of ARIA in future projects here at UVd, so keep your eye out for more info and posts around the subject in the near future. Though in the mean time I have included some further reading to feed your ARIA thirst, and start trying out ARIA yourself. But as Todd said himself:

Reading the documentation only gets you so far.

So try actually testing your new aria goodness with a screen reader, two of the links below are to help your setup a screen reader testing environment on your machine.

Enjoy!

Further reading:
WAI-ARIA Best Practices

YUI Configuring screen readers

How to use NVDA and Firefox to test your web pages for accessibility

This post was written by Patrick on November 20, 2009 at 2:52 pm

FOWD Tour -Bristol

Whilst Gareth was attending the1^st linked data meetup I was on the other side of the country in lovely Bristol attending the FOWD Bristol Tour.  The day long conference was designed to let people get a chance to experience what the normal FOWD conferences are like in a place nearer to them without having to go to London or New York (And for a fraction of the price!).

Though, as I already live in work in London, the main attraction for me to travel all the way to Bristol was down to the fine line-up of speakers for the day. With the likes of Elliot Jay Stocks and Bruce Lawson I had no valid reason not to attend, and the small factor of being able to catch up with some old friends.

Elliot kicked the day of with ‘A Perfect Portfolio’. A talk aimed at highlighting the key strengths and weaknesses in portfolio designs, and some very valid points that you should take into consideration when designing your own. A subject that is very topical here at UV^d at the moment due to us being in full swing of our own re-branding. It was very interesting to see the amount of points that came up that we have spent hours (coming up to years) discussing and deliberating over, such as the importance of showing your featured work on your homepage, to how you go about showing the process of your work: Elliot summed up the presentation succinctly:

“It’s not about the finished project, it’s ‘How you get there!’”

The next discussion of the day was from Paul Boag of Headscape titled “The Battlefield of Design – Designers vs Clients “. The first interesting thing to note was that Paul had decided not to use any slides at all and to rely purely on his memory (and cue cards) to educate us. Although, even with his new controversial style of presenting, it turned out to be a very insightful look into the process that Headscape use from brief to sign off. With the main aim of including the client throughout the design process rather than “designing behind doors”. I picked up some good tips from this, which we will be hopefully be putting into practice here in the future.

The HTML5 working spec is something that I have been following throughout the year and starting to become very passionate about. Therefore there was no doubt that in my opinion the best was saved until last, with Bruce Lawson’s talk on the Future of HTML5.  He covered a wide range of basic HTML5 knowledge, from the introduction of new basic tags such as <header>, <article>, <section>, <aside>, and <footer> to some of the more advanced such as <video>, <audio> and my personal favourite <canvas>  which enables the dynamic rendering of graphics on the page through javascript, a good example of this can be seen here.

The most important thing to take from Bruce’s talk though, is the fact that you don’t have to wait for the HTML5 spec to be complete to start using it. That could be years and even more so for the browsers to fully implement it, the pages with the new doctype<!DOCTYPE html> will still render in the browsers we know today, and most will accept the new tags. So why not start experimenting and playing! We certainly have, as you’ll see if you take a look at the source of this very blog.

Overall FOWD was a very enjoyable day, yet there is no way I could have covered everything in one small blog post. So for more info Bruce and Elliots slides from the day can can be viewed here:

• The Future of HTML5
• Stop worrying and get on with it

This post was written by Patrick on September 29, 2009 at 10:44 am

Beautiful UV^d Logo

Our snail paced re-brand has evolved into a rather brisk ramble (we are nearly out of breath) and as you can see we have settled on a new logo. Actually we have almost completed the web layouts but that’s another story (why say it in one post when you can say it in two!).

The basic premise behind the logo / re-brand was that the original Ultraviolet Design brand no longer represented the type of work we do and how we wish to be seen to the wider audience; with the only recognisable industry word in our name emphasising ‘design’, we felt that our other attributes were being unfairly over-powered. For instance, whilst we do web design, the design element is only one function we have to perform in an overall process of many. To put it another way, to emphasise only one skill of the many skills we have seems a little short sighted!

As such, we have re-branded ourselves UV^d and the website will follow shortly. No, it really will! Watch this space.

This post was written by Patrick on June 29, 2009 at 4:33 pm