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:
Is the image/graphic/object necessary to have on the page?
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?
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.”
"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.
Confirm they are still clear when magnified
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.
Making Images Accessible [University of Washington] http://www.washington.edu/accessibility/checklist/images/
Image Description Guidelines [DIAGRAM Center] http://diagramcenter.org/table-of-contents-2.html
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
Short, short, short
Alt Text [YouTube 1:06 by Mary Kraus (USC Ed Tech graduate)] https://www.youtube.com/watch?v=2RHt4CP9bqg
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 [W3C] https://www.w3.org/WAI/tutorials/images/complex/
W3C has a great tutorial on image maps--basically, it's possible to add an alt tag for hotspots. The tutorial is here: https://www.w3.org/WAI/tutorials/images/imagemap/
Flowcharts, Concept Maps Scatter Plots
Flowcharts & Concept Maps [Penn State] http://accessibility.psu.edu/images/flowcharts/
Flow Charts [NCAM] http://ncam.wgbh.org/experience_learn/educational_media/stemdx/exg
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/
Add Descriptive Text to Images for Better Search Engine Resultshttp://www.dummies.com/how-to/content/add-descriptive-text-to-images-for-better-search-e.html
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."
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."
...