Accessible Electronic Content: Compliance Examples

Compliance Examples

Note: These examples cover commonly-used HTML elements and applications at UNC-Chapel Hill. If you have questions about these examples or the accessibility of any electronic content, contact ITS Web Services.

Common Applications

Microsoft Office (Word, PowerPoint, Excel, Access)

Documents created with Microsoft Office applications are generally accessible.
MS Office 2000 and XP are compatible with screen-reading software JAWS 5.0 (campus standard).
Images, charts, graphs, and other visually-oriented materials created natively within Microsoft Office applications or imported must be considered on a case-by-case basis. Most visually-impaired users will require either effective text descriptions or tactile alternatives (see Formulas, Graphs, Maps).

See:
Accessible Electronic Content: Microsoft PowerPoint for detailed solutions and recommendations for handling PowerPoint files.

See also:
Microsoft's Accessibility website.

Blackboard

Generally accessible, but instructors and students should be aware of its limitations. Any documents or files uploaded into Blackboard must be considered independently.

See:
Accessible Electronic Content: Blackboard for detailed notes on the use of Blackboard by students with disabilities.

See also:
Blackboard.com's Accessibility pages.

SAS

SAS provides a customized accessibility tagset that can be used with the Output Delivery System (ODS) MARKUP statement to produce more accessible HTML pages.

See:
"SAS Q&A: Supporting 508 Accessibility Requirements."

SPSS

Tables in SPSS present difficulties for screenreaders. Tables can be exported into Microsoft Excel or Word where the column and row headings are announced for each single cell, making scanning of tables easier than in the SPSS format.

See:
"A Screen Reader Solution for Accessing SPSS 9.0 Without Sight."

Formulas, Graphs, Maps

Mathematical/scientific formulas, graphs, maps and other materials used to present and summarize data in a visual form are not accessible to users who are visually impaired. The UNC Department of Disability Services (DDS) suggests that tactile alternatives (e.g., Braille) be used for visually-oriented course materials that can not be easily described with text.

See:
Accessible Electronic Content: Materials Requiring Tactile Alternatives for assistance with making these materials accessible at UNC-Chapel Hill.

See:
Accessible Electronic Content: Text Descriptions for Formulas, Graphs, and Maps for guidance on creating effective text descriptions.

See:
UNC-Chapel Hill Dept. of Disability Services video on creating tactile graphs [4 min].

Other resources:
National Center for Accessible Media accessible graph design guidelines.

Forms

Electronic forms that are supposed to be completed online should allow people using assistive technology to complete the forms. They should be able to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
If a timed response is required, alert the user. Provide a way for the user to indicate if they need more time to respond.

See:
Accessible Electronic Content: Forms for assistance on making forms accessible at UNC-Chapel Hill.

See also:
WebAIM tutorial "Creating Accessible Forms."

Frames

To facilitate frame identification and navigation, title each frame, using the HTML "title" attribute.

Example:
WebAIM Frames Tutorial showing an example of providing a title for each frame.
Use the <NOFRAMES> tag to define frames content for browsers that can't display frames.

Example:
W3C's "Writing for browsers that do not support FRAME."

Images

Use an ALT tag to provide a text description of all non-text items.

Examples:
This image does not have an ALT tag with a text description (and, therefore, this page will not pass minimum web page accessibility tests). A screen reader will tell users when it encounters the image on the web page, but it can't tell them what is portrayed:

This image does have an ALT tag. As you move your cursor over the image, the text description is displayed. A screen reader can read this description to the user:

ALT tag descriptions have to be brief. There are other HTML tags that allow you to provide lengthier descriptions of non-text items. Keep in mind, however, that not all browsers and screen readers support these tags.

LONGDESC (Long description) tag -- allows you link to a URL that provides a longer description of an image. You can use LONGDESC to provide descriptions for complex charts and graphs.

See:
Example using Dreamweaver to create a long description for a complex image.
D-link or "D" link (description link) -- a D-link consists of putting the letter "D" (which stands for description) after the image and linking it to a separate page which contains the longer description of the image.

See:
Example showing use of the D-link.
Empty ALT tag -- providing ALT tag descriptions for purely decorative graphics (fancy ruler bars, bullets) can be distracting and annoying for screenreader users, and usually doesn't provide useful information. If the ALT tag for these elements is empty, you can still satisfy the requirement of providing an ALT tag for every graphic, while not adding aural clutter for the screenreader user.

Example:
For a .gif file that contains a decorative blue bullet, instead of giving a literal description in the ALT tag: <img src="bluebullet.gif" alt="blue bullet">
use an empty ALT tag: <img src="bluebullet.gif" alt="">
Moving images can create problems. People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights). If you include animated .gif images or other refreshing content that cause the screen to flicker, avoid causing a flicker with a frequency greater than 2 Hertz and lower than 55 Hertz.

See:
Example of a flickering image that could cause seizures.

Image Maps

Image maps fall into two categories: server-side image maps and client-side image maps.
A client-side image map's functions are provided on the client's (the user's browser) end rather than at your web server's side. All the information needed to run the map is included in your web page document. Since text-only browsers, screen readers, or assistive devices may not be capable of interpreting links in server-side image maps, use client-side image maps instead of server-side image maps.

Example:
WebAIM Alternative Content Tutorial: Client-side image map regions.
Server-side image maps do not allow you to use ALT tags to describe individual links in the image map. So if you use a server-side image map, provide a redundant set of text links to duplicate the links in the map. This allows users to interact with the links without having to use a pointing device, such as a mouse.

Example:
WebAIM Alternative Content Tutorial: Server-side image map regions.

Multimedia

Audio Content

Provide text transcripts for audio materials.

See:
Accessible Electronic Content: Audio Content for detailed solutions and recommendations for handling audio materials.

Video Content

Provide text captioning for hearing-impaired users.
Provide audio descriptions for video that contains visual information necessary for comprehension and synchronize these with the video presentation.
Provide an integrated transcript of the audio (captions) and the audio descriptions.

Example:
�A Su Salud! multimedia clips that include complete captioning and video description for both hearing- and vision-impaired users.

See:
Accessible Electronic Content: Video Content for detailed solutions and recommendations for handling video materials.

Microsoft PowerPoint

Text-only PowerPoint presentations can be made accessible with little difficulty. Images, charts, graphs, and other visually-oriented materials used in PowerPoint presentations must be considered on a case-by-case basis. Most visually-impaired users will require either effective text descriptions or tactile alternatives (see Formulas, Graphs, Maps).

See:
Accessible Electronic Content: Microsoft PowerPoint for detailed solutions and recommendations for handling PowerPoint files.

Macromedia Flash

Flash content created with versions 5.x and earlier is not accessible.

Flash MX, however, supports Microsoft Active Accessibility (MSAA) which allows text equivalents to be specified for elements of Macromedia Flash movies and provides some control over how screen-reading software handles these objects.
See:
Accessible Electronic Content: Macromedia Flash for detailed solutions and recommendations for handling Flash content.

Macromedia Director

Content created with older versions of Macromedia Director is not accessible to learners using screen-reading software. Macromedia recently announced that the latest version of Director (MX) does offer some accessibility features. Evaluations of this product are not yet conclusive.

Developers may need to consider alternative versions of content created in Director.
See:
¡A Su Salud! (a UNC-sponsored Spanish for healthcare professionals program) for an example of a Director application that is also being developed in an alternative web-based version.

Navigation

Navigation links, menus, or banners are often repeated on each web page. Include a "skip to main content" link at the top of each page so that screen reader users can save time and don't have to listen to a repeated menu each time they move to a new web page.

How to do it:

Visible link:
At the top of each page, include a "skip to main content" link that takes users to the top of the main contents of the page.

Example of website with a visible skip link.

Invisible link:
At the top of each page, include an invisible "skip to main content" link by using a tiny, transparent image that is the same color as the background with ALT text = "skip to main content." The link should take users to the top of the content section of the page.

Example of website with multiple invisible skip links.

Scripts, Applets, etc.

Provide alternative content for users with browsers that don't support scripts. Put the content within a <NOSCRIPT> tag.

Example of NOSCRIPT tag:
WebAIM Tutorial: "Javascript Alternatives."
If your web page requires the user to have an applet, plug-in, or other application to interpret the page's content, you must provide a link on the page to it.
Include ALT tags when you use Java applets so browsers that don't support Java will give the user information about the applet's function.

Style Sheets

Style sheets are used to control the layout and appearance of web pages. Screen readers ignore style sheets when reading the content to users. If you use a style sheet, check your page with styles turned off to see if the page still makes sense.

How to turn off style sheets in your browser:
In Microsoft Internet Explorer:
Tools --> Internet Options --> Accessibility --> Check all boxes under "Formatting"

In Mozilla Firefox:
View --> Page Style --> No Style

In Netscape Navigator:
Edit --> Preferences --> Advanced --> Uncheck "Enable style sheets"

Tables

Used for Page Layout

Page layout tables visually format images, text, and other information on the page such as a navigation bar, or a newspaper page with stories, links, and images. Each cell in a layout table is normally independent and can be viewed on its own.
If you use a table for layout purposes, make sure the table makes sense when it is linearized. This means that the cells are read in the order in which they appear in the HTML source code. This is not necessarily the order in which the text is laid out on the screen.

Examples:
Layout table that will not read correctly when linearized.

Used for Data Layout

Data layout tables present relational data such as a bus schedule, a comparison of regional sales figures, or a listing of employee contact information. Cells in data tables are related to each other and usually must be perceived as a group.
Provide row and column headers on data tables using the TH tag

Example:
WebAIM Tutorial: "Creating Accessible Tables."
Use the TABLE tag's SUMMARY attribute to describe the data represented for screen reader users. The summary should be fairly specific.

Example:
Using the table shown below as an example, don't say "Travel Expense Report" in the SUMMARY statement. Instead, be more specific, and say "Breakdown of travel expenses for meals, hotels, and transport to San Jose on August 25-26, 2001, and Seattle on August 27-28, 2001."

Tip:
If your summary is going to be more than about 200 characters, provide a link above or below the table called something like "Text summary of table." Then link to a page with a long summary.
For data tables that have two or more logical levels of row or column headers, use appropriate markup (HEADERS, SCOPE, ID) to identify those divisions.

Examples:
W3C HTML 4.01 Specification Recommendation "Table rendering by non-visual user agents."
WebAIM Tutorial: "Creating Accessible Tables."
Screen reader users can get lost when scrolling down through extremely long tables. If possible, break up long tables into smaller parts, or repeat column headers at intervals to reorient users.

If you use headings such as "subtotal" and "total" more than once in a table, but in different contexts, try to make each use distinctive. Otherwise, screen reader users may not know which subtotal or total you are referring to.

Example:
The table below illustrates confusing repetition of a heading: the heading "subtotals" appears in three places/contexts. Screen reader users hearing the term may not be able to figure out which subtotal the heading is referring to.

Travel Expense Report
	Meals	Hotels	Transport	subtotals
San Jose
25-Aug-01	37.74	112.00	45.00
26-Aug-01	27.28	112.00	45.00
subtotals	65.02	224.00	90.00	379.02
Seattle
27-Aug-01	92.25	109.00	36.00
28-Aug-01	35.00	109.00	36.00
subtotals	131.25	218.00	72.00	421.25
Totals	196.27	442.00	162.00	800.27

For complex, multi-dimensional data tables where you want to show relations between groups of cells anywhere in a table, use the AXIS attribute.

See:
W3C HTML 4.01 Specification Recommendation "Categorizing Cells."

Tip:
UsableNet's LIFT for Macromedia Dreamweaver has a table wizard that can help you insert attributes for complex tables.

Text

Fonts

When possible, text should use sans-serif fonts, such as Verdana and Arial. These are easier to read on a computer screen than fonts with serifs.

Example:
The font in this document is Verdana.
This sentence is in Arial font.

Colors

All information that is conveyed with color should also be available without color.
Choose colors that can be distinguished by people who are colorblind.

See:
"Effective Color Contrast: Designing for People with Partial Sight and Color Deficiencies" for help in making effective color choices.

Use:
Vischeck to see how your web page appears to users with colorblindness.
When choosing backgrounds and colors, make sure that color combinations are easy on the eyes.

See:
"Making Text Legible: Designing for People with Partial Sight" for help in making effective choices of colors and contrasts.
Don't use background images that blend in with overlaid text. It may not be noticeable to users with good eyesight, but this can make your web page hard to read for users with low vision.

Moving Text

Screen readers are unable to read moving text. Make sure that moving, blinking, scrolling, or auto-updating objects or pages can be paused or stopped.

Scanned Text

If you use a scanner to create an electronic version of hardcopy text, if possible, save the output in a text format (.txt, .rtf). If the scanning software only produces graphic-format output (.gif, .jpg, etc.), you may need to convert the images back into electronic text version.

See:
Accessible Electronic Content: Text Saved in Image Formats for assistance with making scanned text in image formats accessible at UNC-Chapel Hill.

See:
UNC-Chapel Hill Dept. of Disability Services video on scanning text in books [6 min] and creating Braille output [1.5 min].

PDF Files

Adobe PDF (Portable Data Format) files can be interpreted as graphics rather than as text by screen readers, rendering them inaccessible. Adobe Acrobat 5.0 software provides a number of new capabilities that improve the accessibility of both Adobe Acrobat software and the information contained in Adobe PDF files. Acrobat 5.0 can convert existing PDF files into tagged (accessible) Adobe PDF files.

See:
Accessible Electronic Content: Adobe PDF Files for recommendations for working with PDF files at UNC-Chapel Hill.

See also:
access.adobe.com for more details.
If you don't have access to the Adobe Acrobat 5.0 software, you can convert older PDF files into HTML or plain text formats. Using this method for some files, especially forms, may also involve some additional clean up of the formatting to achieve an attractive appearance.

See:
Adobe's "Online conversion tools for Adobe PDF Documents."
If your PDF files include text that has been scanned in image formats, you will probably need to convert the images back into an electronic text version for students with visual disabilities.

See:
Accessible Electronic Content: Text Saved in Image Formats for assistance with making scanned text in image formats accessible at UNC-Chapel Hill.

Text-Only Page

If you cannot accomplish compliance with these suggestions in any way on your web page, you must still provide users with disabilities with the equivalent information or functionality. This can be done with a text-only page.
The content of the text-only page must be updated whenever the primary page changes. By choosing to offer a text-only version of your web pages, you will have two versions of your website to maintain and update.

Tip:
Put the link to your text-only version in the upper left-hand corner of your main web page. This will make the link the first thing that a screen reader will read.

Web Links

Materials on external (outside your control) websites that are a required part of a course must be accessible, or alternative versions provided.

See:
Accessible Electronic Content: Links to External Websites for detailed solutions and recommendations for considering materials on external websites.

Because this page shows an example of a graphic without the required ALT tag description, the page does not get Section 508 approval.