Making Educational Software Accessible
Design Guidelines; Including Math & Science Solutions
image map with 5 links; see bottom of page for text links.
http://main.wgbh.org http://ncam.wgbh.org http://ncam.wgbh.org/cdrom/index.html Table of Contents Credits



Guideline 1
Provide access to images for users who are blind or visually impaired.

Many educational products use images to convey content and may have corresponding text referencing these images. When science and math content is provided in photographs, diagrams, or charts, students who are blind or visually impaired will miss some or all of the information. For static images (preproduced for use in the software) all of the following checkpoints apply. For dynamic images, such as line drawings created by students while using the software or photos scanned by students to add to a clip art gallery, only the first checkpoint provides useful solutions. Images are also commonly used for navigation within software. If other ways to navigate are not provided, these images must be properly labeled for the software to be accessible. See Checkpoint 1.2 for information on text equivalents and see "Benefits of Accessible Software" for information on accessible navigation.

Consider using Scalable Vector Graphics (SVG) format for images, especially in HTML-based content. Accessibility features of SVG permit improved viewing and printing of images. SVG allows smooth enlargement of images which can provide large, high quality images for users with low vision, and metadata included in SVG can be used programmatically to provide text information about images to blind users. For more information see:

Scalable Vector Graphics (SVG) 1.0 Specification
www.w3.org/TR/SVG

Accessibility Features in SVG
www.w3.org/1999/09/SVG-access



Checkpoint 1.1
Allow images and screen layouts to be printed.
Priority 1

Allowing the software's images to be printed separately from an image of the entire screen is a simple and broadly useful adaptation. Using a printed image, low vision users can create enlarged images. Blind users can use the print feature to create tactile images using specialized equipment. There are tactile graphics printers available that can print an image and may also be able to emboss any corresponding text in braille. Use standard operating system drivers to create images and text to maximize usefulness. For example, send font and character information to the printer rather than images of text, because images cannot be converted to braille.

Technique 1.1.1
Provide commands for printing the entire screen or a specific image

Flexibility in printing makes it easier for users to get the information they need.

Technique 1.1.2
Use the standard operating system print API

Specialized printers can use the information sent to the OS to create a high-quality tactile image. For example, one braille printer converts text into a braille font for image titles and labels, but only if the text is sent to the printer as character information and not a bitmap. For more information, see www.viewplustech.com/

Technique 1.1.3
Allow users to print to a file

Technology for digitally enhancing images is available that can, for example, convert a photograph into a line drawing by enhancing the edges of objects. To permit these conversions, users need to print the screen or an image to a separate file.



Checkpoint 1.2
Provide text equivalents for still images that convey educational content.
Priority 1

A sufficient text equivalent can range from a short sentence for a simple image to several sentences in order to adequately convey a complex image. When images are used for navigation, such as on a series of buttons for choosing an activity, a word or short phrase may be enough. If an image is intended to set atmosphere or provide decoration, it is useful to provide a brief description of several words or to give that image a null description. (A null description informs assistive technologies that the graphic does not need description. If no description at all is included, assistive technologies may announce an unlabeled graphic, leading the user to wonder what is missing.)

Text equivalents can be provided automatically during the display of a document (as alt-text tags are incorporated into a Web page or through use of an accessibility API) or they can be made available when the user selects the image and issues a specific command to obtain the text equivalent.

Technique 1.2.1
Provide meaningful alt-text tags for all images incorporated into screens built in HTML

HTML provides specific techniques for adding text equivalents to images, as shown in this excerpt from the Web Content Accessibility Guidelines 1.0, Technique 4.7.1:

When using IMG, specify a short text equivalent with the "alt" attribute. Note. The value of this attribute is referred to as "alt-text".
Example:
<IMG src="magnifyingglass.gif" alt="Search">

Technique 1.2.2
Allow users to print to a file

To provide a complete description of an image in HTML, give the user access to a longer piece of text using one of these two methods:

The "longdesc" attribute of the IMG tag in HTML 4.0 allows the page author to give a URL to a separate HTML file which contains a long-form description of the image. In HTML 4.0-compliant browsers that recognize the longdesc attribute, users will be able to access this information using browser commands. (For this reason, it is important that users be able to view the product content using their choice of browser as an alternative to any browser provided within the product.)
See the example below from the Web Content Accessibility Guidelines 1.0, Technique 4.7.1:

<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">

In sales97.html:
A chart showing how sales in 1997 progressed. The chart is a bar-chart showing percentage increases in sales by month. Sales in January were up 10% from December 1996, sales in February dropped 3% . . ."

For compatibility with user agents that don't support longdesc, provide a description link as well. This is a link containing only the letter "D" placed next to the image. The "D" link takes the user to the same page referenced in the longdesc attribute. It can be marked up like this:

<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">
<A href="sales97.html" title="Description of 1997 sales figures">D</A">

Technique 1.2.3
Provide equivalent functionality for products not using HTML so that text descriptions are available

Text describing images should be displayed either automatically or when the user requests it with a command. The text can be a part of the screen, either in place of or in addition to the image. It can also be hidden from sighted viewers and provided programmatically to assistive technologies through an accessibility API, either automatically or on command. This feature should be well documented in product help and in any appropriate teacher- support documents that may accompany the software. See the section on access issues for selected development environments for information on accessibility APIs.



Checkpoint 1.3
Provide tactile graphics or three-dimensional models for images.
Priority 2

For many images, reading a text description is far less useful to blind students than exploring a tactile image or model. Two- dimensional (2D) tactile graphics can be produced by a variety of means and when correctly constructed can add a great deal to a student's understanding. Three-dimensional (3D) tactile models may be most useful for complex images which depict physical objects or when 3D notation is used to describe an object, for example molecular structures for chemistry.

Technique 1.3.1
Provide tactile graphics for images

Tactile graphics can be created by individuals by printing images with a braille graphics embosser or by using "puff paper" which creates raised lines where ink was applied when it is heated. Professional quality tactile graphics may be created by making a high resolution mold which is then used to make plastic copies that are more durable and more detailed than is possible with puff paper. Tactile graphics may be most effective when accompanied by text that introduces the student to the conventions used and guides them in exploring the graphic. Less information can be conveyed in a tactile graphic than in a visual one because the sense of touch has lower resolution than vision does, so it may take more than one tactile graphic to completely capture the information in a complex visual diagram. For example, a diagram of the human body with many parts labeled may be best represented as one tactile diagram showing the overall layout of the body and identifying several regions, followed by a separate diagram for each region showing the labeled parts in detail.

Because creating tactile graphics requires a thorough knowledge of the perceptual processes of blind students, it may be best to contact one of the resources listed in Appendix 2, Braille and Tactile Graphics Production Resources. Once created, the set of tactile graphics can be made available either through the publisher's distribution mechanism or through an arrangement with the tactile graphic production facility. Availability of tactile graphics should be clearly documented in product help and in any appropriate teacher support materials. Availability of graphics should also be listed with the American Printing House for the Blind, a central source of information on how educators can locate accessible materials, listed in Appendix 2.

Technique 1.3.2
Provide 3D models for complex images

In some cases, even a good 2D tactile graphic is less useful than experiencing the shape of an object. Perspective projections of 3D images onto 2D representations are generally ineffective for blind users. Neither a text description of an image of a DNA strand nor a œat tactile graphic, for example, best conveys the full information about the shape and structure of DNA. A tactile model of the DNA strand used in conjunction with text will better meet blind students' needs. Possible resources for creating 3D models are listed in Appendix 2. Once created, the models can be made available either through the publisher's distribution mechanism or through an arrangement made with the model production facility. Availability of 3D models should be clearly documented in product help and in any appropriate teacher support materials. Availability of models should also be listed with the American Printing House for the Blind, a central source of information on how educators can locate accessible materials, listed in Appendix 2.





_ NSF Logo and link to NSF web site   WGBH logo and link to WGBH web site