Design for Accessibility - Nomensa Resource listing

Resources referenced from the Design for Access presentation by Alastair Campbell at Generate London.

Also, there will be some blog posts expanding on this topic, coming soon at Nomensa's blog.

Presentation and links

References / links from the presentation

If there are questions on the day that I can't answer in the time, I'lll put some more resources here.

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.

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.

iOS: System preferences > General > Accessibility > Zoom.
Enable, then double-tap with three-fingers to zoom in and out. Three-finger drag moves the screen around. In iOS 8 you can also toggle on a little onscreen joystick to move the view 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:

Contact details - Alastair Campbell