Tools, techniques, & resources
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
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:
- Accessible Date Inputs on Forms: A fairly well described process for theming date inputs; the audience is themers and coders.
- Contributed Modules to Help with Accessibility
- 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.
-
Read Specifying colors and contrast for accessibility in the Themers' Guide to learn about tools you can use to assess and, if needed, adjust the contrast of color pairs.
-
Drupal accessibility resources
- External accessibility resources (Drupal 8 docs)
- Contributed Modules to Help with Accessibility
- Drupal Group on Accessibility
- Managing images and media for accessibility
- DrupalCon Austin - Accessible Experience Designing for Everyone
- Video and Slideshow from Drupalcon Szeged 2008
- DrupalCon SF 2010: Accessibility in Drupal 6 and Drupal 7: Write accessible modules and themes
- DrupalCon Chicago 2011: Free and Open Source Tools for Integrating Web Accessibility into the Design Process
- DrupalCon Chicago 2011: Advanced Accessibility in Drupal
- DrupalCon Chicago 2011: Intro to Accessible Site-Building in Drupal
- DrupalCon Munich 2012: Accessibility of Custom User Interface Components using WAI-ARIA
- DrupalCon Sydney 2013: Creating dynamic and accessible content in Drupal 7 using WAI-ARIA
- How to Use Drupal 7 to Meet Your Accessibility Goals (must log into Acquia site to access webinar)
External accessibility resources
- W3C Validation: Basic requirement!
- Dive Into Accessibility
- Paciello Group
- W4A - W3C Web Accessibility Conference: "Web for Anyone"
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
- Illinois Information Technology Accessibility Act (IITAA) Web Accessibility Standards
- Section 508 Information Technology Accessibility Standards
- W3C Web Content Accessibility Guidelines (WCAG) 1.0
- W3C Web Content Accessibility Guidelines (WCAG) 2.0
Tools for evaluating accessibility
- http://fae.cita.uiuc.edu/ Functional Accessibility Evaluator
- http://wave.webaim.org/ WAVE for evaluating accessibility
- Usablenet.com LIFT
Programming tools for accessibility
- ARIA: Accessible Rich Internet Applications (Making Ajax and Related Technologies Accessible)
- AxsJAX: Access-Enabling AJAX
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
- www.tiresias.org: A site with information on many assistive devices for vision impaired users
- Wikipedia screen reader capabilities
- Wikipedia list of screen readers
- JAWS
- Window-Eyes
- computer quotes
- Gnome's Orca
- Hal
- Narrator (free in Microsoft Windows)
- ZoomText from Ai Squared
- Fangs - the screen reader emulator (Firefox extension)
- NVDA (NonVisual Desktop Access): A free and open source screen reader for the Microsoft Windows
- Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers
- Web Anywhere
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion