Skip to main content

Advanced Link and Button Techniques

To ensure accessibility, the programmatic name of a link or button must be clear and descriptive, even if the visible text is generic. This is critical when multiple controls on a page share the same label.

Consider an interface with several "Add to Cart" buttons:

Soda:

Diet Soda:

Ice Tea:

The code can be simplified to the following:

Soda: <button>Add to Cart</button>
Diet Soda: <button>Add to Cart</button>
Ice Tea: <button>Add to Cart</button>

For users of assistive technology, each of these buttons would be announced simply as "Add to Cart," making it impossible to distinguish which button corresponds to which product.

Technique #1: Add the Text

The most straightforward approach is to make the button's visible text fully descriptive. While this is the most robust and universally accessible solution, it directly alters the visual design, which may not always be desired.

<button>Add Diet Soda to Cart</button>

Screen Reader Result: Add Diet Soda to Cart Button

Technique #2: Off-Screen Text

The next solution uses the off screen text technique to add content to the link that is only visible to screen readers.

<button>Add to Cart <span class="sr-only">diet soda</span></button>

Screen Reader Result: Add to Cart Diet Soda Button

Technique #3: ARIA-LABEL

The aria-label attribute provides a custom accessible name that completely overrides the element's visible text for users of assistive technology.

Important: Because this attribute replaces the content, the aria-label value should incorporate the visible text. This practice supports voice control users who rely on speaking the visible label to activate the button.

<button aria-label="Add to Cart diet soda">Add to Cart</button>

Screen Reader Result: Add to Cart Diet Soda Button

Technique #4: ARIA-LABELLEDBY

The aria-labelledby attribute constructs an accessible name by referencing the content of other elements on the page. Like aria-label, this attribute replaces the button's visible text for assistive technologies.

It accepts a space-separated list of element ids and concatenates their text content to form the new label. In this example

Last modified