Docs

Accessibility Guidelines

Tips for making your web site more accessible.

Sources: WAI Checklist of Checkpoints for Web Content Accessibility Guidelines & 13 rules for accessible Web pages.

Page Design

• Be consistent with the page layout throughout the web site this allows for easier and faster navigation
• Use code to provide accessibility or provide text only version of each page of the web site
• If page contains an image map, provide a text version with links and descriptions as some tools designed for people with disabilities to browse web sites cannot read image maps
• Don't use frames or provide a method to view without frames
• Provide an option to skip repetitive links.
• Make the site script independent because certain specialized accessibility tools cannot use client side scripting
• Don't use deprecated elements (i.e.: bold, italic, center), use of style sheets is preferred
• Make sure page style sheet independent. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document
• Provide metadata to add semantic information to pages and sites
• Create a logical tab order through links, form controls, and objects to allow for faster and easier navigation

Tables

• Only the last cell should be allowed to wrap
• Use "longdesc" tag for explaining the content of tables
• Place a break before each ending table data cell
• Put row and column headers in data tables.
• Associate all data cells with header cells so that screen readers will read the content of cell with the header of that cell
• Do not use tables for layout unless the table makes sense when linearized, because screen readers and other tools read tables linearly. Otherwise, if the table does not make sense, provide an alternative equivalent

Links

• Use "title" tag to explain where each link takes the user
• Use "title" tag to explain each link for e-mails
• Try to incorporate graphical links with text descriptions for some links (i.e.: next, previous, etc.)

Images

• Use "alt" tag for all images
• Use "longdesc" tag for further explanations, if needed
• Provide a text version of images for lengthy descriptions (i.e.: image map, org. chart gif, etc.)
• Don't use flashing, flickering or blinking images
• Use High Contrast Images so that these images can be easily seen by people with visual disabilities including color blindness.
• For rules, a good option for the "alt" tag: ALT="- - -"
• For bullets, a good option for the "alt" tag: ALT="*"

Color

• Use contrasting colors so that these colors can be easily seen by people with visual disabilities including color blindness
• Browser safe colors are best
• Ensure that all information conveyed with color is also available without color, for example from context or markup
• Use Hex code for colors and not names

Text

• Don't use phrases such as "click here"
• Don't refer to items in color, (i.e.: "refer to the pink bulleted items")
• Expand abbreviations and acronyms for the first occurrence on each page
• Don't use moving text
• Contrast text colors with background colors
• Don't use H1, H2, H3, etc. for font effects, instead Use header elements to convey document structure and use them according to specification

Forms

• Provide an e-mail address or link as an alternative to completing on-line forms
• Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned

Audio and Video Clips

• Provide text descriptions of each that Braille or Screen Reader software can translate
• For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.

Other

• Identify language and Identify any changes in language
• Divide large blocks of information into more manageable groups where natural and appropriate
• Provide a means to skip over multi-line ASCII art
• Avoid use of ASCII Art as screen readers will read "| fsu |" as "vertical line fsu vertical line"
• Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video