Repetitive Content for Screen Readers

Ensuring content is usable by and for everyone means that care must be used when building both the visual design and the content that a non-visual user will access (either through speech or braille). Just as visual clutter can interfere with a user’s ability to navigate and understand a design, screen reader users require clear uncluttered content.

When the same content is presented multiple times by screen readers, users are impacted by the added cognitive load. For some users, this can create barriers in the non-visual design.

This page lists some specific places to watch for potential issues with repetitive announcements.

ALT text

Body text should not be repeated in alt text. This can cause the screen reader to needlessly repeat the same text. One common example of this is where the text of buttons and links also appears in the alt text for the graphic button or link.

For example, the following code will result in a screen reader announcing “Home Page Home Page graphic link”.

<a href="index.html"><img src="home.png" alt="Home Page">Home Page</a>

Title attribute

Generally, the title attribute should be avoided because it is not always supported by user agents, including screen readers, has several usability issues, and can create barriers for some users.

The following is an example of a button that uses a title attribute to repeat the label. This could result in a screen reader announcing “Submit Submit button”.

<button title="Submit">Submit</button>

A title attribute that merely repeats the label of the button is unnecessary. The label text alone should be sufficient to convey the name of the button.

Placeholder attribute

The use of the placeholder attribute is discouraged since it is not reliably announced by assistive technology and has inherent colour contrast and usability problems. See the Placeholder Text page for more information.

The placeholder attribute should never take the place of a label. A label should always be used.

However, placeholder text that duplicates the label text is not a helpful use of this attribute. For screen readers that announce placeholder text, this is repetitive for users.

For example, the following code could result in a screen reader announcing “First name, edit, first name”.

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

… With an aria-label

A form input with both an aria-label attribute and a placeholder attribute will result in the content being read twice, as some screen readers will also announce the placeholder attribute.

The text of an aria-label (or an aria-describedby) needs to be distinct from the text of the placeholder. The text should complement, not duplicate, each other. The placeholder attribute should also not duplicate the label.

Where a <label> element is combined with aria-label, aria-describedby, and/or placeholder attributes, test the entire element carefully using assistive technology that is known to support all of these features to understand what is being conveyed to the non-visual user.

Repetitive Button/Link Text

Imagine a design using multiple buttons with the same label. For example, a page of text content where each section of text has an “Edit” button.

Some screen reader users will navigate by focusable elements. For these users multiple buttons/links with the same generic text does not provide enough information to understand their purpose. For example, such users might hear “Edit button Edit button Edit button …” over and over as they move through the focusable elements on the page.

This problem can be avoided by providing additional context to each repeating focusable element. For example, repeating “Edit” buttons can be distinguished by using aria-describedby to repeat the section heading as part of the button announcement so that it is clearer to the non-visual user what will be edited.

<h2 id="description1">Contact Information</h2>
<button aria-describedby="description1">Edit</button>

See also the page on "Read More" links for discussion on identifying and avoiding links with generic text (e.g., “Click here”, “Read more”, etc.).

Redundant descriptions

Care must be used when adding alt, aria-label, or aria-describedby text to ensure that default screen reader information is not further repeated.

Every screen reader provides information about the various elements on the page (e.g., headings, regions, images, etc.). Screen readers may use different vocabulary to label the same content (e.g., “image” vs. “graphic”).

When choosing text to label content, do not include words that might sound like the screen reader’s own response to programmatic information.

For example:

• Using the word “image” or “graphic” in alt text for an image. For example <img src="cloud.png" alt=”weather graphic”> would be announced as "graphic weather graphic".
• Using the word “navigation” in an aria-label for a <nav>. For example, <nav aria-label="Main navigation"> would be announced as "main navigation navigation".

Things should not be repeated often. For example, If you have 100 links on a page that all open a dialog, then do not add 100 labels to those 100 links telling the user that the link will open a dialog. Telling a user how to use the design and what to do with the interface is a good thing; providing repeated tutorial information is simply annoying and can lead users to miss other important content while trying to avoid this experience. Find a way to explain it once.

Similarly, in a form with required elements, the asterisk is announced by assistive technology as part of the field label. In addition, it might not be clear what the asterisk is intended to mean. For example, the following is announced “First Name star edit”.

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

The visual marker should be hidden to assistive technologies if required fields in the form include the HTML5 required attribute or aria-required=”true”. Programmatically marking the field as "required" makes clear what the asterisk is intended to mean. For example, the following is announced “First Name edit required”.

<label for="first-name">First Name<span aria-hidden="true"> *</span></label>
<input id="name" type="text" aria-required="true">

Conclusion

Ensure the same content is not repeated multiple times by screen readers. Learn to use the major screen readers and how to use them to test your designs. Always test your design with screen readers to ensure that it is not needlessly repetitious. Remember to test using default screen reader settings.