 |
Accessibility Guidelines
Jump to the information you need
Text Fonts and Colors
- Choose easy-to-read fonts. Sans-serif fonts, such as Verdana and Arial, should be used for page text; they are easier to read on a computer screen.
- All information that is conveyed with color should also be available without color.
- Choose colors that can be distinguished by colorblind users. Use Vischeck to see how pages appear to colorblind users.
- When choosing backgrounds and colors, make sure that color combinations are easy on the eyes.
- Don't use background images that blend in with overlaid text because this makes a Web page harder to read for users with low vision.
Back to the top
Graphics and Multimedia
- Use an ALT tag to provide a text description of all non-text items. Non-text items cannot be read by screen readers.
- Provide equivalent alternatives for any multimedia presentation and synchronize these alternatives with the presentation, such as a text transcript with audio materials and closed-captioning for video materials.
- 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. 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).
Back to the top
Image Maps
- Image maps fall into two categories: server-side image maps and client-side image maps.
- Navigating image maps can present problems. Provide textual alternatives.
- Use client-side image maps instead of server-side image maps. A "client-side" image map's functions are provided by the user's browser rather than the web server. All the information to run the map's functionality is included in Web page code. Text-only browsers, screen readers and other assistive devices may not be capable of interpreting links in server-side image maps.
- Server-side image maps do not allow ALT tags to describe individual links in the image map. If a server-side image map is used, 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.
Back to the top
Tables
- If a table is used for layout of a Web page, the table should make sense when linearized. This means that table cells can be read by a screen reader in the order they appear in the HTML source code. This is not necessarily the order in which the text is laid out on the screen.
- Provide row and column headers on data tables using the TH tag
- For data tables that have two or more logical levels of row or column headers, use appropriate markup to identify those divisions.
Back to the top
Frames
- To facilitate frame identification and navigation and to minimize confusion for screen reader users, title each frame using the HTML "title" attribute.
- Use the NOFRAMES tag to define frame content for browsers that can't display frames.
Back to the top
Style Sheets
- Style sheets control appearance of web pages. Screen readers ignore style sheets when reading the content. Always check pages with styles turned off to see if the page still makes sense.
Back to the top
Scripts, Applets, PDF Files
- Provide alternative content for users with browsers that don't support scripts. Put the content within a noscript tag.
- If your Web page requires the user to have an applet, plug-in or other application, provide a link to the download site.
- Adobe PDF (Portable Data Format) files can be interpreted as graphics rather than as text by screen readers, rendering them inaccessible. If you must include a PDF file, make an HTML version of the file and include links to both versions.
- 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.
Back to the top
Interactivity
- Electronic forms completed online should allow people using assistive technology 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.
- 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.
Back to the top
Navigation
- Pages should include a "skip to main content" link at the top of the page so that visitors using a screen reader can avoid repeated navigation links, menus and banners that appear on each page of a site.
- To make this link invisible to sighted users, use a tiny image 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.
Back to the top
Text-Only Page
- If compliance with these guidelines is difficult, provide users with the equivalent information or functionality using a text-only page.
- Update the content of this page whenever the primary page changes.
- Put the link to your text-only version in the upper left-hand corner of the main Web page. This will make the link the first thing that a screen reader will read.
Back to the top
|
|
|
 |