HTML Developers: Please Consider – in the year of 2021

ARIA is an amazing technology, it allows developers to add meaning to meaningless HTML or override meaning on HTML that is being repurposed and sometimes misused, so that users who rely upon the meaning of HTML, as implemented in browsers, can understand and interact with HTML User Interfaces successfully.

ARIA allows developers to re-invent and extend native HTML features in meaningful ways. But like all bolt-on technologies its features are brittle compared to its built-in counterparts.

By using native HTML features, wherever practical, over custom HTML with bolt-on semantics and interaction behaviours, you will save yourselves and users a lot of grief and ensure that your User Interfaces work robustly across the largest number of devices, operating systems, input devices, browsers and assistive technologies.

Whenever you are considering:

• Using role=button consider using a <button> element, or the various other native HTML button types, instead.
• Using role=link, consider using an <a href> element instead.
• Using role=heading and aria-level="1-6", consider using <h1> to <h6> elements instead.
• Using role=list and role=listitem, consider using <ol> or <ul> and <li> elements instead.
• Using a disclosure widget custom control, consider using the <details> and <summary> elements instead.
• Using role=listbox and role=option, consider using <select> and <option> elements instead.
• Using role=checkbox or role=radio, consider using <input type="checkbox"> or <input type="radio"> elements instead.
• Using role=textbox, consider using an <input type="text"> or search or email or url or tel instead.
• and so on…

Further listening