Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX ARIA Presentation


Published on

Use this one simple trick to increase UX for users of assistive technology.

Published in: Education, Technology, Design
  • Be the first to comment

UX ARIA Presentation

  1. 1. Joseph Karr O’Connor @AccessibleJoe
  2. 2. Tautology Recapitulates OntogenyAccessible Rich InternetApplications (ARIA) and HTML5
  3. 3. Joseph Karr O’ConnorAccessibility Consultant Since1999Invited Expet W3C HTML5Accessibility TaskforceWordPress Accessibility GroupCities: Making Free AccessibleWordPress
  4. 4. Accessibility“Accessibility is the degree to which aproduct, device, sevice, orenvironment is available to as manypeople as possible.” Cynthia Waddell
  5. 5. AccessibilityAlt text addedHeader hiearchyMedia captionedNo autoplay!Descriptive linksResizable textKeyboard accessDefine languageColor optimizedTest
  6. 6. AccessibilityAlt text on logoARIA landmarksFocus indicatorsID required fieldsPage name <h1>Table headersTable captionsNo “click here”Remove tabindexTest
  7. 7. ARIAARIA is a technical specificationpublished by the W3C that specifies howto increase the accessibility of web pagesfor users of Assistive Technology (AT).
  8. 8. ARIAARIA is markup:role:<main role="main">state:<input aria-invalid="true">propety:<input id="firstName" type="text"aria-required="true" />
  9. 9. ARIAARIA document landmark roles: helpdefine the structure of thedocument.
  10. 10. ARIAARIA landmark roles:bannernavigationsearchmainaticlecomplementaycontentinfo
  11. 11. ARIA
  12. 12. ARIA
  13. 13. ARIAARIA states and propeties help theuser understand how to inteact.
  14. 14. ARIAARIA States and Propeties:aria-valuemin - stores lowest valuearia-valuemax - stores highest valuearia-valuenow - current value numberaria-valuetext - current value text<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
  15. 15. ARIAARIA States and Propeties:aria-labelledby - stores the idattribute of a text label containingan appropriate prompt<input type="booze" arialabelledby="drink"/>(before role="application")
  16. 16. ARIAARIA Live Regions: allow documentelements to be announced if thereare changes, maintaining user focus.
  17. 17. ARIAARIA Live Regions: aria-live<ul aria-live="on">when changes happen:polite - waitsassetive - interrupts
  18. 18. ARIAThe aria-atomic Propety: usedto indicate if AT should present all orpat of the changed region to theuser.
  19. 19. ARIAThe aria-busy Propety: preventsAT announcing changes beforeupdates are complete.
  20. 20. ARIAThe aria-relevant Propety:indicates which regional changes arerelevant.
  21. 21. HTML5Extends, improves and ationalizesthe markup available for documents.
  22. 22. HTML5Introduces markup and applicationprogamming intefaces (APIs) forcomplex web applications.
  23. 23. HTML5HTML5 introduces elements: such as<section>, <aticle>, <header> and<nav>, designed to enrich thesemantic content of documents.
  24. 24. ARIA = HTML5ARIAaticleheadernavigationcomplementayHTML5<aticle><header><nav><aside>
  25. 25. ARIA vs HTML5Most screen readers suppot ARIAand some features of HTML5,sometimes resulting in too muchinformation.
  26. 26. ARIA vs HTML5Magic: ARIA trumps HTML5:optimize markup to reduceverbosity and give AT users best UX.
  27. 27. Links