WAI-ARIA

From perpendicular angel knowledgebase
Jump to navigation Jump to search

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.