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. Coming shortly!
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
