Alternative Text, Links and Accessible Tables

Relevant Alternative (alt) Text

Images are used to convey information and enhance the message of written content. Images should have meaningful alternative text to ensure that non-visual readers can benefit from the information images provide.

“The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.” [WebAIM]

The alt attribute allows content developers to provide information about the images to non-visual readers.

Content creators should provide a concise description of what is featured on the page. The ultimate goal is to allow an individual who can not see the image to have same user experience as a sighted individual.

Occasionally images are used for decorative purposes. It is important to still use the alt attribute, just leave it empty (called the null alt attribute). With the null attribute, screen readers ignore the image entirely.

Alternative text can be too limiting for complicated images such as infographics, charts, or graphs. In this case, provide a clear description of the information the image conveys in the written content that precedes or follows the image.

More helpful information can be found on the WebAIM and W3C WAI websites.

Properly Labeled Links

Links are a useful way for content developers to provide additional information, site research sources, and an alternative way for reaching additional areas of any given website.

A common practice when linking to additional information is to use generic link text such as “Learn More” or “Click Here.” When these links are accessed in a screen reader shortcut list, the links are not associated with surrounding content. As a result, hearing “Learn More” provides no information about where the link takes the end user. To ensure all links make sense out of context, content developers should use descriptive link text. Instead of “Learn More,” use “Learn more about our financial assistance programs.”

Apart from making sure link text is descriptive, content developers should indicate if the link will take the end user off the website they are currently visiting.

Also, good practice is to let the user know if the link is a document as opposed to web content. Adding (Word Doc) or (PDF) to the link text will alert the end user they are opening a document.

More information is provided on the WebAIM website.

Accessible Tables

The purpose of data tables is to present information in a grid, and to have column or rows that show the meaning of the information in the table. Sighted users can visually scan a table and make quick visual associations between data in the table and their appropriate row and/or column headers.

Users who can not see the table, can not make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them. More information is provided on the WebAIM and W3C WAI websites.

It is beneficial to create a checklist of accessibility best practices and refer to it whenever new content is created. These best practices should also be assessed during the editing or quality control process to ensure proper implementation.

DAISYpedia Categories: 

This page was last edited by VLuceno on Sunday, August 21, 2016 21:40
Text is available under the terms of the DAISY Consortium Intellectual Property Policy, Licensing, and Working Group Process.