Creating Accessible Web Sites

TLT Menu: TLT Home : TLT Suggestions

Site Menu: Home Page | External Links | Site Map

Quick Accessibility Checklist

This Quick Accessibility Checklist is meant to help faculty and staff who want to develop or modify Web-based course material, lectures, and assignments in an accessible way. In order to use this checklist effectively, you will need to have some knowledge of HTML. If you are not familiar with HTML, consider registering for a I.T.S. seminar or enrolling in a Web class in Web Based Training.

HTML Elements

Basic HTML tips - Use appropriate H tags to structure your content into sections and be as concise as possible. Be aware of how screen readers pronounce acronyms and abbreviations as single words.
View Details: HTML Structure | View Details: Abbreviations
If you want to incorporate color, be sure that none of the content relies on color coding alone. Color coding should be supplemented by text or differences in lightness or shape. Contrasts of bright colors and strongly textured backgrounds should also be avoided to facilitate legibility.
Note: Contrasts of red/green or red/black are the most likely to be confused.
View Details: Color
If you wish to specify a font, consider fonts designed for a computer monitor such as Arial and Verdana and always use relative sizes. Italics text should be used minimally, and blinking text should be avoided.
View Details: Fonts
If your page has a block of navigational links on each page, include a "Skip Navigation" strategy accessible to screen readers.
View Details: Skip Navigation
If your page has links, then make sure the text of the link describes the location of the new page. Avoid generic "Click Here" links.
View Details: Links
If you use lists, use ordered lists so that items are numbered, or include the item number within your text.
View Details: Lists
If you use tables, be sure to include header tags for data tables and that any table makes sense when read left to right, top to bottom. This is how a screen reader will read them by default.
View Details: Data Tables | View Details: Layout Tables
If you use frames, clearly title each frame, file name and use the TITLE attribute to facilitate navigation and frame identification. Provide basic navigation for each page in case user enters Frames Free mode.
View Details: Frames
If you use forms, clearly associate form labels with each elements by placing them to the left of the element. Use of LABEL and FIELDSET tags can facilitate accessibility.
View Details: Forms
If you need to include equations or formulas, make sure each one is labeled and that any equation or formula necessary for content includes a link to an extended text description which reads out the formula in words.
View Details: Equations and Formulas
If you use multiple languages, make sure to specify the LANG tag and use appropriate HTML entities for special characters and punctuation. For languages with low numbers of speakers, an audio transcript may be needed for full accessibility.
View Details: Languages
Verify your page's accessibility using tools like IBM Home Page Reader and Bobby. Review the site with images, javascript and sounds turned off. When all else fails, provide a link to a text-based alternative page.
View Details: Testing

Multimedia Elements

If you use images, use the ALT tag to provide a clear text alternative. Descriptive ALT text should provide equivalent information as the graphic. For complex images, an extended text description may be needed. If you want a tooltip for an icon, use the TITLE attribute, not the ALT attribute.
View Details: Images
If you use charts or graphs, provide a text alternative that summarizes the content of each chart or graph, and make sure color coding is not the only key used in the chart, but is supplemented with labels or differences in line shape.
View Details: Charts
If you use mathematical or scientific notation, be sure a screen reader can access the content either through an ALT tag on an image, an extended text description or some other mechanism.
View Details: Math
If you use motion or animation, make sure that it's necessary and that the flicker rate is lower than 2 Hz. and greater than 55 Hz; animations within these frequencies may trigger epileptic seizures. If the animation is needed, be sure to provide an alternate text description that clearly communicates the action and its purpose on a separate page.
View Details: Animation
If you use audio or video files, provide captioning or a description/transcript in text form. If a transcript is used, then text can be can be on the same page, or accessed via a hyperlink to a separate page can be placed near the clip.
View Details: Video and Audio
If you want to upload a PowerPoint file, then make sure all graphics are labeled and includes appropriate extended descriptions are included. All audio should be captioned or have a transcript. PowerPoint files converted to HTML should include ALT tags as needed.
View Details: PowerPoint and Word
If you want to use material from a Word file, then either upload it as is, recreate the HTML file or convert it to a PDF file. Avoid the Save as Web file option in Word as it creates inaccessible files.
View Details: PowerPoint and Word

Other Web Tools

If you use on-line chat and discussion or e-mail, remember to describe any ASCII art, attachments or audio/visual files referenced.
View Details: Chat
If you use ANGEL or other course tools, make sure all uploaded images are described, all uploaded material is accessible and that all quizzes and forms are accessible.
View Details: ANGEL
If you use PDF files, make sure the PDF is restricted to appropriate uses and that files include labels or tags identifying embedded images and that text content is stored as text, not as a large image. Links to PDF files should include some sort of indication on the page that the link is different; this will reduce user confusion. When in doubt, create a text-only or HTML version of the content. Section 508 also requires that a Web site provide a link to the Adobe Acrobat Reader download page.
View Details: PDF Files
If you use ASCII art in e-mail signature, then make sure it is placed below all the essential contact information so users of screen readers can stop reading the content.
View Details: Chat and E-Mail

Advanced Scripting

If your page includes image rollovers, then make sure the alt tag includes the most relevant information. For rollovers showing complex concepts, a link to a text description should be included. If you use image rollovers to change text formats, consider switching to CSS style sheet rollovers since they are often more accessible.
View Details: Rollovers
If your page includes automatic datestamping, you may want to consider one of several non-Javascript options available in which a date is inserted by a server or Web editor. Otherwise a date would need to be automatically updated in order to be accessible.
View Details: Date Stamping
If your page includes dropdown or floating menus, then make sure a text-based menu is included. Floating menus are difficult for screen readers, users with mobility impairments, and users with some types of cognitive impairments to use.
View Details: Dropdown and Floating Menus
If your page includes redirects or timed actions (such as clicking OK to continue being logged in), then be sure to provide adequate response time for users of screen readers or users with mobility impairments. In some cases, a redirect should be replaced with a static page containing a link.
View Details: Redirects and Other Timed Responses
If your page includes popup windows, make sure a link to the content is available even if Javascript is disabled. Windows should permit scrolling and resizing for low vision users.
View Details: Popup Windows
If you use dynamic pages, make sure all HTML chunks include accessibility tags and that ALT tags or frame TITLE tags are meaningful and not numeric database entries.
View Details: Dynamic Pages
If you use scripts or applets, then make sure a NOSCRIPT alternative is available.
View Details: Scripts

Top of Page