ux aria presentation
DESCRIPTION
Use this one simple trick to increase UX for users of assistive technology.TRANSCRIPT
![Page 1: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/1.jpg)
Joseph Karr O’Connor @AccessibleJoe
![Page 2: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/2.jpg)
Tautology Recapitulates Ontogeny
Accessible Rich Internet Applications (ARIA) and HTML5
![Page 3: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/3.jpg)
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/
![Page 4: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/4.jpg)
Accessibility
“Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
![Page 5: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/5.jpg)
Accessibility Alt text added
Header hiearchy
Media captioned
No autoplay!
Descriptive links
Resizable text
Keyboard access
Define language
Color optimized
Test
![Page 6: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/6.jpg)
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
![Page 7: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/7.jpg)
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).
![Page 8: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/8.jpg)
ARIAARIA is markup:
role:<main role="main">
state:<input aria-invalid="true">
propety:<input id="firstName" type="text" aria-required="true" />
![Page 9: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/9.jpg)
ARIA
ARIA document landmark roles: help define the structure of the document.
![Page 10: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/10.jpg)
ARIAARIA landmark roles:
bannernavigationsearchmainaticlecomplementaycontentinfo
![Page 11: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/11.jpg)
ARIA
![Page 12: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/12.jpg)
ARIA
![Page 13: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/13.jpg)
ARIA
ARIA states and propeties help the user understand how to inteact.
![Page 14: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/14.jpg)
ARIAARIA 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" />
![Page 15: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/15.jpg)
ARIAARIA 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")
![Page 16: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/16.jpg)
ARIA
ARIA Live Regions: allow document elements to be announced if there are changes, maintaining user focus.
![Page 17: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/17.jpg)
ARIAARIA Live Regions: aria-live
<ul aria-live="on">when changes happen:
polite - waits
assetive - interrupts
![Page 18: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/18.jpg)
ARIA
The aria-atomic Propety: used to indicate if AT should present all or pat of the changed region to the user.
![Page 19: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/19.jpg)
ARIA
The aria-busy Propety: prevents AT announcing changes before updates are complete.
![Page 20: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/20.jpg)
ARIA
The aria-relevant Propety: indicates which regional changes are relevant.
![Page 21: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/21.jpg)
HTML5
Extends, improves and ationalizes the markup available for documents.
![Page 22: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/22.jpg)
HTML5
Introduces markup and application progamming intefaces (APIs) for complex web applications.
![Page 23: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/23.jpg)
HTML5
HTML5 introduces elements: such as <section>, <aticle>, <header> and <nav>, designed to enrich the semantic content of documents.
![Page 24: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/24.jpg)
ARIA = HTML5ARIA
aticle
header
navigation
complementay
HTML5
<aticle>
<header>
<nav>
<aside>
![Page 25: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/25.jpg)
ARIA vs HTML5
Most screen readers suppot ARIA and some features of HTML5, sometimes resulting in too much information.
![Page 26: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/26.jpg)
ARIA vs HTML5
Magic: ARIA trumps HTML5: optimize markup to reduce verbosity and give AT users best UX.
![Page 27: UX ARIA Presentation](https://reader034.vdocument.in/reader034/viewer/2022042714/554b9ddcb4c905b3618b4795/html5/thumbnails/27.jpg)
Links
http://bit.ly/AccessibleJoeARIA
http://twitter.com/AccessibleJoe