As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology.
ARIA (or WAI-ARIA, Web Accessibility Initiative-Accessible Rich Internet Applications) defines some aria-* attributes with a name that is very similar to HTML attributes. This can lead to some confusion. Questions like, “Are they the same but one is for accessibility?” and “Should I use one or the other or both?” are very common. Here are some examples:
- Is the aria-disabled attribute the same as the HTML disabled attribute?
- Is the aria-autocomplete attribute the same as the HTML autocomplete attribute?
- Is the aria-hidden attribute the same as the HTML hidden attribute?
Although the names are similar, the purposes are different and they are not interchangeable. It can be tricky to apply these right. According to a WebAIM 2023 study, home pages with ARIA present averaged 68.6% more detected errors than those without ARIA. Let’s briefly examine the similarities and differences of these attributes and how to implement them correctly.
Read the article.