Accessible Balance: HTML & ARIA

Introduced in 2008 by the Web Accessibility Initiative (WAI) group, the family of attributes known by the acronym ARIA (Accessible Rich Internet Applications) allows developers to supplement HTML where it lacks in accessibility. ARIA is a group of attributes that work to supplement HTML attributes to create a more accessible experience for those using assistive technologies such as screen readers, braille keyboards and a host of other technologies. Having a better understanding of each of these ARIA attributes will help you, as a developer, to create an accessible web experience. By defining and supplementing the role, states/values, and properties of an element, ARIA reaches beyond what native HTML semantics can provide.

• Role – what an element does or is
• State – what the current value or condition of an element is
• Properties – characteristics or instructions related to the element

It is important to note that ARIA attributes will not affect the look and feel of your current design. ARIA attributes only interact with assistive technologies and their users. For more detailed information of WAI-ARIA practices please see:

• https://www.w3.org/WAI/standards-guidelines/aria/
• https://www.w3.org/TR/html-aria/
• https://www.w3.org/TR/wai-aria-practices/
• https://www.w3.org/TR/wai-aria-practices/examples/

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

However, since the roll-out of HTML5 in October of 2014, some ARIA attributes are no longer necessary as HTML5 has taken steps to accommodate the needs of those who use assistive technologies. There are a few rules of thumb to keep in mind:

1) Whenever possible, use native HTML5 elements in lieu of ARIA attributes (i.e. <button> is better than role=”button”, HTML5 “required” is preferred over aria-required). Note: Be sure to check for browser support before implementing.

2) “Bad ARIA can be worse than no ARIA at all”. When in doubt of what the appropriate ARIA attributes are, use native HTML instead (Keep it simple). HTML is the base and ARIA may be sprinkled over top where applicable to create the most accessible experience.

Striking the proper balance between HTML and ARIA attributes is critical to creating an accessible web experience. In combination with accessible CSS and JavaScript, HTML and ARIA will provide all tools necessary to create an accessible web page.

The GOLDEN Rule

Test! Make sure you are testing your accessible code with assistive technologies such as a screen reader. NVDA is a great, free screen reader to start with. (https://www.nvaccess.org/download/)