HTML5 includes many built-in accessibility features through native semantics, reducing but not eliminating the need for WAI-ARIA. WAI-ARIA remains useful for supplementing features not natively supported by HTML5 and for legacy content, but where HTML5 provides equivalent accessibility, its native features should be used rather than WAI-ARIA. While many ARIA roles and states are now implied in HTML5, not all are covered, and screen readers may not fully support implied semantics.
3. Accessible Rich Internet Applications
WAI-ARIA is intended to be a bridging technology. It clarifies
semantics to assistive technologies when authors create
new types of objects, via style and script, that are not yet
directly supported by the language of the page.
http://www.w3.org/TR/wai-aria/complete
5. roles, states, properties
●
Role is what something is. <div role="navigation">,
“tooltip”
●
State is how something is at the moment (from pre-
defined list): aria-checked = “true”, aria-required=”true”
● Property: aria-valuenow (of a slider), aria-describedby
(points to a description)
6. HTML attributes don't validate in HTML4
<div role="navigation">
<input aria-required="true">
(but validate in HTML5!)
7. Built-in always beats bolt-on
It is not appropriate to create objects with style and script
when the host language provides a semantic element for
that type of objects.
While WAI-ARIA can improve the accessibility of these
objects, accessibility is best provided by allowing the user
agent to handle the object natively.
8. Remains useful for legacy content
When native semantics for a given feature become
available, it is appropriate for authors to use the native
feature and stop using WAI-ARIA for that feature. Legacy
content may continue to use WAI-ARIA
9.
10.
11.
12. HTML5 has "built-in" ARIA
HTML Implied ARIA information
<hr> separator
<a href=".."> role=link
<input required> aria-required=true
<nav> role=navigation
<textarea> role=textbox aria-multiline=true
<article> role=article (document/
application / main)
<body> role=document / application
<address> role=contentinfo
<output> aria-live=polite
Full list: http://dev.w3.org/html5/spec/content-models.html#annotations-for-assistive-technology-products-aria
13.
14.
15. Gotcha!
●
Multiple <header>s allowed, but only one role=banner
per page
●
Multiple <footer>s allowed, multiple <address> allowed
but only one role=contentinfo per page
●
No <main> element
●Some screen reader naughtiness
16. Not everything is native to HTML5
WAI-ARIA is intended to be used as a supplement for native
language semantics, not a replacement. When the host
language provides a feature that provides equivalent
accessibility to the WAI-ARIA feature, use the host language
feature.
WAI-ARIA should only be used in cases where the host
language lacks the needed role, state, and property
indicators.