Examples of Accessible name

These are examples of the accessible name definition. The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help implementers of ACT rules understand it.

Using aria-labelledby

The input elements have an accessible name of, respectively, "Billing Name" and "Billing Address". These accessible names are given by the aria-labelledby attributes and associated elements.

<div id="myBillingId">Billing</div>

<div>
	<div id="myNameId">Name</div>
	<input type="text" aria-labelledby="myBillingId myNameId" />
</div>
<div>
	<div id="myAddressId">Address</div>
	<input type="text" aria-labelledby="myBillingId myAddressId" />
</div>

Using aria-label

This button element has an accessible name of "Share ACT rules" given by its aria-label attribute.

<button aria-label="Share ACT rules">Share</button>

Using img alt attribute

This img element has an accessible name of "ACT rules" given by its alt attribute.

<img src="#" alt="ACT rules" />

Using implicit labels

The button element has an accessible name of "Share ACT rules" given by the enclosing label element (implicit label)

<label>Share ACT rules<button>Share</button></label>

Using explicit labels

The button element has an accessible name of "Share ACT rules" given by the associated label element (explicit label)

<label for="act-rules">Share ACT rules</label><button id="act-rules"></button>

Using text content

This a element has an accessible name of "ACT rules" given from its content. Note that not all semantic roles allow name from content.

<a href="https://act-rules.github.io/">ACT rules</a>

Not named from content

This span element has an empty accessible name ("") because span does not allow name from content.

<span>ACT rules</span>

Not Labelable elements

This span element has an empty accessible name ("") because span is not a labelable element.

<label>ACT rules<span></span></label>

Note: When the same element can have an accessible name from several sources, the order of precedence is: aria-labelledby, aria-label, own attributes, label element, name from content. The examples here are listed in the same order.

Note: For more examples of accessible name computation, including many tricky cases, check the Accessible Name Testable Statements.