About that first rule of ARIA
As you may know, the first rule of ARIA is to avoid using it when you can use a native HTML element or attribute that already has the desired behaviour and semantics built-in.
That means that this …
<div role="button">Submit</div>
… is terrible and this …
<button type="submit">Submit</button>
… is how it should be done.
Now have a look at the following implementation of an accessible icon only
button (the actual SVG
used for the icon was left out for brevity).
<button type="button" class="icon-button">
<svg aria-hidden="true"> … </svg>
<span class="visually-hidden">Open menu</span>
</button>
This is not a bad button. The SVG
icon is hidden from assistive technology
(AT) using the aria-hidden="true"
attribute. A span
is used to add a
meaningful label for AT. It is then hidden from view using the visual hiding
technique du jour.
But now have a look at this implementation.
<button type="button" class="icon-button" aria-label="Open menu">
<svg aria-hidden="true"> … </svg>
</button>
Again, the SVG
icon is hidden from AT and the <button>
was given an
aria-label
attribute with a meaningful value that will be picked up by AT.
Much more elegant and not actually in violation of that famous first rule of ARIA.