Alternative Text

Images

How do I add alternative text to images?

Alternative text (or "alt text") is a description of an image file, which is stored within an attribute of image tags used on web pages. Here's an example: src="/images/global/siteimprove-logo.svg" alt="Siteimprove logo". In this case, the alt attribute is set to "Siteimprove logo". Users who are blind or visually impaired rely on alt text to understand the context of images placed within the content. The presence of this description allows for screen readers (a type of assistive technology) to describe the image out loud, rather than defaulting to the image source (i.e. file name).

Every image asset should include an alt attribute, regardless of its purpose. Informative images, like the one used in my example above, should have a description describing their purpose. Decorative images, which only exist "for looks", and don't support their surrounding content, should have an empty alt attribute, like this: src="/images/global/decorative-image.png" alt=" The presence of an empty alt attribute will "hide" an image from users of assistive technology.

• Help Center Accessibility Article: Image Alt text best practices

Links

How do I address issues related to link text?

Link text is used to describe the content that you're linking to on your website. Users of screen reader technology can generate a list of links, having them read alphabetically and navigating websites from there.

For this reason, link text should be as descriptive as possible, and text like "Click Here" and "Read More" should be avoided entirely (as they depend on visual context in order to understand them). Siteimprove can help you address issues where the link text is used for multiple different destination URLs, or is too generic in its current context (e.g. "Read More"). An example of what to avoid is as follows: 

<h2>Poor Link Text Example</h2>
<p>
 <a href=/example/blogpost>Click Here</a> to read more about how to write proper link text.
</p>

By using "Click Here" as link text, you assume that your visitor has the visual context to know they will be going (i.e. a post about writing proper link text). The link text should be a description of where the visitor will end up, similar to the example below:

<h2>Proper Link Text Example</h2>
<p>
 We have a post on our blog about <a href="/example/blogpost">how to write proper link text</a>.
</p>

MS Office Accessibility: Alt Text

Everything you need to know to write effective alt text

If a picture is worth a thousand words, what is it worth to people who cannot see? In our digital world, it is easy for people with a visual disability to miss critical information or have a frustrating and negative experience. Imagine, for example, that a keynote speaker sends out their presentation after a conference. The presentation contains infographics to illustrate a key point. Without descriptions of the infographics, anyone with a visual disability cannot understand the infographic and misses out on key information.

This topic describes how to understand, write, and use effective alt text.

Use Meaningful Link Text

Link text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it. Link text such as “Click here” and “More” fail to meet these criteria.

Avoid using

• click here
• here
• more
• read more
• link to [some link destination]

Example:  For more information about the City of Tumwater click here.

The link text “click here” does not meet WCAG 2.0 criteria.

Technique: Rephrase the sentence so that “City of Tumwater” is the link text.

For more information see City of Tumwater.

Assistive Technology

Screen reader users navigate websites using a variety of techniques. One of those is to pull up a list of links (a feature of most screen readers) and navigate through that list. Links like “click here” and “more” are meaningless out of context.   

Technique:  Link text should stand alone independent of context.

Speech recognition users can click links with a voice command like “click” followed by the link text.

Technique:  Keep link text short and easy to say.

URLs

Long URLs should be not be used as link text. Short URLs that are easy to say and stand alone independently of context may be used.

Example: https://www.youtube.com/channel/UC5LlwuHK-vY2TcqXj4Yf49Q

Technique:  YouTube.com

Creating Accessible PDFs from Microsoft Word

The first step in creating an accessible PDF from Microsoft Word is to ensure that the original Word document is accessible.

Starting with an accessible Word document, a goal when exporting to PDF is do so in a way that preserves the accessibility features of the Word document, including heading structure, alternate text for images, and markup that explicitly identifies lists, tables, document language, and other content that is important for accessibility.

Do not print to PDF

This method of creating a PDF does not preserve the document’s accessibility features. The correct method of exporting to PDF depends on which version of Microsoft Office you’re using.

Word 2013 and Word 2010 (Windows)

• Go to File > “Save As…” and select PDF from the choices provided. By default this produces a PDF that preserves the document’s accessibility features.
• When saving, select Options and be sure that “Document structure tags for accessibility” is checked. This is checked by default, but could become unchecked under certain circumstances.
• If you select “Minimize Size” to reduce the size of your PDF, be sure to repeat the preceding step, as this option might uncheck the “Document structure tags for accessibility” checkbox.

More Resources

MS Office Accessibility: Create accessible PDFs

Add accessibility tags to PDF files to make sure that people who use screen readers and other assistive technologies can read and navigate a document with Tables of Contents, hyperlinks, bookmarks, alt text, and so on. Accessibility tags also make it possible to read the information on different devices, such as large type displays, personal digital assistants (PDAs), and mobile phones. In Microsoft 365 for Windows, Microsoft 365 for Mac, and Office for the web, you can add tags automatically when you save a file in PDF format.

• Save an accessible PDF

Need more help?

View the WebAIM Guides on Word Accessibility and Acrobat PDF Accessibility.

Creating Accessible PowerPoint Presentations

PowerPoint creates slide show presentations to convey information in a visual format that can include a combination of text, tables, images, charts, and graphics. For users of assistive technology, screen readers and Braille devices can convey content in a PowerPoint presentation if you follow the basic steps outlined in the Accessible Documents Overview.

Built-in Slide Templates

Built-in slide layout templates are designed so the reading order is the same for people with vision and for people who use assistive technology such as screen readers. The layouts contain all the formatting, such as theme colors, fonts, and effects. Changes to colors and fonts in the layout must be adjusted using the Slide Master to maintain accessible formatting for screen reader users.

Avoid using Text Boxes as they do not show up in Outline View which makes converting PowerPoint to HTML problematic. If there is more than one Text Box on a slide it may be read out of order by a screen reader. Use a pre-set layout from the New Slide drop-down selection options, and select the layout that best fits your needs.

Slide Titles

Individuals who use a screen reader skim slide titles to navigate; they can quickly scan through a list of slide titles and go right to the slide they want. Using unique slide titles allows them to clearly understand which slide they are on. Avoid using the same title for slides that have spill-over information, consider including additional information such as ‘Slide Title 1 of 2’.

Hyperlinks and Tables

Screen reader users sometimes scan a list of links. Links should provide a clear and accurate description of the link destination. Rather than providing the URL of the link, consider creating a hyperlink with text to describe it.

To keep track of their location in a table, screen readers count table cells and use header information to identify rows and columns. If a table is overly complex, the screen reader loses count and can’t provide useful information about the table. Blank cells in a table could also mislead someone using a screen reader into thinking that there is nothing more in the table.

Reading Order of Slide Contents

Screen readers read the elements of a slide in the order they were added to the slide, which might be very different from the order in which things appear. To make sure everyone reads the contents in the order you intend, it’s important to check the reading order by using the Selection Pane. From here, you can drag and drop to adjust the reading order of the contents on the slide.

Alt Text

For screen reader users, alternative text helps to communicate what is important in images and other visuals. Alt text provides a textual alternative to non-text content.

Accessibility Checker

Microsoft products have a built-in accessibility checker which can help the document author test the overall accessibility of the document. The checker provides Inspection Results, feedback about the importance of each item, and tips on how to repair issues.

Export to PDF

If all of the steps were followed to create an accessible PowerPoint presentation, exporting to PDF properly will ensure heading structure and other accessibility information will remain intact.

More Resources

MS Office Accessibility: Power Point

This topic gives you step-by-step instructions and best practices for making your PowerPoint presentations accessible and unlock your content to everyone, including people with disabilities.

PowerPoint has many features built-in that help people with different abilities to read and author presentations. In this topic, you learn, for example, how to work with the Accessibility Checker to tackle accessibility issues while you're creating your presentation. You'll also learn how to add alt texts to images so that people using screen readers are able to listen to what the image is all about. You can also read about how to use slide design, fonts, colors, and styles to maximize the inclusiveness of your slides before you share or present them to your audience.

In this topic

• Best practices for making PowerPoint presentations accessible

• Check accessibility while you work

• Create accessible slides

• Avoid using tables

• Add alt text to visuals

• Create accessible hyperlink text and add ScreenTips

• Use accessible font format and color

• Use captions, subtitles, and alternative audio tracks in videos

• Save your presentation in a different format

• Test accessibility with a screen reader

Need more help?

For more detailed information on how to create accessible PowerPoint presentations, visit the WebAIM’s article on PowerPoint Accessibility.

Web Accessibility Checklist 

This web accessibility checklist is based on the WCAG 2.0 Level A and AA standard. Many of the items in the checklist apply to webpages and web-based applications including electronic documents such as Microsoft Word, Adobe PDF; and other formats, and other products and services that are not specifically web-based.

Perceivable

Make content and controls perceivable by all users.

1. Do images have alternative text? Alt Image Best Practice
2. Does video have captions and does audio have a transcript?
3. Does the web page or document include headings, lists, ARIA landmarks, and other semantic elements to communicate document structure? 
4. Is the tab order and read order logical and intuitive?
5. Do form fields within web pages and documents have appropriately coded labels and prompts?
6. Have you avoided using visual characteristics to communicate information (e.g., “click the circle on the right” or “required fields are in red”)?
7. Does the interface have sufficient contrast between text color and background color?
8. Does the content scale well when text is enlarged up to 200 percent?

Operable

Make content and controls operable by all users.

1. Can all menus, links, buttons, and other controls be operated by keyboard, to make them accessible to users who are unable to use a mouse?
2. Does the web page include a visible focus indicator so all users, especially those using a keyboard, can easily track their current position?
3. Do features that scroll or update automatically (e.g., slideshows, carousels) have prominent accessible controls that enable users to pause or advance these features on their own?
4. Do pages that have time limits include mechanisms for adjusting those limits for users who need more time?
5. Have you avoided using content that flashes or flickers?
6. Does the web page or document have a title that describes its topic or purpose? Providing an Informative Title
7. Are mechanisms in place that allow users to bypass blocks of content e.g., a “skip to main content” link on a web page or bookmarks in a PDF?
8. Does the website include two or more ways of finding content, such as a navigation menu, search feature, or site map?
9. Is link text meaningful, independent of context?

Understandable

Make content and user interfaces understandable to all users.

1. Has the language of the web page or document (or individual parts of a multilingual document) been defined?
2. Have you avoided links, controls, or form fields that automatically trigger a change in context?
3. Does the website include consistent navigation?
4. Do online forms provide helpful, accessible error and verification messages?

Robust

Make content robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

1. Is the web page coded using valid HTML?
2. Do rich, dynamic, web interfaces, such as modal windows, drop-down menus, slideshows, and carousels, include ARIA markup?

Web Accessibility Training Videos and Resources

Siteimprove provides articles, interactive tutorials and videos for each of the items in the checklist.

Siteimprove Help Center.

Creating Accessible Documents

When creating documents it’s important to following a few basic steps to assure your document is readable by individuals with disabilities. The steps are the same for all document types, but will vary depending on which software program you’re using (Microsoft, InDesign, or other software programs) and the final format of the document.

Use Headings

Headings and subheadings should to be identified as such using the built-in heading features of the program. Headings should form an outline of the page content (Heading 1 for the main heading, Heading 2 for the first level of sub-headings, Heading 3 for the next level of sub-headings, etc.). This enables screen reader users to understand how the page is organized, and to quickly navigate to content of interest. Most screen readers have features that enable users to jump quickly between headings with a single key-stroke.

Almost every software program includes support for headings and subheadings.

Use Lists

Any content organized as a list must be created using the list controls tools within the software. Most software programs include one or more options for adding unordered lists (with bullets) and ordered lists (with numbers). When lists are explicitly using the tool option, it helps screen readers to understand how the content is organized. If a list is created by adding a symbol, such as an asterisk (*), it is identified only as a symbol. The screen reader does not provide the user with important information such as information about where they are on a list, or how many items are in the list, which can be very helpful information when deciding whether to continue reading.

Alternate Text for Images

Users who are unable to see images depend on content authors to supplement images with alternate text, which is often abbreviated “alt text”. The purpose of alt text is to communicate the content of an image to people who can’t see it. The alt text should be succinct, just enough text to communicate the idea without burdening the user with unnecessary detail. When screen readers encounter an image with alt text, they typically announce the image then read the alt text.

Most software programs provide a means of adding alternate text to images, usually in a dialog that appears when an image is added, or later within an image properties dialog.

If images are purely decorative and contain no informative content, they do not require a description. However, they may still require specific markup so screen readers know to skip them.
Images that require a more lengthy description, such as charts and graphs, may require additional steps beyond adding alt text.

Document Language

Some screen reader software is multilingual, and can read content in English, Spanish, French, and other languages. To ensure screen readers will read a document using the appropriate language profile, the language of the document must be identified.

You should also identify the language of any content written in a language other than the document’s default language. With this information, supporting screen readers will switch between language profiles as needed on the fly.

Most document software programs provide a means of identifying the document language and other languages within the document parts.

Tables

Tables in documents are useful for communicating relationships between data, especially where those relationships can be best expressed in a matrix of rows and columns. Tables must not be used to control layout. Software programs have other means of doing this, including organizing content into columns.

If your data is best presented in a table, keep the table simple. If the table is complex, consider whether you could divide it into multiple smaller tables with a heading above each.

A key to making data tables accessible to screen reader users is to clearly identify column and row headers. If there are nested in columns or rows with multiple headers for each cell, screen readers need to be explicitly informed as to which headers relate to which cells.

Exporting to PDF

Adobe PDF documents must be a “tagged” PDF to be accessible. There are correct ways and incorrect ways to export documents to PDF. Some software programs don’t support tagged PDF at all, while others provide multiple ways of exporting to PDF, some that produce tagged PDF and some that don’t.

More Resources

MS Office Accessibility: Word

This topic gives you step-by-step instructions and best practices on how to make your Word documents accessible and unlock your content to everyone, including people with disabilities.

You learn, for example, how to work with the Accessibility Checker to tackle accessibility issues while you're writing your document.

You can also learn about how to use fonts, colors, and styles to maximize the inclusiveness of your Word documents before sharing them with others.

In this topic

• Best practices for making Word documents accessible

• Check accessibility while you work in Word

• Avoid using tables

• Use built-in title, subtitle, and heading styles

• Create paragraph banners

• Add alt text to visuals

• Add accessible hyperlink text and ScreenTips

• Use accessible font format and color

• Create accessible lists

• Adjust space between sentences and paragraphs

• Test accessibility with Immersive Reader

Video

• Check the accessibility of your document