accessibility & ui development
DESCRIPTION
Slides from talk given at Front End London meetup in January 2013. http://www.frontendlondon.co.ukTRANSCRIPT
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