Please note that this was the Drupal 7 best practice. For current best practices see the Accessibility Handbook.
First, consider reading the Drupal Accessibility Statement.
Next, here are some things you can do to make your Drupal site more accessible:
- Start with the Accessibility Checklist.
- Select good themes or develop your own.
- Starting with a good theme is the fastest way to an accessible Drupal site. Themes for which maintainers have taken the Drupal 7 Accessibility pledge (D7AX) are a good place to start:
- Identify accessibility issues, communicate them, submit patches, test patches, and/or lobby for patches.
- Train authors and provide them with good authoring tools.
- Validate and test content.
- Apply fixes others have developed:
- Make sure that a difference in color is not the only way you convey meaningful information (like whether input is valid).
- When you select color schemes, make sure there is enough contrast between text or meaningful images and background so everyone can see the text and images clearly.
Drupal accessibility resources
External accessibility resources
Accessibility in Drupal 7
There are a number of changes in Drupal 7 core that will greatly assist with accessibility.
Drupal 7 will see improvement in the Forms API (FAPI) but will also come with a standardized way to make descriptive text visible to screen readers and invisible to sighted people.
To implement this in your templates, you can just wrap elements with the CSS class="element-invisible".
To implement within a module, you can use this code snippet:
<?php l(t('Read more...<span class="element-invisible"> about %title</span>', array('%title' => $node->title)), 'node/' . $node->nid, array('html' => TRUE)); ?>
An alternative implementation is as follows:
<?php $link['title'] = '<span class="icon"></span>' . $item['link']['title']; $link['attributes'] = array('id' => 'toolbar-link-' . $id, 'class' => array('to-overlay')); if (!empty($item['link']['description'])) { $link['title'] .='<span class="element-invisible">' . $item['link']['description'] . '</span>'; $link['attributes']['title'] = $item['link']['description']; } ?>
Accessibility in HTML, digital media, & JavaScript
- i CITA HTML Best Practices offers HTML and Javascript best practices with examples categorized by navigation, text equivalents, scripting, and style.
- Accessible Digital Media by WGBH Boston offers fairly concise best practices with excellent examples categorized by images, forms, tables, digital publications, interactivity, graphs, math, and multimedia.
- iCITA ARIA Examples provides examples of ARIA widgets and roles such as grids, menu bar, slider, tooltip, and trees.
- WAI-ARIA Best Practices outlines how Rich Internet Applications (such as drop down menus, sortable grids, live content, etc.) can be made more accessible through ARIA tagging.
- Research-Based Web Design and Usability Guidelines from the U.S. Department of Health and Human Services includes long and detailed best practices categorized by page layout, navigation, scrolling and paging, headings, titles, and labels, links, text appearance, lists, widgets, graphics and multimedia, writing, content organization, and more.
- Quick Reference on WCAG 2.0 Requirements is long but fairly detailed.
Accessibility standards
Tools for evaluating accessibility
Programming tools for accessibility
Keyboard-only navigation
Disabling your mouse and navigating a site with your keyboard can be a very humbling experience. Generally, this isn't enabled by default, but, in advanced preferences, you can enable keyboard-only navigation. There are articles on how to do this on Macintosh and specific instructions for Chrome, Firefox, Opera and IE8. A table of other keyboard shortcuts is available from WikiPedia
Screen readers