You are here

How to make your Drupal website more accessible

State and government websites are required to be ADA-compliant (Americans with Disabilities Act) to ensure that individuals with disabilities can access the same information and services as non-disabled individuals. I recently implemented a couple of the features required for ADA-compliance on one of the websites I manage. In this blog post, I will share quick and easy changes you can make to your websites to make them more accessible. These features are easy to implement and can make a website infinitely easier to navigate for somebody using a screen reader or similar software/device to access your content.

Ability to skip the navigation on each page

Most of our webpages are designed to have a large menu (typically shown at the top or to the left of the content), which precedes all the actual content of the page. One some of my sites, the navigation included in each page was HUGE, as my menu was hierarchical, with many sub-pages per each main navigation page: over 70 links in all.

The problem

If a blind person tries to accessing your site with a screenreader, and cannot quickly see that the actual content for a page is the middle part, their screenreader would have to read out each of the links in the menu before they can get to the actual content. Of course, many such screenreader have controls so you can skip over each link quickly, and not have to have it be read out in its entirety, but having to click 'tab' 70 times per page is not the definition of accessible.

The solution

Include a 'skip-navigation' link in front of your menu that links to the beginning of your page's actual content, so users can get to the core of your page painlessly. Here is how I did that on my Drupal 7 site:

  1. Go into your page.tpl.php template file and paste in the following some place before the $main_menu or $page['navigation'] variables are printed out
    <div id="skip-nav">
        <a href="#main-content"><?php print t('Skip to main content'); ?></a>
    </div>
  2. Now you have to create that '#main-content' link right before your page's content appears. Look through your template file (everyone's may be different based on customizations), and create the following link somewhere before the render($page['content']); variable
    <a name="main-content"></a>
  3. That's it! This template is applied to all your pages on your site, so this provides easy access to all your page's content globally.

Adding text equivalents of images

The problem

A screen reader or Braille display cannot transform images (photographs, charts, icons, etc) into text, even when your images include text in them.

The solution

Make sure you include an 'alt' (short sentence) or 'longdesc' (longer paragraph) tag in each of your images that are truly descriptive. Don't just put alt='building' and hope that it's enough. Try to make those tags truly be the text equivalent of the image. For example, if you have an image of your company's building, you may want to include an alt tag such as

<img src="images/building.jpg" alt="Photograph of Company XYZ's main headquarters" />

Accessible tables

The problem

We use tables for a variety of reasons on our webpages. Sometimes it is for displaying data (such as the table below), and sometimes it is simply to control page layout. How is a screen reader to distinguish between the two? We want the data table to be clearly marked and be able to be converted to text in a sensible way, while the layout table to be ignored (no need to read out the layout of our page by starting with "Table. 3 columns and 6 rows").

Color values. Data table example
Color Hex code RGB value
Red #FF0000 rgb(255,0,0)
Blue #0000FF rgb(0,0,255)

The solution

To improve the accessibility of your tables

  1. For tables that contain data: 1) use the Caption tag to describe the data in your table and 20 always include a table header with scope. See the html below for an example
  2. For tables used strictly for layout: DO NOT include header rows or columns, or they will be misinterpreted by screen readers.

The table header will indicate to a screen reader that a table is indeed data table (versus a layout table) and screen readers are increasingly better in how they use the header information to describe the data in the table's cells. Here is the code for my data table above:

<table>
<caption>Color values</caption>
<tbody>
<tr> <th scope="”col”">Color</th>
        <th scope="”col”">Hex code</th>
        <th scope="”col”">RGB value</th>
</tr>
<tr> <td>Red</td>
        <td>#FF0000</td>
        <td>rgb(255,0,0)</td>
</tr>
<tr> <td>Blue</td>
        <td>#0000FF</td>
        <td>rgb(0,0,255)</td>
</tr> </tbody>
</table>

Testing your own site

You can download a completely free set of screen and browser readers from Screenreader.net. When the tools have finished downloading, open the 'WebbIE' application, paste in your own website's URL and see the generated text to check whether your website fares well for those who may be using this type of tool to access your pages!
Screenshot of the WebbIE Browser

What else can you improve?

  • Make sure your website is designed so it allows the user's browser font and font-size settings to be used
  • Include visual notification and transcripts if sounds automatically play on your site
  • Include transcripts of videos and other multimedia that is included on your site
  • Flashing, blinking and other distracting images should be avoided

Additional information

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.