1. HTML5'S ARIA AND A WEB-
ACCESSIBLE DROPDOWN WIDGET
by Dennis E. LembrĂŠe
HTML5 Developer Conference
Palace Hotel, San Francisco
October 15-16, 2012
2. Confidential and Proprietary 2
AGENDA
⢠About @DennisL
⢠About accessibility
⢠ARIA & HTML5
⢠Simple example
⢠Complex example
⢠Tips
⢠Questions
⢠Contact info
3.
4. Confidential and Proprietary 4
ABOUT ACCESSIBILITY
Support a variety of users and a variety of environments
⢠Visual, audio, motor, cognitive disability
⢠Situational disability
⢠Main language of website is non-native for user
⢠Broken equipment (mouse or speakers donât work)
⢠Temporary disability (hand in cast, forgot glasses)
⢠Environment (sunlight on screen; in library with no headphones)
⢠Low-band connection (may have images off)
⢠Large fingers (need large hit area)
5.
6.
7. Confidential and Proprietary 7
ABOUT ACCESSIBILITY
Methods for implementation include multiple disciplines:
⢠Code
⢠Interaction design
⢠Visual design
⢠Content, writing
⢠Testing
⢠During development
⢠QA testing (manual and automated)
⢠User testing (including users with disabilities)
8.
9.
10. Confidential and Proprietary 10
ARIA & HTML5
⢠W3C WAI-ARIA
⢠Accessible Rich Internet Applications (WAI-ARIA) 1.0
⢠W3C Candidate Recommendation, January 2011
⢠âattributes that define user interface elements to improve the
accessibility and interoperability of web content and applicationsâ
⢠Basically, ARIA helps users of screen readers and other AT with
modern web technologies.
⢠Types of attributes:
⢠Roles
⢠States and Properties