HTML – Using ARIA to make our web pages accessible
ARIA stands for ‘Accessible Rich Internet Applications’ and can help make your website more accessible to people with disabilities such as hearing or visual impairment.
We have a lot of help from modern HTML that will help set up the semantic meaning of our websites.
Use semantic HTML elements where possible.
The browser has gotten pretty good at applying semantics to pieces of a page when we use the correct elements to lay out our page. Some examples are nav, button, article. They have default aria statements of role="navigation" etc. It used to be pretty common to have elements like <div class="main-navigation" role="navigation">. But, today we can replace the div with a nav and no longer need to specify the role.
There are times that we need to provide more context to what is going on on our page, so we can describe many more things with additional ARIA attributes.
role
Roles describe widgets and structure. They are added as attributes on elements.
Roles are used as navigation aids for assistive software like screen readers.
<div id="header" role="banner">
<div id="nav" role="navigation">aria-label and aria-labelledby
The aria-label attribute is used to label a form element that is not visible on the page, maybe this is dictated by design etc, but we still need to provide the screen reader with something to describe the widget.
A button may be styled to look like a close button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to assistive technologies.
<button aria-label="Close" onclick="myDialog.close()">X</button>When the text is visible, we should use aria-labelledby instead.
<div id="billing">Billing</div>
<div>
<div id="name">Name</div>
<input type="text" aria-labelledby="billing name"/>
</div>
<div>
<div id="address">Address</div>
<input type="text" aria-labelledby="billing address"/>
</div>
aria-disabled
Some aria attributes are used to describe the state of the widget. It is common for aria states to change on a page, whereas properties generally stay static.
aria-disabled="true" helps describe to assistive technology that a widget is present, but it is not currently functional – disabled. Some readers will skip right over disabled content, some will announce that it’s unavailable.
aria-haspopup
The aria-haspopup="true" can be used to describe that there is a menu or sub-menu. You attach it to the element that will trigger the menu.
aria-hidden
The aria-hidden attribute is used to tell the screen readers to ignore the element. This will cover children elements as well. The elements are described as not perceivable to any user.
aria-expanded
The aria-expanded is another aria state that can take true or false saying that an element is currently expanded and visible. False means the expandable section or items are currently collapsed or invisible.
aria-busy
The aria-busy="true" state is used as part of a live region. Setting this to true when a relevant portion of the page is currently getting updated and the users are waiting to get the updated content. Readers will wait until the attribute is removed before it continues providing that information to the user. Sometimes they will hear “busy” audibly while waiting.
aria-*
aria-* is used to describe global aria attributes that can be used on any html element in any role. Some aria attributes are limited to be used in only certain roles.