Images and Other Non-Text Elements

Introduction to the Basic Concepts

The basic idea is that you must tell a user who cannot see an image, graphic, or other non-text object on your page what others see. This is especially critical if it includes important information. This is most commonly done through Alternative Text (Alt Text), but sometimes requires longer, more detailed long descriptions (longdesc).

When a screen reader gets to an image/graphic/object, it reads the alt text and/or long description to the user. If the user can see the site, the alt text shows up in a little window when he or she hovers over the image.

All users may benefit from having an image, graphic, or other non-text object described within the body of the site, which may eliminate the need for a long description. This can also be done by providing a text description of the item on another web page that is linked from the body of the text. This might be especially useful for long descriptions that users might want to have available separately, such as the description of a map or details on a chart that could be used for studying.

Some items are purely decorative, and the guidelines allow for a way to create what is called a 'null tag', which tells the screen reader to skip over that image.

Two questions to ask yourself when designing online materials:

  1. Is the image/graphic/object necessary to have on the page?

  2. Would it be useful to all users if you describe the image/graphic/object in the body of the page or provide a link to a text description?

How to decide when to use Alt Text, long description, or null tag?

  • Text alternatives – a decision tree http://4syllables.com.au/articles/text-alternatives-decision-tree/ “To help web writers write better text alternatives for images, we’ve produced a decision tree. It asks three main questions, guiding writers to decide whether they need a blank, short or long text alternative.”

Tools that may help you create or check accessibility of images/graphics/objects

"Web accessibility tools will check that all your images have ALT text, but they can’t test the quality of the text, given that it can't interpret what the picture is or what you're trying to convey."

    • Image Alt Test http://seositecheckup.com/tools/image-alt-test Type in a URL to check the images for required alt attributes.

Start with Clear Images, Graphics, or Other Non-Text Objects

Confirm they are still clear when magnified

Helpful Hints and Best Practices

  • If there is text in an image, make sure that you include it in the alt text. Be aware, that there may still be a problem for users who enlarge the image because the text may become pixelated and unreadable.

    • Do not use "picture of" or "image of" in Alt Text

    • Be descriptive, but succinct

  • For complex images where you plan to include a long description explaining the content of the image - see Descriptive Text / Long Description below - you still need to include short alt text for the image itself.

  • Instead of putting information in a table, consider using a list because it is much easier for JAWS users.

Getting Started

Alt (Alternative) Text (or Alt Tags )

HTML code, the alternative text is written as an 'alt tag'

    • Alternative Text [WebAIM] http://webaim.org/techniques/alttext/

    • Image ALT Text in Microsoft Office [Accessibility at Penn State] http://accessibility.psu.edu/microsoftoffice/microsoftalttags/

Alt Text Examples

    • Alternative Text: Context is Everything [WebAIM] http://webaim.org/techniques/alttext/#context

    • DIAGRAM Center

      • Image Description Guidelines http://diagramcenter.org/table-of-contents-2.html

      • Accessible Image Sample Book http://diagramcenter.org/standards-and-practices/accessible-image-sample-book.html

      • Poet Image Description Tool (training tool) https://diagram.herokuapp.com/training/index

Helpful Hints and Best Practices - Alt Text

Short, short, short

Getting Started - Alt Text

Alt Text [YouTube 1:06 by Mary Kraus (USC Ed Tech graduate)] https://www.youtube.com/watch?v=2RHt4CP9bqg

Other Information - Alt Text

Adding Alt Text to an Image in Google Presentation [YouTube 3:50 by Mary Kraus (USC Tech graduate)] https://www.youtube.com/watch?v=-DrfNYjHR7s

Alt text blunders http://webaim.org/articles/gonewild/#alttext

Complex Images

Flowcharts, Concept Maps Scatter Plots

Descriptive Text / Long Descriptions

Helpful Hints and Best Practices - longdesc

  • Alt Text attribute should not be used for long descriptions; do add Alt Text to label the item

  • Provide long text descriptions for any complex item:

    • on the page

    • on another page that you link to

    • in a data table with text summary

    • Provide the details needed to convey the meaning of the content or item

Example of Alt Text on the image of a map and the link to a separate page with long description of hte important information on the map:

[from SSB BART webinar, Non-Text Elements, April 14, 2016]

  • <img src=“school_map.gif” alt=“School Map” />

  • <a href=“school_map.html”> School map description </a>

Long Descriptions (longdesc)

  • [advanced] HTML5 Image Description Extension (longdesc) https://www.w3.org/TR/html-longdesc/

Miscellaneous

Images in Assessment

    • Accessible Assessments [NCAM] http://ncam.wgbh.org/experience_learn/educational_media/accessible-assessments

      • (Test) Item Writer Guidelines for Greater Accessibility [NCAM] http://ncam.wgbh.org/experience_learn/educational_media/accessible-assessments/item-writer-guidelines

    • Describing Images for Enhanced Assessments http://ncam.wgbh.org/experience_learn/educational_media/describing-images-for-enhanced

"Based on the results of this study, image description appears to be an unbiased accommodation. We recommend that it be permitted on statewide assessments and urge state departments of education to include description as an allowable accommodation for assessment and for instruction."

Resources to Explore Further

New links that I find but have not yet looked at closely enough to add to my lists.

DIAGRAM Center http://diagramcenter.org/ "Making it easier, cheaper, and faster to create and use accessible digital images”

Accessible Graphs, Charts and Maps [long text descriptions & putting data in tables] (YouTube 3:42) https://www.youtube.com/watch?v=9d_H78ZDQJU&ebc

(

ALT TEXT

Note: the terms alternative text, alt attribute, alt tag and alt text are used interchangeably when referring to adding a text equivalent to non-text content.

When creating alternative text it is important to convey not only the content of the image but also the function, if applicable (e.g. image buttons, image maps, or image links).

#long descriptions There are times when description may not be succinct enough to use an alt attribute AND a description does not appear in the content of the page. This is common for complex images such as charts, maps, and graphs. If adding a long description to the content of the page is not feasible then it is best to use the longdesc attribute. This attribute can be used in a couple of ways:

The image can be a link to the long description page. Note: Alternative text should be provided for the image.

A link can be added to the content of the page next to the image

As of September 2015, there is no visual indicator that a longdesc has been provided with an image. Until longdesc is better supported, the recommended best practice is to provide a standard link to a longer description along with the longdesc (See Note 1 (Links to an external site.)).

Tools for Images

How to add alt text to images in Microsoft Word (YouTube 2:06) https://www.youtube.com/watch?v=D6-3MJVhUT4

Accessible Graphs, Charts and Maps (YouTube 3:42) https://www.youtube.com/watch?v=9d_H78ZDQJU

Alternative Text [WebAIM] http://webaim.org/techniques/alttext/

(W3C) Using Long Descriptions https://www.w3.org/TR/WCAG20-TECHS/H45.html

Option 1

The image can be a link to the long description page. Note: Alternative text should be provided for the image. There are a number of advantages to linking to a long description page:

The description can be reused for multiple instances of the same image

Avoids visual clutter in the original document

Provides an obvious endpoint to the description

Option 1 example:

<p><img src="map.gif" alt="a complex map" longdesc="mapdesc.html"/></p>

Option 2

A link can be added to the content of the page next to the image or within the same page. While this methods ensures all users can access the description it also has a limitation in that the longdesc does not identify an obvious end-point. This requires content developers to not only provide the description but also indicate the its end-point.

Option 2 example:

<img longdesc="thispage.html#desc" alt="Map of the United States" src="http://www.mapsofthe world/maps/US.png">

<div id="desc">

<h3>Long Description: Map of the United States</h3>

<!-- Full Description of Map -->

<p>Long description ends.</p>

<div>

MATH

EQUATIONS

There are two primary methods to make equations on the web accessible to all users:

- Add alt text if the equations are saved as image files. The alt text should spell out the names of each of the symbols in the equation. For example, for the equation 2(4y+1) = 3y the alt tag would state, ì2 open paren 4 y plus 1 close paren equals 3 y.î

- Instead of using image files, it is recommended that you use a software or an online tool that allows you to produce equations in accessible formats using mathematical markup language (e.g MathML).

How do you use MathML?

The easiest way to produce MathML is to use an equation tool that supports it. An example is the MathType integration for Microsoft Word (Links to an external site.). When this product is installed, the user can click a button in the toolbar in Microsoft Word to insert an accessible equation into a document.

What is MathML? http://www.washington.edu/doit/what-mathml

Math and STEM Content http://accessibility.psu.edu/math/

Guidelines for Describing STEM Images http://ncam.wgbh.org/experience_learn/educational_media/stemdx/guidelines

To find out which combinations of software function correctly together to read mathematical content, there is a free tool available called the Math Support Finder Find Accessible Tools for Reading Math http://msf.mathmlcloud.org/

There are many paid and free products available to read and convert mathematical content. An example of free software is InftyEditor http://www.inftyproject.org/en/software.html#InftyEditor

InftyEditor is a free software for creating accessible mathematical content. This software functions like a typical text document except that it allows the users to add mathematical content and then export it as MathML and other formats. From the same website, users can also buy a software called InftyReader. This tool will recognize and convert scanned images of mathematical content into accessible formats. There is a free version of InftyReader with limited functionality available for download.

(webinar recording) Accessibility Basics Series #3: Non-text Elements http://info.ssbbartgroup.com/Accessibility-Basics-Series-3_Resources.html?mkt_tok=eyJpIjoiTjJVMVpqY3dNalV4TW1SaCIsInQiOiJZcDQwYitaM3UxQ2p6U3R6ejFBN1pwNjVuN3hqTXRrdUlxVm54UHllRG1iVFh0UVwvVklcL0FFVkFwYzFsR1RaUW9idjdoVzgzTDRiYkRyMURmK3FzSkliMXJkYXE2ck5SWms0dkcyOTJCdGJnPSJ9

Original Presentation Date: April 14, 2016 "This high-level webinar introduces best practices for accessible non-text elements, including providing informative alternative text for meaningful images, text equivalents for complex images, and using text instead of images of text."

...