Last updated March 14, 2013. Created by johnbarclay on March 7, 2009.
Edited by manish_mics, micnap, the_g_bomb, sylvain_a. Log in to edit this page.
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 mainteners have take the Drupal 7 Accessibility pledge (D7AX) are a good place to start.
- Drupal Theme Accessibility Guide
- The Eleven Most Accessible Drupal 6 Themes… evaluated with XHTML, CSS, WAVE and FAE Evaluators (off-site link).
- D-theme breaks down Drupal themes by passing: US 508, Wave, WCAG A, WCAG AA, and WCAG AAA (off-site link).
- Pick accessible contributed modules. Accessibility Issues in Contributed Modules
- 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. 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 — such as whether or not an entry is valid.
- When you select color schemes, make sure there is enough contrast between text or meaningful images and background for people with less than perfect vision to see the text and images clearly.
Consider Contrast When Pairing Colors
If you're already convinced that color contrast is important, read Color and Contrast 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
- Contributed Modules to Help with Accessibility
- Drupal Group on Accessibility
- 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)
Drupal 7 accessibility notes
There are a number of changes in Drupal 7 core which 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:
<?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'];
}
?>About web accessibility
- W3C Validation (basic requirement!)
- Dive Into Accessibility
- Paciello Group
- W4A - W3C Web Accessibility Conference - ("Web for Anyone")
Techniques and Best Practices for HTML, digital media, JavaScript
- i CITA HTML Best Practices has HTML and Javascript best practices with examples categorized by navigation, text equivalents, scripting, and style.
- Accessible Digital Media by WGBH Boston has fairly concise best practices with excellent examples categorize by images, forms, tables, digital publications, interactivity, graphs, math, and multimedia.
- iCITA ARIA Examples has examples of ARIA widgets and roles such as grids, menu bar, slider, tooltip, and tree.
- WAI-ARIA Best Practices outlines how Rich Internet Application such as drop down menus, sortable grids, live content, etc. can be more accessible through ARIA tagging.
- Research-Based Web Design and Usability Guidelines from the U.S. Department of Health and Human Services has 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 actually quite long but fairly detailed.
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
- Bobby – an automated checking program for compliance with Section 508
- Usablenet.com LIFT
Programming tools for accessibility
- ARIA Accessible Rich Internet Applications (Making Ajax and Related Technologies Accessible)
- AxsJAX - Access-Enabling AJAX
Keyboard only users
Disabling your mouse & 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 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) - is 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