accessibility & ui development

ACCESSIBILITY & UI DEVELOPMENT

Charlie Perrins

Friday, 18 January 13

postoffice.co.uk

Friday, 18 January 13

Enough waffle

• Accessibility requirements != constraints on complexity or beauty

• Accessibility ‘tips’ are often just good coding practice

• Be prepared to accommodate changes to your markup habits

• Automated testing also benefits

3

Friday, 18 January 13

Keyboard navigation

Friday, 18 January 13

Document heading order

5

Friday, 18 January 13

:hover, :focus, and :active

Friday, 18 January 13

tabindex

Friday, 18 January 13

tabindex

Friday, 18 January 13

tabindex

Friday, 18 January 13

tabindex

Friday, 18 January 13

display: none;

Friday, 18 January 13

Display: none?

• Control the focus of your document– It’s OK to use display:none to hide your

content if you correctly control the focus so that the next element in the tab order is the right content for the user in context.

Friday, 18 January 13

BIG text

13

Friday, 18 January 13

BIG text

14

Friday, 18 January 13

:pseudo or not :pseudo?

Friday, 18 January 13

Arrow keys

Friday, 18 January 13

Why abstract?

Friday, 18 January 13

A few references

• Accessible JS tools– http://hanshillen.github.com/jqtest

• Chromevox– http://www.chromevox.com/

• ARIA– http://www.w3.org/TR/wai-aria

Friday, 18 January 13