WebA11y

Updated on May 14, 2009 - The South Africa Web Standards link no longer seems to work. I also updated the page with the embedded video so there should be fewer problems with it.

Through a tweet from AccessibleTwitter I was directed to a blog entry at The South African Web Standards and Accessibility Group that included a video posted on YouTube from a blind screen reader user on the importance of header elements for accessibility.

Since it wasn’t captioned, I did my best to add captions using a new, unreleased tool in development at IBM. It was presented at 23rd Annual Technology and Persons with Disabilities Conference - User Efficient Voice Recognition Based Caption Editing System (pdf). It was an interesting learning experience! Hope you enjoy.

Captioned Video on the Importance of HTML Headings for Accessibility

Also, if you want more demonstrations of how people use screen readers to navigate the web I suggest you search on YouTube for “screen reader”. Have Fun.

• Managed a SLOW 1.5 mile jog, walked the 2nd half. Will see how hip tendinitis is. Gotta start somewhere! #
• Sitting on the deck sipping sangria! Finally some nice weather! #
• off to tackle making drag and drop icons for dojox.DataGrid column reordering visible in high contrast mode - a11y job security, I guess! #
• keyboard navigation of hidden columns checked into the dojox.DataGrid as well as keyboard navigation into grid with hidden headers. #Dojo #
• trying to implement accessible bubble help - finding it is more difficult than I anticipated. Using Dojo dijit.TooltipDialog seems easiest! #

Powered by Twitter Tools.

• just checked in updates for Dojo drag and drop low vision accessibility http://tinyurl.com/dz2mzc #Dojo #A11y #
• making good progress implementing keyboard navigation past hidden columns in Dojox DataGrid - wondering what I missed! #Dojo #

Powered by Twitter Tools.

• just checked keyboard column resizing into dojox DataGrid. Still some bugs to work out but making keyboard a11y progress! #Dojo #
• Hey, I made the IBM Human Ability and Accessibility Center Events page! http://tinyurl.com/5vpcgl #
• interesting discussion of ARIA role=presentation in Free ARIA google group: http://tinyurl.com/cbzz86 #
• trying to fix dijit unified event handler to deal with space, enter and click in one place- differing browser behavior is frustrating! #Dojo #
• ARIA support for Google Calendar, Finance and news: http://tinyurl.com/dlfpmy #
• ARIA support for Google Calendar, Finance and News: http://tinyurl.com/dlfpm #

Powered by Twitter Tools.

Say you have a set of invitations to connect to colleagues in your favorite social networking software. These might be listed one after another with an accept and reject button associated with each request. But, if someone is using a screen reader to just tab through the buttons on the page, how would you know which button is associated with each invite? Certainly the designers are not likely to want to put the user name within the button text, so how can we make this easier for the person using a screen reader or screen magnifier to access the page?

There are several different ARIA properties you could use. I created a sample page using 4 different strategies aria-labelledby, aria-describedby, aria-label, and the title attribute. See Augmenting Button Text with ARIA. I’ve included code snippets so you can see exactly how the techniques were implemented.

The first approach was to use aria-labelledby to label the button using text containing the associated user name placed within a span that is placed offscreen using CSS. Since the text is positioned offscreen it will not be seen but will be spoken by the screen reader. This seems to work the best with the various screen readers and ARIA supported browsers. However, it does require additional text and the use of CSS to place it out of view.

The next approach uses aria-describedby on the button to point to a span containing the User name text . This would augment the Accept and Reject button with the user name. This requires no additional text, you just need to include an id on the span (or other element) containing the user name text. This was not consistently supported in the browsers and screen readers.

Adding an aria-label onto the button element with the label for the button is easy enough. It does require the extra text as the value of the aria-label attribute but is easy enough to implement. Unfortunately, there is no current browser support for aria-label but it is coming in the next release of Firefox.

And lastly, just adding a title attribute on the button with the additonal information about which invite user it is associated with. This has fairly good support but does depend upon the user screen reader settings.

I compiled the results of testing with Firefox 3.0.8, a daily Firefox/Minefield build, and IE8 with JAWS 10, Window-Eyes 6.1 and NVDA 0.6p32 so you can compare the results and draw your own conclusions.

Hopefully the ARIA examples are helpful as well - I’ll try to do more!

• just read interesting viewpoint article on Computing as a Social Science in April issue of Communications of ACM: http://tinyurl.com/cu5pqf #
• first pass implementation to make Dojo Dnd icons accessible to low vision: http://tinyurl.com/co9×7t and http://tinyurl.com/cullxt #Dojo #
• sure glad I didn’t tweet about the 200K+ hits on my slideshare posting http://tinyurl.com/cztxmg #
• Just blogged about A11y Improvements to the 1.3 Dojo DataGrid http://tinyurl.com/dhcecq #Dojo #
• Just updated the a11y docs for the dojox.grid.DataGrid http://docs.dojocampus.org/dojox/grid - see the accessibility section. #Dojo #
• Just added myself to the http://wefollow.com twitter directory under: #accessibility #webdeveloper #photography #

Powered by Twitter Tools.