Community Documentation

Accessibility and Drupal

Last updated January 10, 2012. Created by johnbarclay on March 7, 2009.
Edited by Peter Swietoslawski, EvanDonovan, mgifford, Cliff. 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:

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.

To appreciate the importance of selecting color pairs (foreground and background) carefully, consider these points:

  • According to Vischeck, roughly 1 in 20 people have some sort of color vision deficiency.
  • Only about 52 percent of the people who have tried this self test for color blindness have been able to correctly identify all six numbers.
  • You don't have to be colorblind to be adversely affected by less than optimal contrast. Faced with a failing monitor, unfavorable lighting conditions, or screen glare, even people with normal vision can find it hard to see — let alone read — text that is presented in low contrast.

If you take the self test for color blindness, you might better understand the problems a poor choice of colors can create for people who cannot see all colors well. Even if you get every answer in that test correct, you will probably have to look carefully to see at least one or two of the numbers. If so, you will be experiencing how difficult reading is when the foreground color — the color used for the text — has too little contrast against the background color — the color used for everything else.

What is sufficient color contrast?

As part of its Web Content Accessibility Guidelines (WCAG 2.0), the Worldwide Web Consortium (W3C) has established guidelines for sufficient color contrast. Briefly stated, they are:

  • For large text, such as headings:
    • A color contrast ratio of at least 3:1 normally provides enough contrast.
    • A color contrast ratio of at least 4.5:1 is necessary when you must have enhanced contrast.
  • For regular text:
    • A color contrast ratio of at least 4.5:1 normally provides enough contrast.
    • A color contrast ratio of at least 7:1 is necessary when you must have enhanced contrast.

When would I need enhanced contrast?

Use the guidelines for enhanced contrast when these or similar conditions exist:

  • A heading needs extra emphasis — for example, because the information is urgent.
  • Other text is finer or smaller than normal.
  • The information is likely to be used with poor lighting or high glare.
  • People with poor vision are a significant portion of your audience.

How can I measure color contrast?

Fortunately, there are a number of free tools you can use to check the contrast of color pairs in your Web pages. For a reasonably complete list of these tools and tips on using them most effectively, read Color and Contrast in the Themers' Guide.

To learn more about these issues, go to WCAG 2.0 Guideline 1.4 and scroll down to 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). There you can also find tips on meeting each guideline and more explanations to help you understand each guideline.

Drupal accessibility resources

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

Techniques and Best Practices for HTML, digital media, JavaScript

Standards

Tools for evaluating accessibility

Programming tools for accessibility

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

Login or register to post comments

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

nobody click here