Drupal 8 WCAG Solutions



1.1 Text Alternatives

1.1 Requirements

1.1.1 Provide text alternatives for any non‐text content. (A)

1.1 Solutions

  • core Media module

Alt tag is now required for all media in Drupal 8.

1.2: Video, Audio, and other "Time-Based Media"

1.2 Requirements

In general: your system should be able to provide...

  • 1.2.1: Written transcripts and descriptions (A)
  • 1.2.2: Written captions (A)
  • 1.2.3: "Audio Descriptions" of video content (A)
  • 1.2.4: Live Captions (AA)
  • 1.2.5: "Audio Descriptions" w/ additional contextual info (AA)

1.2 Solutions

We find that most of the requirements are addressable by a combination of:

  • core Media module
  • File Entity module
  • YouTube embedded videos
  • Audiofield module
  • 3rd party services like CaptionSync for live captioning.

Ex: Accessible Video Implementation

  1. Create a new File Entity type "Accessible Video"
  2. Add the main Video field, a text field for a complete transcript (1.2.1/3), and another text field for a summary description (1.2.1).
  3. Link to a YouTube video, which will automatically be captioned (1.2.2). Since these captions are generated by machine, they should be reviewed and customized.

AAA requirements include...

  • 1.2.6: Sign language
  • 1.2.7: Extended audio descriptions of videos. An extended audio description will pause video playback when necessary to relate what's happening in the video to users that have impaired vision. Note that a transcript combined with a regular audio description satisfies this requirement. You could also provide multiple videos to emulate breaks in videos when there is no talking.
  • 1.2.8: For videos that show how to use a product, technology, etc there should be an alternative transcript that describes what they are doing and saying.
  • 1.2.9: Similar to 1.2.4 but is intended for captioning of all live broadcasting Time-Based Media types.

1.2 Resources

1.3: Adaptable Content

1.3 Requirements

  • 1.3.1: All elements should be self describing. (A)
  • 1.3.2: Elements should be in a meaningful sequence. (A)
  • 1.3.3: Instructions for elements does not solely depend on shape, size, visual location, orientation or sound. (A)

1.3 Solutions

Drupal core satisfies 1.3.1 out the box with the exception of some forms. There is an issue with patches and it should be part of core by 8.5 / 8.6. Patch can be found here.

Drupal has a robust theme API that allows us to modify templates out of the box. For elements that do not comply, they can be easily changeable as needed.

1.4: Distinguishable Content

1.4 Requirements

  • 1.4.1: Color is not to be used as the sole means to convey information / action. (A)
  • 1.4.2: Ability to pause or stop video audios longer than 3 seconds. Or have independent audio controls. (A)
  • 1.4.3: Contrast ratios. (AA)
  • 1.4.4: Text resize up to 200%. (AA)
  • 1.4.5: Don't use Images of Texts unless the text is customizable. (AA)

1.4 Solutions

Drupal core meets these requirements out of the box except 1.4.2. For theming purposes, we recommend Bootstrap as it is WCAG Compliant except for 1.4.3. For whatever theme palette you use, I recommend using the Color Contrast tool in the resources section.

For 1.4.2 any HTML5 video source has the ability to add independent audio controls.

AAA requirements include...

1.4.6: Enhanced contrast rations. 1.4.7: Background audio is less than or equal to 20 dB. 1.4.8: Various visual presentation rules for text and resizing. 1.4.9: Images of Texts with no exceptions.

1.4 Resources

2.1: Keyboard Accessible

2.1 Requirements

  • 2.1.1: All functionality and content is operable from the keyboard. (A)
  • 2.1.2: There are no keyboard stops to prevent reaching some content. (A)

2.1 Solutions

Drupal core handles this pout of the box for the front end. There are some exception with the editing portion of Drupal. As seen in this CKEditor issue.

Check the module's issue queues for patches if it fails this. Worst case scenario you can implement a custom JQuery solution as seen in this issue comment.

AAA requirements include...

  • 2.1.3: All functionality of a site is accessible with a keyboard without requiring specific timing for keystrokes.

2.2: Enough Time to Read and Use Content

2.2 Requirements

  • 2.2.1: Adjusted timing mechanisms on content that is displayed via a time limit. (A)
  • 2.2.2: Mechanisms to stop / pause blinking, scrolling or moving text. (A)

2.2 Solutions

This does not really apply to Drupal. If you do decide to use a contrib module that has anything in 2.2.2, there should be mechanisms to stop / pause. If not, you will need to craft up a custom JQuery solution.

AAA requirements include...

  • 2.2.3: No Time Limits on an event / activity.
  • 2.2.4: Interruptions (alerts, page updates, etc.) can be postponed or suppressed by the user.
  • 2.2.5: If an authentication session expires, the user can re-authenticate and continue the activity without losing any data from the current page.

2.3: Seizures / Flashing Entities

2.3 Requirements

  • 2.3.1: No entity on the page shall flash more than 3 times / second. Unless the flash is below the general / red thresholds. (A)

2.3 Solutions

This does not really apply to Drupal. If you do decide to use a contrib module that has flashing text, media, etc. Make sure that it complies with 2.3.1

AAA requirements include...

  • 2.3.2: No entity on the page shall flash more than 3 times / second.

2.4: Navigation

2.4 Requirements

  • 2.4.1: A mechanism to bypass content that repeats and go to the main content. (A)
  • 2.4.2: Page titles. (A)
  • 2.4.3: Elements are navigated sequentially as the appear on the page. (A)
  • 2.4.4: A links purpose. (A)
  • 2.4.5: Multiple Ways to navigate the site. (AA)
  • 2.4.6: Descriptive labels. (AA)
  • 2.4.7: Focus CSS on all interactive elements. (AA)

2.4 Solutions

Drupal core handles all of these out of the box.

Some additional notes:

  • 2.4.2: You can also use the metatag module.
  • 2.4.3: If needed you can use the tabindex attribute on elements that don't comply.
  • 2.4.4: For image / icon based links use the aria-label to describe what the link is doing.
  • 2.4.5: Enable and setup Search API and install a sitemap module.
  • 2.4.7: Use bootstrap or write your own CSS (see below) as core isn't fully caught up with this yet.

CSS example for 2.4.7:

a:focus {
  background: #ffbf47;
  outline: 3px solid #ffbf47;
  outline-offset: 0;

AAA requirements include...

  • 2.4.8: Identify location within site via breadcrumbs
  • 2.4.9: Text only based links
  • 2.4.10: Sequential header tags

3.1: Readablity & Multilingual

3.1 Requirements

  • 3.1.1: Language of Page can be programmatically determined. (A)
  • 3.1.2: Alternative Language links. (AA)

3.1 Solutions

Drupal core handles 3.1.1 on install. 3.1.2 can be meet with the metatag module or the hreflang module. There is also an effort to have core handle inline language translation / selection as seen in this issue.

AAA requirements include...

  • 3.1.3: Provide definition of words used in an unusual way.
  • 3.1.4: Explaining Acronyms.
  • 3.1.5: Reading Level on all articles.
  • 3.1.6: Pronunciation of all words on request.

3.1 Resources

3.2: Predictability

3.2 Requirements

  • 3.2.1: When a component receives focus, it does not change the context of the page. (A)
  • 3.2.2: Inputs do not change the context of the page. (A)
  • 3.2.3: Consistent Navigation throughout the site. (AA)
  • 3.2.4: All components with similar functionality should be identified the same throughout the site. (AA)

3.2 Solutions

Drupal should meet this out of the box.

Some additional notes:

  • 3.2.1: You can adjust the tabindex of items. Also, remove JavaScript based focus calls.
  • 3.2.3: A few patches may be needed until they get into core: this ajax one and this views one

AAA requirements include...

  • 3.2.5: User can disable a change of context mechanism.

3.3: Input Assistance

3.3 Requirements

  • 3.3.1: Errors are identified and described in user readible text. (A)
  • 3.3.2: Proper labels on input fields. (A)
  • 3.3.3: Proper error suggestions. (AA)
  • 3.3.4: Confirmations for Legal, Financial, Data based forms. (AA)

3.3 Solutions

Drupal meets this out of the box.

Some additional notes:

  • 3.3.1: You will need the patch from this issue to get this to comply until it is in core.
  • 3.3.3: Same as 3.3.1.

AAA requirements include...

  • 3.3.5: Context‐sensitive help is available.
  • 3.3.6: Error Prevention (All Forms)

4.1: Compatibility with user agents

4.1 Requirements

  • 4.1.1: HTML must pass validation. (A)
  • 4.1.2: Drupal's elements can be determined programmatically. (A)

4.1 Solutions

It seems with 4.1.1 Drupal meets the H88: Using HTML according to spec requirement to pass. However, the G134: Validating Web pages, requirement has a long standing issue.

With 4.1.2, there is a patch available to get this to comply.

4.1 Resources

results matching ""

    No results matching ""