Semantics

1. Semantic HTML elements
2. Element specificity
3. HTML <label>
4. Alternative text
   1. Content and function

Semantic HTML elements

Most screen readers generate lists of headers based on a page's HTML, often referred to as landmark lists. Landmark lists allow for easy navigation to specific content on a page. Using <h1>, <header>, <main>, <footer>, <nav> and so on will provide assistive technology with the necessary information to outline a page. This is why it is always good practice to use semantic HTML, over a general <div> or <span>.

Element specificity

Browsers pick up on cues in your HTML to provide accessibility features out-of-the-box. These elements are automatically inserted into the tab order for most browsers:

• <button>
• <input>
• <form>
• <a>
• <area>
• <iframe>
• <audio controls>
• <video controls>
• <contenteditable> attribute
• <style="use-modify: read-write"> attribute
• Any element with tabindex equal to or greater than zero

Resource | Browsers handle each semantic HTML tag differently. For comprehensive details, check out this page on what each browser considers focusable.

HTML <label>

The HTML <label> tag represents a caption for an item in the browser. The most common use for a label is for user input, such as <input type="checkbox"> or <input type="text">. Labels help screen readers associate an item's caption to the item itself.

Note | By providing a label for an input, you are programming the browser to associate the two. Thus, the user can interact with the input by selecting the label, which is easier for users with motor impairments.

Note | Labels are necessary for every type of input on your page, though sometimes the native <label> element just isn't powerful enough. The ARIA attributes aria-labelledby, aria-describedby, and aria-label are useful alternatives for when <label> doesn't make the cut.

Read more about Aria labels.

Alternative text

Alternative text is both one of the simplest and most difficult aspects of web accessibility. It's one of the first taught principles, that images should always be accompanied by text for users who (1) are visually impaired, (2) have poor bandwidth, or (3) for some other other reason are not able to see the image.

Alternative text is applied to an HTML tag through the alt attribute, such as:

<img src="#" alt="A rotten banana">

Caution | Every image must have an alt attribute. If the surrounding text of an image provides relevant and substantial context, then the alt attribute should be set to null:

<img src="#" alt="">

Read more about alternative text.

Content and function

An alt attribute should succinctly describe an image's content and function. For example, it may be useful to describe an image with the following descriptors:

• Illustration of a New York office building
• A suburban backyard overgrown with weeds
• Diagram of the human heart

Caution | Avoid starting an alt attribute with "Image of..." or "Picture of...". If you use a semantic HTML tag, such as <img>, a screen reader will automatically read out that the piece of media is an image.

It is, however, appropriate to start an alt attribute with "Illustration of...", "Diagram of...", "Drawing of...", etc., as these descriptions provide additional context that may be useful in a user's understanding of an image.