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
andaria-level="1-6",
consider using<h1>
to<h6>
elements instead. - Using
role=list
androle=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
androle=option
, consider using<select>
and<option>
elements instead. - Using
role=checkbox
orrole=radio
, consider using<input type="checkbox">
or<input type="radio">
elements instead. - Using
role=textbox
, consider using an<input type="text">
orsearch
oremail
orurl
ortel
instead. - and so on…