UX Bristol 2013 - Nomensa Resource listing

Resources referenced from the Design for Access workshop at UX Bristol.

Presentation and hand-outs

Trying out the different interaction styles

Keyboard Use

Open a page in your browser and don't use your mouse!. Use the tab key to progress through links & form controls, shift-tab to reverse, and enter to follow links.

To simulate voice-recognition, you can also use 'find' (usually cntl f or cmd f).

Browsers vary in the details of keyboard commands, but some combination of tab, arrows, space and enter should get you through.

NB: Browsers on OSX will only tab to form controls by default. To tab through links as well open the Safari preferences (advanced tab) and select Press tab to highlight each item on a page.

Magnification

Browser zoom

Set your browser width to around 1024px wide and use either control + (Windows/Linux) or cmd + (Mac) to double the size of things.

NB: Safari currently has a bug where media-queries may not be triggered when zooming. Chrome, Firefox, IE and Opera work much better. The Safari bug should be fixed in the next version, fingers crossed.

Colour contrast analyser

For checking whether colour combinations have sufficient contrast, use the excellent Colour Contrast Analyser.

Screen Magnifiers

Windows: Press the windows key and type "Magnifier".
Instructions for Windows XP, 7 and 8.

OSX: Open system preferences > Universal Access Pane / Accessibility > seeing/zoom tab.
Set it to zoom in with scroll and ^ Control.

iOS6: System preferences > General > Accessibility > Zoom.
Enable, then double-tap with three-fingers to zoom in and out. Three-finger drag moves the screen around.

Screen readers

Time to take the plunge, install and try one!

Caveat: Just remember not to make decisions based only on your tests. Even knowing the key commands, you won't experience things in the same way as a blind or partially sighted person.

See the page structure

Now you know what you're looking for, it's quicker to install the webdev toolbar (Firefox plugin, Chrome extension) and use these options:

I've compiled a list of Structural elements useful for accessibility.

Deafness & Cognitive issues

There is no particular technology at work here, some people just find it hard to understand the content.

Checklist

The checks that we go through in the workshop map directly to WCAG 2.0, see the full Checklist.

Contact details - Alastair Campbell