Skip to main content

Blog Post

Accessible Names - Label All the Things! (Part 1)

The more we label things when building a website, the easier it is for a person who is blind and uses a screen reader to use our sites. These labels are known as the “accessible name properties” and they are baked into HTML.  

Native HTML5 Accessible Name Properties

Image alt attribute

<img src=”rainstorm.jpg” alt=”Heavy rain in the woods”>

The alt attribute of the image tag serves as replacement text for the image. When the screen reader comes to the image, the alt text is read. And when an image can’t be displayed, the alt text is displayed instead. See the blog post on Image descriptions.

<title> tag

The title tag provides a name for the web page. It should generally be given in the reverse order that breadcrumbs are given - [page name] - [category name] - [site name] - so that unique information is read to the user first. This creates less repetition for the user.

<label> tag

The label tag is used to “name” input elements.  

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

The “for” attribute corresponds to the id of the input element. When the input receives focus, the label is read to the user as the name for the input element.

<legend> tag

The legend tag provides a name for <fieldset> elements. For example, a set of checkboxes can be  grouped and labeled like so:

<fieldset>
  <legend>Favorite food</legend>
  <input type="radio" name="favorite" id="pizza">
  <label for="pizza">Pizza</label>
  <input type="radio" name="favorite" id="apple">
  <label for="apple">Apple</label>
  <input type="radio" name="favorite" id="liver">
  <label for="liver">Liver</label>
</fieldset>

When a radio receives focus, the screen reader either reads both the legend text for each input, e.g. “Favorite food radio button Pizza, Favorite food radio button Apple, Favorite food radio button Liver,” or just once, “Favorite food radio button Pizza, radio button Apple, radio button Live,” depending on what mode the user is browsing in.

<th> tag

The <th> tag along with the scope attribute provides labels for a table’s header rows and columns.

<table>
  <caption>Pets</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Species</th>
      <th scope="col">Age</th>
    </tr>
    <tr>
      <th scope="row">Cassie</th>
      <td>Canine</td>
      <td>6</td>
    </tr>
    <tr>
      <th scope="row">Cooper</th>
      <td>Feline</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

In this example, a screen reader on row 2, column 2 would read: “Cassie species canine” which has much more meaning with the added context than just "canine."

<iframe> tag’s title attribute

Iframes are named via their title attribute. If you’re embedding a Google map, be sure to add the title attribute. Google does not include it in the embed code by default. You need to copy their embed code and add it.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3305.6147554158183!2d-84.280146!3d34.053751999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f57565534a5389%3A0x8862226a3f7a7225!2sMediacurrent+Interactive+Solutions%2C+LLC!5e0!3m2!1sen!2sus!4v1435428044073" width="300" height="225" frameborder="0" title=”Google map of Mediacurrent headquarters” style="border:0" allowfullscreen></iframe>

Buttons

The text between the opening and closing button tags names the button:

<button name="button">Click me</button>

For submit buttons, the value attribute acts as the name of the button:

<input type="submit" value="Submit">

Summary

Being vigilant about naming things on your site will help make the site tremendously more accessible to screen reader users and there’s a good chance it will also help search engines. Use these native HTML5 accessible name properties when available and possible. And when not available or possible, see our blog post on a few WAI-ARIA attributes that fill in the gaps in part 2.

Additional references
Why Care about Accessibility | Mediacurrent Blog Post
Building Accessibility into a Website from the Start | Mediacurrent Blog Post
Describing Images for Improved Web Accessibility | Mediacurrent Blog Post

 

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow