Happy Friday !

Last week, we delved into the world of web accessibility and discussed in detail about the common disabilities and how adding accessibility to your websites fosters inclusivity. Additionally, we discussed the WCAG guidelines, their guiding principles, and the varying levels of conformance. An example of an accessibility audit conducted on the Accordion website was also examined. Here's the video recording incase you missed it. ⬇️

Today, we're going to go over the practical integration of web accessibility in websites using WAI-ARIA.

ARIA (a.k.a Accessible Rich Internet Applications) is a framework, developed by the W3C group, that empowers developers to build web applications that are more accessible to users with disabilities. It provides additional semantics through a set of attributes that you can add to HTML elements, making it easier for assistive technologies, such as screen readers, to interpret.

One key thing to know about WAI-ARIA attributes is that they don't mess with the structure of the webpage or the DOM. They only impact assistive technologies and it's users.

Features

👉 Roles define what an element is or does on the page

<div role="navigation">Navigation Menu ...</div>

Learn more about roles

👉 Properties provide additional semantics to an element

<input type="text" aria-required="true" placeholder="Enter your name">

aria-required="true" property specifies that the form input is mandatory to be filled out.
 

👉 States define the current condition of an element

<div aria-hidden="true"...>Hidden content</div>

Learn more about states and properties

When to use ARIA?

Remember that ARIA should not be used as a substitute for semantic HTML. Whenever possible, rely on native HTML elements and attributes to provide accessibility features. Here are some guidelines on when to consider using ARIA:

🔁 Dynamic content updates

Screen readers often struggle to keep up with continuously changing content within a page. ARIA provides a solution through the use of `aria-live`, which notifies screen reader users when dynamic content is updated.

⌨️ Enhancing keyboard accessibility 

All interactive elements must be keyboard accessible. This can be done using the tabindex property to further enhance focus management. 
tabindex=0 allows a non-focusable element to become focusable and become a part of the document's sequential tab order.

tabindex=-1 removes focus from an otherwise focusable element in the document, but allows it to be programmatically focusable.

☄️ Complex interfaces with custom elements

If you're creating complex components or controls, such as sliders and accordions, that aren't covered by native HTML elements, ARIA can help make these components accessible to users of assistive technologies.