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 …
… is terrible and this …
… 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>
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.