The document discusses the Accessible Rich Internet Applications (ARIA) specification which defines ways to make web content and applications more accessible to users of assistive technologies through the use of roles, states, and properties. It provides examples of how ARIA is implemented using markup to identify document structure and interactive elements, and explains how ARIA works together with HTML5 to semantically enrich content while preventing too much information from being conveyed to assistive technology users. ARIA takes precedence over conflicting HTML5 semantics to optimize for the best user experience for those using assistive technologies.

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 Expet 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, sevice, or
environment is available to as many
people as possible.” Cynthia Waddell

5. Accessibility
Alt text added
Header hiearchy
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">
propety:
<input id="firstName" type="text"
aria-required="true" />

9. ARIA
ARIA document landmark roles: help
define the structure of the
document.

10. ARIA
ARIA landmark roles:
banner
navigation
search
main
aticle
complementay
contentinfo

11. ARIA

12. ARIA

13. ARIA
ARIA states and propeties help the
user understand how to inteact.

14. ARIA
ARIA States and Propeties:
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 Propeties:
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
assetive - interrupts

18. ARIA
The aria-atomic Propety: used
to indicate if AT should present all or
pat of the changed region to the
user.

19. ARIA
The aria-busy Propety: prevents
AT announcing changes before
updates are complete.

20. ARIA
The aria-relevant Propety:
indicates which regional changes are
relevant.

21. HTML5
Extends, improves and ationalizes
the markup available for documents.

22. HTML5
Introduces markup and application
progamming intefaces (APIs) for
complex web applications.

23. HTML5
HTML5 introduces elements: such as
<section>, <aticle>, <header> and
<nav>, designed to enrich the
semantic content of documents.

24. ARIA = HTML5
ARIA
aticle
header
navigation
complementay
HTML5
<aticle>
<header>
<nav>
<aside>

25. ARIA vs HTML5
Most screen readers suppot 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.

27. Links
http://bit.ly/AccessibleJoeARIA
http://twitter.com/AccessibleJoe