SymbolFYI

aria-label for Symbols and Icons

The aria-label attribute is a WAI-ARIA property that provides an accessible name for an HTML element. When elements contain symbols, icons, or non-textual content, aria-label gives assistive technologies—especially screen readers—a meaningful string to announce in place of or in addition to the element's visual content.

When to Use aria-label

Use aria-label when:

An interactive element (button, link, input) contains only a symbol or icon with no visible text label
The visible text would be confusing or insufficient for screen reader users
You need to override the default accessible name computed from child text

Do not use aria-label when:

The element already has a visible text label that is descriptive (use aria-labelledby to reference it instead)
The content is purely decorative (use aria-hidden="true" on the symbol)

Basic Usage

<!-- Icon-only button -->
<button aria-label="Close dialog">
  <span aria-hidden="true">✕</span>
</button>

<!-- Symbol link -->
<a href="/settings" aria-label="Account settings">
  ⚙
</a>

<!-- Star rating widget -->
<div role="img" aria-label="Rating: 4 out of 5 stars">
  ★★★★☆
</div>

aria-label vs. aria-labelledby vs. aria-describedby

Attribute	Source	Use Case
`aria-label`	Inline string value	No visible label exists
`aria-labelledby`	References another element's ID	Visible label exists elsewhere in the DOM
`aria-describedby`	References another element's ID	Supplementary description, not the primary name

When a visible label exists, aria-labelledby is preferred because it stays in sync with visual changes:

<h2 id="section-title">Search Results</h2>
<div role="region" aria-labelledby="section-title">
  <!-- content -->
</div>

Symbols Inside Form Controls

For input fields that use symbols as placeholder context:

<!-- Search field with magnifying glass icon -->
<label for="search">Search</label>
<div class="input-wrapper">
  <span aria-hidden="true">🔍</span>
  <input id="search" type="search" />
</div>

Note that the icon is hidden from assistive technologies because the <label> element already provides the accessible name for the input.

Computed Accessible Name Algorithm

Browsers compute an element's accessible name using the ARIA specification's "accessible name and description computation" algorithm. The order of precedence is:

aria-labelledby (highest priority)
aria-label
Native HTML mechanisms (<label>, alt, title, <caption>)
Text content of the element
title attribute (lowest priority)

Understanding this order prevents conflicts. If an element has both aria-label and a visible text node, aria-label takes precedence and the visible text will not be announced.

Localization Considerations

aria-label values are hardcoded strings in HTML, which complicates internationalization. In server-rendered applications, generate aria-label values through the same translation pipeline as visible text:

<!-- Django template example -->
<button aria-label="{% trans 'Close dialog' %}">
  <span aria-hidden="true">✕</span>
</button>

In JavaScript frameworks, bind aria-label to translated strings from your i18n library rather than hardcoding English text.

Testing aria-label

Verify accessible names using browser DevTools. In Chrome, open the Accessibility panel in DevTools, select an element, and check the "Computed Properties" section to see the resolved accessible name. The axe browser extension also flags missing or incorrect accessible names automatically.

ARIA Label