role=“banner” role=“naviga1on” role=“search” role=“main” role=“conten1nfo” Try Adding These Landmark Roles! 1. Banner – header of the page, for example banner image and the logo. 2. Naviga1on – links to navigate the site and related sites 3. Search – contains search form for the site 4. Main – core content of the page 5. Content Info – child content: footnotes, links to privacy statements…
Deque Home Page is Designed with Landmark Roles
1. 2. See ARIA Document Landmarks Install Juice Studio Accessibility Toolbar (for Firefox) addons.mozilla.org/en-‐us/ﬁrefox/addon/juicy-‐studio-‐accessibility-‐too/ From the ARIA menu, select “Document landmarks”
Accessible Form Labeling & Instruc1ons Great ar1cle by Karl Groves (a11y viking) hKp://www.karlgroves.com/2011/10/10/ accessible-‐form-‐labeling-‐instruc1ons/
High-‐Level Form Field Accessibility All form elements should have explicit labels Labels are clear and informa1ve Format requirements are indicated hKp://www.karlgroves.com/2011/10/10/ accessible-‐form-‐labeling-‐instruc1ons/
Use ARIA Wisely! Build custom controls responsibly Use naJve HTML markup ﬁrst – Safer – Simpler – Full Accessibility Built-‐in Use Custom Controls – Only when there is a func1onal advantage – Are you sure you can’t do this with na1ve HTML mark-‐up? – Make sure check for the following: Did you set the appropriate role? Did you indicated the state(s) and proper1es? Do states and proper1es change correctly when values change? Can you use it with keyboard alone? Can you use it with a screen reader?