After my previous post, about labels, @ted_drake commented “Is there a reason why you didn’t simply add text to the button?” which is a good question! The short answer is, we don’t want to render the text in the button. Instead we want to keep it a graphical icon.
But this question demands an emphasis:
WAI-ARIA is a last resort, it is designed to be a stopgap that augments conventional HTML markup. As HTML evolved, many of the problems ARIA solves have been eliminated. Often, if you are using ARIA you are making a mistake. As Ted continues to say: “…the first rule of ARIA is to not use it when there is a standard alternative.”
So back to the issue of labeling controls and elements; aria-label is a last resort. The best option is rendered text, so the visual display is consistent with the accessible naming, for example <button>Press me</button>. After that there are two attributes that can be used, title and alt.
An image may have an alternative textual description, that is what the alt attribute is for. Almost any element may have a title attribute, which will provide a human readable name for the given object.
In fact, I was wrong in the earlier post. Instead of using aria-label, title would have sufficed. The only times aria-label should be used is when you don’t want a tooltip with the text to be visible on desktop, and for naming more complex composite widgets.
I just learned something new, I hope you did too!