Accessibility

The Drupal community has adopted an Accessibility Statement that sets goals for both the software we produce as well as websites managed by the Drupal Association. Although there are a lot of standards, the most widely adopted internationally is the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 AA.

Drupal 8 Accessibility Features

Aural Alerts

Drupal.announce() is now part of D8 Core with core/misc/announce.js so that users can confidently provide timely messages to aural users. In JavaScript we can now provide instructions to screen reader users to be read out either as assertive or polite:
Drupal.announce('Hello world.');

Accessibility tools for JavaScript in Drupal 8

These tools are under active development in Drupal 8. This documentation page may be out of date

Announce page updates aurally

Many page updates are expressed visually through color changes and animations. In order to make page updates apparent in a non-visual way, Drupal provides the Drupal.announce JavaScript method. This method creates an aria-live element on the page. Text appended to this node is read by a screen-reading user agent.

Drupal.announce accepts a string to be read by an audio UA. You can also set a second parameter: the priority. Here are a couple examples:

Drupal.announce('Entering edit mode');
Drupal.announce('Please fill in your user name', 'assertive');
Drupal.announce('You look beautiful today.');

The two accepted priority values are polite and assertive. polite is the default.

Contributor task: Manually do accessibility testing of a patch for a Drupal issue

On this page:

To get help completing this task, see the Getting help completing your task page. The #drupal-accessibility irc channel might have people in it to chat with about coding and accessibility issues and extensions in Drupal.

Goal

From an accessibility point of view, manually test a patch (software fix) for a reported Drupal issue to verify that it resolves the issue and does not cause other regressions (new bugs). The Accessibility section of the core gates documentation page has more information.

Skills needed

Some familiarity with the module, theme, or task is helpful, but not required. You will also need to apply a patch to a test site.

Creating accessible structure and markup

This page provides information on accessibility issues with structure, markup, data tables and page navigation

Structure and markup

  • Use appropriate markup. Lists are lists, headings are headings, and quotations deserve appropriate markup, too. Paying careful attention to web standards automatically increases the accessibility of any page we create.
  • Avoid using structural markup for presentation. The H1-H6 elements are for providing structure not altering text size, and blockquote elements are for distinguishing quotations, not indenting text.
  • Avoid using unconventional markup. At best, unconventional markup can be confusing for users, at worst, it can make pages difficult or impossible to use. For example, don’t use form elements instead of lists for navigation, and don’t use links instead of buttons for form submission.
  • Use the title element effectively. Putting the information in the form you’d use for a reverse breadcrumb trail (e.g., [page] - [section] - [site name]) places unique information first and means less repetitive reading for users.

Building accessible forms

The following tips will improve the accessibility of your forms:

  • Place important information/instructions at the top of the form. Providing instructions first reduces user error and provides a better user experience.
  • Always indicate required fields. In addition, inform users at the beginning of the form how required fields will be indicated. The convention is to use a red asterisk, but this can also be provided by a small icon accompanied by alt text that says “required”.
  • Ensure all form fields have a label and explicitly associate it using the for attribute. Explicit association allows screen readers to announce the correct label, and moves the focus to the associated element when the label text is clicked. If there is absolutely no room for a visible label, the label may be moved offscreen using {position: absolute; top: -999em} in CSS, or the title attribute used instead.
  • Place labels close to their associated element. Too much white space between label and element can mean that screen magnification users cannot see the label along with the field, which may lead to increased errors when completing the form.

Pages

Subscribe with RSS Subscribe to RSS - accessibility