ARIA 101

Transcript

1. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 ARIA 101 ACCESSIBILITY & FORMS
2. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FILL IN THE GAPS
3. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 TABINDEX
4. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 DEFINE WHAT
5. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LANDMARK ROLES
6. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 application LANDMARK ROLES
7. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 banner LANDMARK ROLES
8. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 complementary LANDMARK ROLES
9. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 content info LANDMARK ROLES
10. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 form LANDMARK ROLES
11. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 main LANDMARK ROLES
12. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 navigation LANDMARK ROLES
13. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 search LANDMARK ROLES
14. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 STRUCTURAL ROLES
15. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 article columnheader definition directory document group heading img list listitem math note presentation region row rowheader separator STRUCTURAL ROLES
16. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET ROLES
17. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 button alert alertdialog checkbox combobox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio radiogroup scrollbar slider spinbutton status tab tabpanel textbox timer tooltip treeitem WIDGET ROLES
18. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET PROPERTIES
19. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria- activedescendant aria-atomic aria-autocomplete aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labeledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns aria-posinset aria-eadonly aria-relevant aria-required aria-setsize aria-sort aria-valuemax WIDGET PROPERTIES
20. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 WIDGET STATES
21. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow aria-valuetext WIDGET STATES
22. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LIVE REGIONS (AJAX)
23. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-live off, polite, assertive
24. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-atomic true, false
25. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-busy true, false
26. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 aria-relevant additions, removals, text, all
27. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FORMS
28. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Required Fields
29. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" required />
30. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <input type="text" aria-required="true" />
31. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">Label <em>(required)</em></label> <input type="text" aria-required="true" />
32. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em role="presentation">(required)</em></label> <input type="text" aria-required="true" />
33. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for="">User Name<em aria-hidden="true">(required)</em></label> <input type="text" aria-required="true" />
34. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""> User Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" />
35. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 Inline Errors
36. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <label for=""=> User Name <img src=”data:image/png;base64” alt=”required” role=”presentation” /> </label> <input type="text" id=”” aria-required="true" aria-describedby=”error” /> <label id=”error” role=”alert”>Error message</label>
37. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 LISTED ERRORS
38. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 <div class=”message errors” aria-live=”polite” aria-atomic=”true”> <fieldset> <legend><h3>Errors Title</h3></legend> <ul> <li> <a href=”#input-id” id=”error-label”>Field name is required</a> OR <label for=”input-id” id=”error-label”>Field name...</label> </li> </ul> </fieldset> </div> ... <input type=”text” id=”input-id” aria-labeledby=”error-label” />
39. CHARLOTTE UX BERMON PAINTER OCTOBER 4th, 2011 FIN