UX ARIA Presentation
•
3 likes•2,146 views
Use this one simple trick to increase UX for users of assistive technology.
Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
Similar to UX ARIA Presentation
Similar to UX ARIA Presentation (20)
More from Los Angeles Accessibility and Inclusive Design Group
More from Los Angeles Accessibility and Inclusive Design Group (8)
Recently uploaded
Recently uploaded (20)
UX ARIA Presentation
- 1. Joseph Karr O’Connor @AccessibleJoe
- 2. Tautology Recapitulates Ontogeny Accessible Rich Internet Applications (ARIA) and HTML5
- 3. Joseph Karr O’Connor Accessibility Consultant Since 1999 Invited Expet W3C HTML5 Accessibility Taskforce WordPress Accessibility Group Cities: Making Free Accessible WordPress Themes accessiblejoe.com/cities/
- 4. Accessibility “Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
- 5. Accessibility Alt text added Header hiearchy Media captioned No autoplay! Descriptive links Resizable text Keyboard access Define language Color optimized Test
- 6. Accessibility Alt text on logo ARIA landmarks Focus indicators ID required fields Page name <h1> Table headers Table captions No “click here” Remove tabindex Test
- 7. ARIA ARIA is a technical specification published by the W3C that specifies how to increase the accessibility of web pages for users of Assistive Technology (AT).
- 8. ARIA ARIA is markup: role: <main role="main"> state: <input aria-invalid="true"> propety: <input id="firstName" type="text" aria-required="true" />
- 9. ARIA ARIA document landmark roles: help define the structure of the document.
- 11. ARIA
- 12. ARIA
- 13. ARIA ARIA states and propeties help the user understand how to inteact.
- 14. ARIA ARIA States and Propeties: aria-valuemin - stores lowest value aria-valuemax - stores highest value aria-valuenow - current value number aria-valuetext - current value text <div id="percent-loaded" role="progressbar" aria- valuenow="75" aria-valuemin="0" aria-valuemax="100" />
- 15. ARIA ARIA States and Propeties: aria-labelledby - stores the id attribute of a text label containing an appropriate prompt <input type="booze" aria labelledby="drink"/> (before role="application")
- 16. ARIA ARIA Live Regions: allow document elements to be announced if there are changes, maintaining user focus.
- 17. ARIA ARIA Live Regions: aria-live <ul aria-live="on"> when changes happen: polite - waits assetive - interrupts
- 18. ARIA The aria-atomic Propety: used to indicate if AT should present all or pat of the changed region to the user.
- 19. ARIA The aria-busy Propety: prevents AT announcing changes before updates are complete.
- 20. ARIA The aria-relevant Propety: indicates which regional changes are relevant.
- 21. HTML5 Extends, improves and ationalizes the markup available for documents.
- 22. HTML5 Introduces markup and application progamming intefaces (APIs) for complex web applications.
- 23. HTML5 HTML5 introduces elements: such as <section>, <aticle>, <header> and <nav>, designed to enrich the semantic content of documents.
- 24. ARIA = HTML5 ARIA aticle header navigation complementay HTML5 <aticle> <header> <nav> <aside>
- 25. ARIA vs HTML5 Most screen readers suppot ARIA and some features of HTML5, sometimes resulting in too much information.
- 26. ARIA vs HTML5 Magic: ARIA trumps HTML5: optimize markup to reduce verbosity and give AT users best UX.