Reviewing methods of applying accessible names

Method 1: Using the element’s content

The contents of a heading element:

<h4>About our team</h4>

The contents of a <button> element:

<button class="button">Submit</button>

The content of a <a> element:

<a href="#">Contact us</a>

Method 2: Using the contents of an attribute within the element

The contents of the alt attribute can generate an accessible name for the <img> element:

<img src="a.png" alt="A dummy image">

The contents of the aria-label can generate an accessible name for many elements:

<button aria-label="Close">
</button>

The contents of the title can generate an accessible name for many elements:

<button title="Close">
</button>

The contents of the placeholder attribute can generate an accessible name for the <input> element with a type of text, search, url, tel, email, password, or number. This attribute can also generate an accessible name for the <textarea> element.

<input type="text" placeholder="Search">

The contents of the aria-placeholder attribute can generate an accessible name for non-form elements. Unlike the native placeholder attribute, this will not present information on-screen. It will only be available in the accessibility tree:

<div
  contenteditable
  role="textbox"
  aria-placeholder="Add a date"
>
</div>

Method 3: Using the contents of a related element

The contents of the <legend> element can generate an accessible name for the <fieldset> element:

<fieldset>
  <legend>Billing information</legend>
</fieldset>

The contents of the <caption> element can generate an accessible name for the <table> element:

<table>
  <caption>Average rainfall in Australia</caption>
</table>

The contents of the <label> element can generate an accessible name for the <input>, <textarea>, <meter> and <progress> elements:

<label for="name">Full name</label>
<input id="name" type="text">

The contents of one or more elements can generate an accessible name for another element - if there are matching aria-labelledby and id values:

<nav aria-labelledby="section-heading">
  <h4 id="section-heading">About us section</h4>
</nav>

Testing home