UX ARIA Presentation

1,772 views

Published on

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

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
192
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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 Themesaccessiblejoe.com/cities/
  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. Linkshttp://bit.ly/AccessibleJoeARIAhttp://twitter.com/AccessibleJoe

×