WAI-ARIA

From perpendicular angel knowledgebase
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

This is totally a stub

On Aria-label attributes

This thread by Amelia Bellamy-Royds explains the impact of applying aria-labels to links and buttons.

FYI to every front-end developer: An aria-label attribute on a button or link effectively replaces the text content of that element with the new label.

Do not use it when you want to include a description or additional information—use `title`, or even better, real visible text!

You usually only want aria-label on a button or link to provide a text version of an icon:

<button aria-label="search"><!-- svg code for a magnifying glass --></button>

<a href="/" aria-label="home"><!-- font icon of a house --></a>

For wider support, use clipped text content.

Again, this only applies on certain element roles, where child content is used as the accessible element name.

For container elements, like <nav> or <section>, aria-label behaves as an extra identifier. For <input> etc, it replaces on-screen labels but not the actual value.