Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ARIA 101

ARIA 101

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

October 04, 2011
Tweet

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