Development

Accessible Balance: HTML & ARIA

Coding

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:

Covid 19
COVID-19: Digital Insights For Enterprise Action

Access Perficient’s latest insights into how you can leverage digital technologies to not only respond to the pandemic, but drive your operations forward and deliver experiences your customers need.

Get Informed

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/)

About the Author

Brendan is a senior business consultant at Perficient for 4 years. His work has focused on accessibility testing and aiding developers in their accessibility efforts.

More from this Author

Thoughts on “Accessible Balance: HTML & ARIA”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories