Web sites and Web-based Applications
Toolkit Table of Contents
Here are some tools to help with planning and checking for 508 compliance on Web sites and web based applications. Please remember that every project is different and some projects must address multiple types of EIT and 508 standards. It is important to note that the checking the items on the checklist does not mean that your project is officially 508 compliant. This information serves as guidance to achieve 508 compliance but is by no means a prescription. These tools list common issues and things to look for during the life cycle development of a Web site.
Use this outline to help guide you throughout the rest of the life cycle of your Web site or web-based application. This outline is designed to help guide the overall iterative life cycle of the project. Using the outline will help guide you determine what steps, actions, etc may be appropriate to ensure 508 compliance for your Web site or web-based application. Use this outline in conjunction with the Web sites and Web-based Applications Checklist.
Plan: Establish the objectives and processes necessary to deliver results in accordance with EPA's Section 508 requirements and policies.
- Identify EIT components for this Web site or web-based application.
- Determine if there are any exceptions.
- Determine which 508 standards and requirements apply. 508 standards apply to Internet and Intranet sites.
508 Standards that always apply:
1194.31 Functional Performance Criteria.
1194.41 Information, Documentation, and Support.
Determine what 508 Standards may apply:
1194.21 Software applications and operating systems.
1194.22 Web-based intranet and internet information and applications.
1194.24 Video and multimedia products.
- Outline framework of project and identify 508 milestones, standards and requirements for project stakeholders (ex. set 508 testing milestones).
- Make room in project budget for 508 considerations (e.g., development of captions for audio/visual multimedia on the Web site)
- Refer to appropriate toolkit checklists (each EIT type) throughout the life cycle for 508 issues to address during project development.
Do: Implement the work needed to complete the project.
- If applicable, create solicitation bid. Include general Section 508 contract language and 508 standards for the EIT types identified during the planning phase.
- Develop detailed technical requirements for your Statement of Work (SOW) or technical direction (TD), project plan, or other applicable documentation that that addresses Section 508. Include 508 standards for the EIT types identified during the planning phase (above). Refer to the checklists in the toolkit for TD suggestions.
- If there is multimedia, determine if it requires captions or a transcript.
- Captions and transcripts provide the content as well as acoustic information such as descriptions of background sounds, and other important audio cues and context. Ex. Rumbling thunder, roaring water, fire crackling, no audio, or the use of the musical symbols to indicate music.
- Captions are used when multi-media contains visual and acoustical information.
- Transcripts can be used when only acoustical information is provided, e.g., a MP3 or radio broadcast. Transcripts are also used to create captions, but it is not appropriate to just give a transcript on a Web site or as a document or package with the multimedia.
- If you need captions for multimedia, decide if you want to use open or closed captions.
- Closed captions means that the user can turn on the captions on their TV, VCR, DVD, Web site or computer.
- Open captions means that the captions are automatically enabled and everyone can benefit immediately without having to turn the captions on.
- Develop and approve the content used in alt text for images. Approving alt text is an inherent government function and needs to be approved by EPA staff.
- Determine if you will be using forms, tables and other potentially complicated elements. Some of this information may not be capable of being fully accessible. In such cases, plan to provide alternative formats on the Web site. Ex. You have a complex map and table on the Web site with data. Provide the source file that has the data for accessibility.
- Refer to appropriate toolkit checklists (each EIT type) throughout the life cycle for potential action items. Not all items on the checklist will apply to the project.
- Follow additional EPA requirements for Web sites. This toolkit covers 508 only.
Check: Monitor and measure processes, products and services against policies, objectives and requirements for Section 508 compliance throughout development.
- Ask questions about 508 compliance.
- During development ask "How are you/we making the project 508 compliant?"
- At key project milestones ask "what was done to make this 508 compliant?"
- Periodically test for 508 compliance.
- Use checklists to monitor and measure process.
- Watch for complex components or issues during development that might require the consideration of Fundamental Alteration exception.
- Test all the executable buttons, features, etc. as changes are made to the site!
Act: Take action to continually improve process performance.
- Routinely use checklist to make sure that 508 standards are being addressed during development.
- Fix any problems before acceptance, delivery, or completion.
- Keep in contact with project/service stakeholders via e-mail, phone, etc. to make sure they have what they need such as the transcript to make captions, the alt text language for graphics, training, etc.
- Ask for clarification from stakeholders when needed.
- Document information about how 508 standards have been met.
- Manage, close out and archive project and 508 documentation. Others may be able to use this "historical" information when developing similar projects.
Additional Notes or Resources: Additional background information such as definitions, training, US Access Board guidance, and other tips.
- All additional EPA policies, procedures, standards, and guidance for Internet sites are found at www.epa.gov/webguide/standards.
- The Office of Public Affairs offers training on "Section 508, Accessibility and Web Design". Some 508 standards are taken care of automatically by using the EPA template. The template is required for most EPA pages. This training is free, open to staff and contractors, and offered throughout the year. The training schedule and presentation is also available on the www.epa.gov/webtraining
- Guide to the Section 508 Standards (Access Board):
This checklist identifies some of the most commonly occurring 508 accessibility issues for Web site and Web-based applications. Every web page is different – you may not need to address each item in the checklist. It may help to use the Life Cycle Project Plan Outline to help you determine which checklist items may apply. This checklist can be used several ways throughout the life-cycle of your project:
- to help plan during project planning;
- to test for 508 compliance;
- and to communicate with project stakeholders about the 508 compliance.
- Can you use the keyboard instead of the mouse? Use the keyboard exclusively to navigate through web pages & applications (particularly the tab and enter keys). Are all areas of the screen accessible? Are there keystrokes available for all mouse actions? Are there a minimum number of keystrokes to get to desired areas? Can you execute an action using the enter key without using a mouse?
- Does the cursor move in a logical order or flow? Use the tab key to check where the cursor moves from one element to the next. The cursor should follow a logical order and not be random, e.g., the cursor should move top to bottom, left to right, or flow according to content.
- Do the elements do what they are supposed to do? Use the return key after selecting a link or control element (e.g., radio buttons, boxes) to check for the appropriate action. For example, if you select a link, using the return key the link is opened; selecting a folder, opens the folder, etc.
- Is there ALT text for all non-text elements? Check non-text elements (images, buttons, etc.) for appropriate alt (alternative) text. Alt text is needed when the image provides context or information or links to other areas. Alt text does not need to be provided for images that are for pure decoration, but does require the proper html code (ALT=""). Using this html code (ALT="") will tell the software not to read the graphic and will help the screen reader user. If you are familiar with code, you can look at the html code to check for alt text. If you are not a coder, place the mouse over the graphic or element and check for a box that appears with the text, similar to caption boxes.
- Does the link text explain what the link "does"? Make sure that links make sense out of context. Avoid the use of "click here" and other vague instructions for links. Ex. Instead of "Click here" for a report use "Read the Report". People who use screen readers typically listen to all the links first to make sure they want to use the page. "Click Here" provides no context.
- Are there captions for audio and visual elements or transcripts for audio only elements? If there is audio/visual multimedia, look for an indication that there are captions (symbol "CC", word "captions" or "text", etc.). How does the user know that there are captions? Do the captions work? Can you turn them on? Are the captions synchronized with the audio/visual elements? If it is audio only (ex. a radio broadcast or a podcast), look for a transcript (words such as "text", "transcript", "transcription", "script").
- Is color the only means of identification of elements on a page? When colors are the only way to identify elements or controls on the screen, persons who are color blind, blind, or have low vision may find the web page unusable. Ex. a web page that directs a user to "press the red button to stop" should also identify the red button in another way than simply by color. To test for color: view the page on a black and white monitor, or print the page out on a black and white printer. Both methods will show if the removal of color affects the usability of the page.
- Are documents organized so they are readable without requiring an associated style sheet? Since a style sheet is not required to create basic Web pages, you can just avoid style sheets entirely. But in cases where a style sheet is used, the Web page must be organized so that the information can still be accessed even for browsers that cannot use style sheets. When web developers set up their pages to override user-defined style sheets, people with disabilities may not be able to use those pages. It is critical that designers ensure that their web pages do not interfere with user-defined style sheets. You can avoid using style sheets altogether or you can use "external" style sheets, in which the style rules are set up in a separate file.
- Are there server-side image map or client-side image maps? An "image map" is a picture (often an actual map) on a web page that provides different "links" to other web pages, depending on where a user clicks on the image. There are two basic types of image maps: "client-side image maps" and "server-side image maps." With client-side image maps, each "active region" in a picture can be assigned its own "link" (called a URL or "Uniform Resource Locator") that specifies what web page to retrieve when a portion of the picture is selected. If the web page uses a server-side image map to present the user with a selection of options, then a redundant text link is necessary to provide access to the page for anyone not able to see or accurately click on the map. FYI, at EPA you must use the standard US and regional maps and associated code for displaying information and to link to local information when applicable. The standard maps have the accessibility requirements taken care of for you. The EPA standard for maps of the US is available at http://yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/maps2. If you create other maps, you will need to address this 508 standard.
- Are tables coded properly? Tables are permitted, but 508 requires that tables be coded according to the rules of the markup language being used for creating tables. Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing the web. Users of screen readers can easily get "lost" inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names. The 508 standards apply to tables that have two or more logical levels of row or column headers. For more assistance, refer to US Access Board's guidance for tables.
- Does your Web site have frames? Frames are not allowed at EPA. Do not use them. For more information, refer to the EPA Standard on Frames
- Does the screen flicker with a frequency greater than 2 Hz and lower than 55 Hz? Some individuals with photosensitive epilepsy can have a seizure triggered by displays, presentations, backgrounds, and images that flicker, flash, blink, or rapidly change from light to dark within the range above. Do not use visuals that produce any vivid light-dark differences that change or flash between these rates. If your Web site is generally the same color or brightness without lots of rapid changes, then screen flickering is probably not a concern.
- Are there text-only pages for information that cannot be made compliant in any other way? A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the 508 standards, when compliance cannot be accomplished in any other way. Caution: the content of the text-only page needs to be updated whenever the primary page changes. Ex. a graphic of an org chart, plus a text-only version of the same information.
- Is the script language in a readable fashion for assistive technology users? Web page developers need to provide script information in a fashion that can be read by assistive technology. When web developers do not put functional text with a script, a screen reader will often read the content of the script itself in a meaningless jumble of numbers and letters. Although this jumble is text, it cannot be interpreted or used. For more assistance, refer to US Access Board's guidance for scripts.
- Is there a link for software downloads (Applets and Plug-ins)? Any page with information that requires extra software to be used such as Adobe, Word, Flash, etc. must also post a link to a free download of the software. FYI: in addition to 508 requirements, there are EPA web requirements for linking to PDFs - EPA PDF Links standard.
- Are there electronic forms? For forms designed to be completed on-line, can people using assistive technology access the information, the form elements, and functionality so they can complete and submit the form? For more assistance, refer to US Access Board's guidance for electronic forms.
- Is there a way for the user to skip navigation functions/sidebar and go straight to the content? Check skip navigation links to see if the next tab really bypasses the links and goes to the desired content. (*EPA Internet web pages using the EPA template already have this feature enabled. Internet pages that are not in the EPA template and Intranet pages need to address these standards)
- If a timed-response is used, is the user prompted to request more time? Web pages, particularly data-entry pages, can be designed so that the page disappears or "expires" if a response is not received within a specified amount of time. If a timed-response is used, how does the user know that time is running out? How does a user indicate that more time is needed when they are prompted that time is starting to run out? This is not a common feature on EPA web pages
Additional assistance on these standards is provided by the US Access Board, the agency responsible for the Section 508 Standards with their Guide to the Section 508 Standards for Web sites and Web-based Applications.