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