|
SPH Informatics & Computing Services
Classroom Services & Room Scheduling Unit
Web Services
E-Learning & Instructional Technology
Distance Education
Related Links
|
Best Practices for Designing Accessible Websites
Adapted from Best Practices for Designing Accessible Websites (http://www.umich.edu/~webacces/Best_Practices.htm) by Mike Elledge.
In general, Adaptive Technology (AT) users should be able to use your site or software without a mouse (using the keyboard only). Including the below items will help persons with disabilities adjust your site to their needs and utilize AT shortcuts.
- Use Cascading Style Sheets (CSS) for website presentation and, when possible, positioning. For presentation, this includes font size, color, style; behavior (such as mouseover or focus); borders; padding; margins; background; etc. For positioning this includes: distance from top and sides; x, y and z axis; etc. If you use a table for page layout, make it a simple layout, without nesting.
- Use relative elements like "percentage" or "em" instead of "pixels." Common instances include font sizes, table layouts, and css-based positioning.
- Use the <alt> attribute to describe images. Images that contain information relevant to understanding the purpose or providing context to the page should have a description. Images that do not provide information or context should have <alt="">.
- Use text instead of text images. Wherever possible, avoid the use of text images. Use CSS to style text instead. Your site should still be readable and identifiable with images turned off.
- Don't require JavaScript. Your site should still be usable, and all content accessible, with JavaScript turned off.
- Use heading tags <h1, h2, etc.> to chunk page content under headings and for links to key content areas. Heading tags will not only provide context for screen reader users, but enable them to skim through a page.
- Use list tags <ul, ol and li> for lists. Again, this will provide context for screen reader users.
- Follow WCAG 1.0 guidelines for forms. For example, associate labels with input boxes (<label for> tags) and group related parts of a form using the <fieldset> and <legend> tags.
- Follow WCAG 1.0 guidelines for tables. For example, include summaries and captions for data tables, and associate column headings with data using the <scope> attribute.
- Provide a Skip to Content link. Provide skip links from the top of the page to Main Content and other key areas of your site. These do not have to be visible.
- Use meaningful text for links. AT users tab through sites, listening to links for context. Links should therefore have text that clearly identifies their purpose or destination, to make sense without the surrounding text.
- Add the <title> attribute to links and frames. Titles should provide additional information not otherwise available in link text. Frame titles can be used for navigation.
- Use color properly. Do not rely only on color to differentiate items in your site. For example, persons who are colorblind cannot distinguish between green and red, so highlighting text in red will not be helpful. Also, make sure there is sufficient contrast between background color and items in the foreground, such as buttons and text, so that people with compromised vision will clearly see them as separate.
- Caption video. Provide captioning for every video that you provide online. MAGpie (http://ncam.wgbh.org/webaccess/magpie/magpie2_download.html) is an excellent, easy to use tool for captioning WindowsMedia, RealPlayer and QuickTime files.
Official Guidelines
Section 508 Summary
The Web Accessibility Initiative
Tools
W3C html Validator. Useful for validating both pages on the web and in a local file.
W3C CSS Validtator. Likewise for CSS code.
Truwex Online 2.0: Section 508 and WCAG Accessibility, Privacy, Quality Assurance Tool. This tool checks against both Section 508 and WAI standards.
Color Contrast Analyzer. Tool for checking the contrast between foreground and background colors.
|
|