Web Accessibility and Drupal

With the advent of screen readers, many web users imagined web accessibility to be complete, but there is more to using the web than simply browsing. Whether users require audio assistance in the form of subtitles or visual assistance in the form of screen readers, it is the responsibility of developers and designers to make accessibility integration a key component of their work, thus allowing all users to have the best experience possible.

In this post, we will attempt to gather accessibility information when working with Drupal. While there is a variety of content available on the web, it is important to see how Drupal specifically allows accessibility integration through its many features.

The following is an excerpt from Web AIM's Introduction to Web Accessibility page http://webaim.org/intro/ that neatly outlines some basic accessibility principles.

What is Web Accessibility?

As defined by http://www.w3.org/:

"Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. Web accessibility is an aspect of corporate social responsibility. Another important consideration for organizations is that Web accessibility is required by laws and policies in some cases."

Principles of Accessible Design

Below you will find a list of some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of your web site.

Provide appropriate alternative text

Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

Provide appropriate document structure

Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

Provide headers for data tables

Tables are used online for layouts and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.

Caption and/or provide transcripts for media

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.
Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.
In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.

Do not rely on color alone to convey meaning

The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.

Make sure content is clearly written and easy to read

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.

Design to Standards

HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

How Does Drupal Support Accessible Design?

Drupal supports web accessibility standards in a number of ways, both through contributed modules and in core. In fact, the Drupal community has made accessibility for visitors, developers, and community members an explicit priority for the Drupal platform, as discussed on Drupal.org. A contributor ensures they have adhered to accessibility standards while developing their modules by appending the D8AX tag https://groups.drupal.org/node/66323 to their project page.This survey shows the importance of such practices as well as providing insightful data from disabled users.

The author of Zen, a Drupal start theme, wrote : “Zen was also one of the first themes to make the D7 Accessibility Pledge. And we stand behind it! #D7AX/#DAX - I pledge to make this theme as accessible as it can be.”

At Zivtech, so do we.

Here we use Bear Skin, which is a starter theme based on Zen. Zen pioneered the navigation “skip link” now found in Drupal 7 core, and it now includes a full compliment of ARIA roles and Sass mixins for the element-invisible (hidden, but accessible) styling.

It is our mission at Zivtech to provide the best, most accessible web experiences to our clients and their customers. Here are ways that you too, can help ensure accessibility is at the forefront of your projects as well.

Tips and Resources

General

Site Building

  • Source Order
  • alt tags for images (possibility to tokenize these tags)
  • ARIA Tags (Check ARIA roles - view w3c page - other known as page landmarks)
  • Accessibility tools and best practices for site builders: https://drupal.org/node/394094

Theming

JS

  • onSubmit, not onClick
  • Focus instead of Hover for functions

Resources

Helpful Modules

(Some of these modules are still in development versions, but are relevant to be listed here as production ready versions are in the work)

  • A11y Titles - This module allows site builders to visually hide titles while still allowing “open access” to their web sites by making the titles accessible
  • a11y_checklist - Similar to the SEO Checklist and QA Checklist modules, this module provides a checklist of accessibility-related modules and tasks to perform on a Drupal site.
  • textsize - This module display a adjustable text size changer or a zoom function on the page for a better web accessibility.
  • accessibility - The Accessibility module is a suite of tools for content authors and theme developers to ensure their website is as accessible as possible.
  • semantic fields - Semantic Fields was created to give users the ability of customizing and enhancing the HTML output of a field. With Semantic Fields enabled, users can specify the HTML wrapper element and classes for various elements.
  • semantic views - This Views plugin makes unformatted styles, field row styles and other output more readily configurable without needing to override template files. Instead of overriding row style templates for views where you want to specify different HTML elements (tags) and class attributes, you can specify these inside the Views UI and avoid overriding templates for each view.
  • switch themes - Adds a block to allow users to switch between enabled themes (useful to provide an alternative theme with more contrast for disabled users).
  • pagestyle - This module display a style changer on the page and in the browser menu for a better web accessibility.
  • eim - Extend the image module.
             Extended functionalities
                 - Adds checkboxes for the fields of image editing forms by content type.
                        - Alt field required
                        - Title field required
                 - Sets the Alt field maxlength value to 128 for editing forms of nodes.
  • youtube player accessibility controls - This module integrate YouTube Video Player Accessible Controls library which add buttons to control YouTube videos
  • universal subtitles - This module adds support for subtitled videos by the Universal Subtitles provider

Screen readers and emulators (testing and troubleshooting)

http://warc.calpoly.edu/accessibility/compliance_process_guide.html
http://webstyleguide.com/wsg3/1-process/7-development-process.html

Share this: