Nomensa Accessible Media Player

Initial configuration

Download the Library

The library can be downloaded directly from GitHub, and should be placed within you sites/all/libraries/nomensa_amp directory.

Providing Useful Alternative Text for Images

For screen reader users and SEO, it is important to put in alternative text for images that convey the meaning that the visual represents. In most cases this is fairly straight forward, but it is a very common source of web accessibility problems in Drupal sites.

There are a number of great resources on when and how to provide alt text for images:

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