Day Three Accessibility and Ajax

Willie Goosen — Wed, 18 Feb 2009 10:53:16 +0000

Derek Featherstone
Real world Accessibility for Ajax and Web Apps
Sites : www.boxofchocolates.ca www.furtherahead.com

Right so i got caught out by the title like the typical buzzword try-er-outer. So first thing i read going through the workshops, was …. AJAX. So wow that’s like so now and everyone is doing it so the more AJAX the better right?

Upon closer inspection the workshop was more around the _accessibility_ part. And the first 10 min I thought whoops not quite what I intended to spend a day on, but i was captivated after the intro.

Quick key points
1. Forms
- Watch out for Visual labeling, use element
- “em” inside the “label” and position with CSS
- Replace “em” with a “strong” if its an error.
- Plan error/advisory information carefully (keep in flow or shift focus to it if not in flow)
- Dual purpose interfaces can cause issues.

2. Linear Flow
- feedback on an action should be where your focus is going
- have elements linear in HTML and position with CSS for visual organisation

3. Proximity
- when injecting content with ajax place do so in context.
- avoid injecting content at the end of the document if possible
- best yet avoid ajax if it can be hidden with CSS and revealed

4. Backup plan
- have a fall back option, multiple ways of achieving same goal
- use headings for “rescue point” if user gets lost in document

5. Visual Design vs Structure
- check that your visual design and un-styled document is telling the same story
- turn your CSS off see if site still makes sense
- build linear flow into your wire frames

6. Development Testing
- Test for accessibility from the start.
Design Stage: Color contrasts, general layout
Functional Testing: must work with keyboard
Demo Testing: all alt must be accurate, screen reader emulators, turn off css
Final Test: real people varied needs.
- test success error AND corrective paths
- check for alt tags and that they make sence.

A Tools and Links
- Screen readers Shark and Dragon Natural speaking
- HTML Tidy in Firefox is a good start
- Fangs Firefox plug-in screen reader emulator
- Juicy Studio Firefox plug-in for Luminosity Colour Contrast Ratio Analyser
- www.simplyaccessible.org for some examples
- WCAG the accessibility bible

Soo once again to make some sence of all the random jucy tidbits of knowledge, its definitely something i will be promoting from now on.

At a basic level it costs nothing. Its up to the UX designer and Developers to just take a bit more care in element placement and thinking about the project not just from you users perspective but also the less able users. As a by product this will produce a much higher quality product and the HTML is bound to be more semantic and efficient.

A quote from Derek that summed it up quite well :

Its about whats under the covers

My Little Black Book » accessibility

Day Three Accessibility and Ajax