Accessible Rich Internet Application (WAI-ARIA)
The Web Accessibility Initiative's Accessible Rich Internet Applications specification (WAI-ARIA,
or just ARIA) is good for bridging areas with accessibility issues that can't be managed with native HTML.
It works by allowing you to specify attributes that modify the way an element is translated into the
accessibility tree.
by - Google developers
note: you should always use their counterpart in html5 before an aria role if it's possible this mean that as example we should we favor to use <main /> than <div role="main" />
ARIA landmarks are attributes you can add to elements in your page to define areas
like the main content or a navigation region. The possible landmarks are as follows.
banner
complementary
contentinfo
form
main
navigation
search
application
- role: describe the element function in at specific context: button, menu, progress bar
aria-autocomplete
aria-checked (state)
aria-disabled (state)
aria-expanded (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
...
-
tabindex: The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), value can be negative, 0 or positive integer, read more
-
aria-label: The aria-label attribute can be used to easily add a proper name to the element, like so we should favor
aria-labelovertitle
aria-label on action:
<!-- without aria-label screen reader JAWS announces “number link” -->
<a href="#" class="button" aria-label="Launch missile 🚀"></a>NOTE according with mozilla
When user agents compute the accessible name property of elements that have both an aria-labelledby
attribute and an aria-label attribute, **the user agents give precedence to aria-labelledby.**
from: NC STATE UNIVERSITY
<!--
We can take this a step further and describe this navigation region using the aria-label attribute.
aria-label is a description that is never displayed on screen but is relayed to the screen reader user.
This can be very helpful if you have multiple navigation areas within a single page.
-->
<div id="nav" role="navigation" aria-label="main navigation">
<ul>
<li>Home</li>
<li>Products</li>
<li>Support</li>
</ul>
</div>
<div id="nav" role="navigation" aria-label="product navigation">
<ul>
<li>Product Description</li>
<li>Technical Specifications</li>
<li>Customer Reviews</li>
</ul>
</div>
<!--
In this case the screen reader user will hear something like “navigation landmark, main navigation”,
then “navigation landmark, product navigation”
Not all screen reading software will read the text in the aria-label attribute to the user.
Essential information should not be included in this attribute. Rather, use this attribute to provide
additional navigation aids to the Web page.
--><!--
Another option for labeling an ARIA landmark is to use the aria-labelledby attribute. The aria-labelledby
attribute is used when a particular landmark can be labelled by another on-screen element.
You just list the id for the item that labels that landmark.
-->
<div role="navigation" aria-labelledby="nav-heading">
<h2 id="nav-heading">Learn About This Product</h2>
<ul>
<li>Product Description</li>
<li>Technical Specifications</li>
<li>Customer Reviews</li>
</ul>
</div>
<!--
In this case the screen reader user will hear something like “navigation landmark, learn about this product.”
--><style>
.is-visually-hidden{
border:0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding:0;
position:absolute;
width: 1px;
}
</style>// Icon.js
import React, { PureComponent } from 'react';
Class Icon extends PureComponent {
render() {
return <i class=`icon ${this.props.type}` aria-hidden />;
}
}
// Button.js
import React, { PureComponent } from 'react';
import Icon from './Icon.js';
class Button extends PureComponent {
render() {
return (
<button>
<span class="is-visually-hidden" />
<Icon type="help" />
</button>
);
}
}When using svg + div as buttons:
Accessibility recommendations
Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href
to "#" or "javascript:void(0)" to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript
is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive
technologies (e.g., screen readers). In these cases, it is recommended to use a <button> instead.
In general you should only use an anchor for navigation using a proper URL.
ex. using svg as button and be accessible
<div role="button" tabindex="0">
<svg aria-labelleby="svgTitleIdentifier">
<title id="svgTitleIdentifier">This is a button!</title>
</svg>
</div>note on element that are not button the spacebar and enter have to be implemented to be totally accessible
import React, { PureComponent } from 'react';
class ButtosWithADiv extends PureComponent {
onKeyDown = e => {
// bar space or enter
if(e.keyCode === 32 || e.keyCode === 13){
this.props.onClick()
}
}
render() {
return (
<div
role="button"
tabindex={this.props.tabIndex}
arial-label={this.props.ariaLabel}
onClick={this.props.onClick()}
onKeyDown={}
/>;
);
}
}<form>
<label>
<span>Your hero name</span>
<input type="text" />
</label>
<label for="planet">
what's your planet?
</label>
<input id="planet" type="text" />
</form>also the use of <fieldset /> and <legend /> is suggested
<h1> is just one per page should be the most important
use of:
aria-labelledby: The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
aria-labelledby: The aria-labelledby attribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object. using aria-labelledby
and aria-describedby are encourage to use for help to describing the arquitecrure information.
aria-describedby vs aria-labelleddby
- Make sure that the user always end in a focus element after deleting or changing context.
skip-links: is a table of content with a static link that allow to skip a lot of content to jump directly to content
<style>
.skip-link a{
display:block;
left: 9999999px;
position: absoulte;
}
</style>
<nav>
<a href="#main" class="skip-link">Main Content</a>
</nav>
<div id="main" tabindex="-1" />run in your browser: chrome://accessibility
show raw information of the accessibility tree.
is for inspecting information about accessibility.
https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree
Hidden vs Visible
display: noneElement will not take part of the space in the screen will be hidden.hiddensupport IE11 and up hidden global attributevisibility: hiddenbrowser will render and will take a place in the dom.using className='is-visually-hidden'labels inside of buttons etc, this will be rendered in the browseraria-hiddenwill remove the information for aria, will be displaying in the dom normally. will cascadeopacity:0browser will render and will take a place in the dom.
- Accessibility courses / Google / Egghead course / Teach Access
- Tab index
- Better to use always aria-labelledby
- aria-label over title
- role attribue navigate to 5.4. Definition of Roles for full list
- accessibilty and law in usa
random notes:
On disabled state for a button add:
pointer-event: false; - A lot of examples