ARIA

Wed Apr 12 2017

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies.

ARIA are basically attributes that you can specify on elements to offer information to the Accessibility tree. There are numerous attributes that can assist you in offering semantic information to your elements and apps so you are not only dependent on the native elements and the default usage.

Bootstrap

Bootstrap if fully implementing ARIA so you can visit the Bootstrap Documentation play around with the elements and components and see in the console of the browser the aria attribute updates.

ARIA Bootstrap Example

Aria-label

<button><img src=”./submit.png”/></button>

<button aria-label=”Submit”><img src=”./submit.png”/></button>

With the aria-label attribute we can add the “Name” semantic value in the Accessibility tree.

Role

If we use the native checkbox inputs the device will understand that the element is a checkbox.

<label><input type=”checkbox”/>Hyundai i10</label>
<label><input type=”checkbox”/>Toyota iQ</label>

If we use our own custom checkboxes the device won’t understand that these are checkboxes.

<div class=”checkbox”>Hyundai i10</div>
<div class=”checkbox”>Toyota iQ</div>

So we can use the role attribute

<div class=”checkbox” role=”checkbox”>Hyundai i10</div>
<div class=”checkbox” role=”checkbox”>Toyota iQ</div>

 

These are only some of the ARIA attributes that we can use to offer more semantic information to our Web Apps. You can check online examples or the ARIA documentation for more information.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!