Why accessible names matter

Screen readers rely on each meaningful element having an accessible name to build the spoken UI. When an element’s name is combined with its role, users get the context they need to understand what they are interacting with and why it is on the page. Without a name, a screen reader announces only the role—leaving users to navigate a page hearing “button,” “checkbox,” or “image” with no further information.

You can inspect an element’s accessible name in Chrome’s DevTools by right-clicking the element and choosing Inspect. In the Elements panel, open the Accessibility pane (it may be behind the » symbol) and look for the Name property under the Computed Properties drop-down.

Whether the name comes from an img’s alt text or an input’s associated label, the result is the same: the element receives an accessible name that screen readers can announce.

Give every page and frame a title

Each page needs a title element that briefly describes its content. The title is the accessible name of the page, and it is the first text a screen reader announces when it enters the page. For example, a page with the title Mary's Maple Bar Fast-Baking Recipe gives users immediate context.

Frames and iframes also require a title attribute. Even if the content inside the iframe has its own internal title, a screen reader typically stops at the frame boundary. It announces the frame element and its accessible name from the title attribute, letting users decide whether to enter the frame or skip it.

Add text alternatives to images and objects

An img element should always include an alt attribute, which gives the image its accessible name. If the image fails to load, the alt text appears as a placeholder so users still understand what the image conveyed.

Writing good alt text involves two quick checks:

  1. Does the image provide content that is hard to get from the surrounding text?
  2. If so, convey that content as succinctly as possible.

Purely decorative images that contribute no useful content can use an empty alt="" attribute, which removes them from the accessibility tree entirely.

For images inside links, the alt text should describe the destination of the link rather than the image itself:

<a href="path/to/sale.html">
  <img src="sale.png" alt="View the annual sale">
</a>

Likewise, an <input type="image"> used as an image button needs alt text that describes the button’s action:

<input type="image" src="search.png" alt="Search">

<object> elements, used for embeds like PDFs or Flash content, should contain alternative text as regular text inside the element. This text is shown if the embed fails to render. For example:

<object type="application/pdf" data="/report.pdf">
  Annual report
</object>

Buttons and links are central to navigating any site, so both need solid accessible names.

Buttons

A button element derives its accessible name from its text content. For buttons outside a form, descriptive action text may be all you need:

<button>Book this appointment</button>

Icon buttons are a common exception. When a button uses only a graphic symbol, as in a WYSIWYG editor’s formatting controls, the accessible name should come from an explicit aria-label attribute. This overrides any text content in the button and ensures screen reader users hear a clear action description.

<button aria-label="Bold" class="icon-button"></button>

Links get their accessible name primarily from their text content. Instead of filler text like “Here” or “Read More,” put the most meaningful description directly into the link. This is especially valuable for screen reader users who navigate via shortcuts that list every link on a page—repetitive filler makes those lists far less useful.

<a href="/article">Read the guide on accessible forms</a>

Associate labels with form controls

Form elements such as checkboxes can be labeled in two ways. Both methods cause the label text to double as a click target, which helps mouse and touchscreen users too.

  • Wrap the input inside a label element:
<label>
  <input type="checkbox" name="offers"> Receive promotional offers?
</label>
  • Use the for attribute on the label, pointing to the input’s id:
<input type="checkbox" id="offers" name="offers">
<label for="offers">Receive promotional offers?</label>

With a properly labeled checkbox, a screen reader announces the element’s role, its checked state, and its accessible name—for example, “checkbox, checked, Receive promotional offers?”—giving users complete context at a glance.