The Drupal accessibility initiative started with some advancements in Drupal 7 to ensure that Drupal core followed the World Wide Web Consortium (W3C) guidelines: WCAG 2.0 (Web Content Accessibility Guidelines) and ATAG 2.0 (Authoring Tool Accessibility Guidelines).
Many elements introduced in Drupal 7 were improved and bugs discovered through intensive testing were addressed and integrated to Drupal 8 core as well. Let’s take a tour of the accessibility in Drupal 8 !
Drupal’s accessibility maintainers improved contrasts in core themes so people that suffer from colorblindness are able to visit websites clearly. It is also good when visiting the website under bright sunlight, on mobile for instance.
The alternative text for images is really useful for blind people who use screen readers. They can understand the meaning of an image through short descriptive phrases. This alternative text is now by default a required field in Drupal 8.
Many accessibility improvements are hard to see as it involves semantics. Drupal 8 uses HTML5 elements in its templates which add more meaning into the code. For instance, assistive technology such as screen readers can now interpret elements like
Moreover, WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) additional markup really improved semantics using:
Drupal 8 accessibility involves many improvements regarding forms in Drupal 8.
In Drupal 7, all errors were displayed by default on top of the form and fields were highlighted in red. It was not right for colorblind people to understand where the errors were.
In Drupal 8, there is an experimental option to enable form inline errors and an error icon is displayed next to the field. Nevertheless, note that this feature is not enabled by default as there are still some pending issues.
Regarding the form API, radios and checkboxes are now embedded in fieldsets to meet WCAG compliance. Indeed, grouping related elements will help screen readers to navigate in complex forms. Plus, all fields have a label associated with the right element using the “
Here is an example of HTML code for radio buttons:
<fieldset id="edit-active--wrapper" class="fieldgroup form-composite js-form-item form-item js-form-wrapper form-wrapper" data-drupal-selector="edit-active"><legend><span class="fieldset-legend">Poll status</span></legend>
<div id="edit-active" class="form-radios">
<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-active form-item-active"><input id="edit-active-0" class="form-radio" name="active" type="radio" value="0" data-drupal-selector="edit-active-0" /> <label class="option" for="edit-active-0">Closed</label></div>
<div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-active form-item-active"><input id="edit-active-1" class="form-radio" name="active" type="radio" value="1" data-drupal-selector="edit-active-1" /> <label class="option" for="edit-active-1">Active</label></div>
As Views UI module is in core now, it became accessible.
The views tables markup is more semantic. Data cells are associated with header cells through “
id” and “
headers” attributes. It is also possible to add a
<caption> element to explain the purpose of the table and a
<summary> element to give an overview on how the data is organized and how to navigate the table.
Plus, the “
scope” attribute enables to explicitly mark row and column headings.
Here is an example of a table HTML code generated by a view:
<table class="views-table views-view-table cols-2"><caption>Caption for the table <details> <summary>Details for the table</summary>Description for details
<th id="view-title-table-column" class="views-field views-field-title" scope="col">Title</th>
<td class="views-field views-field-title" headers="view-title-table-column">Premo Quae Vero</td>
<td class="views-field views-field-title" headers="view-title-table-column">Capto Dolor</td>
"display:none;" CSS styling can be problematic as it will hide elements for both visual and non-visual users and consequently, screen readers will not be able to read them.
Drupal 8 accessibility maintainers decided to standardize in the naming convention of HTML5 Boilerplate using different classes to hide elements:
hidden“: hide an element visually and from screen readers;
visually-hidden“: hide an element only visually but available for screen readers;
invisible“: hide an element visually and from screen readers without affecting the layout.
Users with visual impairment will not be able to see all visual updates of the page such as color changes, animations or texts appended to the content. In order to make these changes apparent in a non-visual way, Drupal provides the
aria-live” element on the page. This way, text appended to the node can then be read by a screen reading user agent.
Here is an example of a code using the aural alert:
Drupal.announce('Please fill in your user name', 'assertive');
The first parameter is a string for the statement, the second is the priority:
polite“: this is the default, polite statements will not interrupt the user agent;
assertive“: assertive statements will interrupt any current speech.
Drupal community helped improving CKEditor accessibility.
First of all, the WYSIWYG editor now comes with keyboard shortcuts which are beneficial for both power users and keyboard-only users.
Drupal 8 implements more semantic elements. For instance, the user can create HTML tables with headers, caption and summary elements.
<figcaption> HTML5 tags are also available to add captions to images.
Moreover, every image added through CKEditor are required by default, as it is on image fields.
CKEditor module also introduces a language toolbar button so that users can select a part of text and specify the language used. Screen readers will be able then to choose the appropriate language for each content.
Finally, there is an accessibility checker plugin for CKEditor. It is not in core yet as a CKEditor issue blocks its integration, you can find more information on the related Drupal issue queue. However, you will find a module that implements it currently: ckeditor_a11checker.
All these options will definitely help users to generate accessible contents.
Drupal core maintainers accomplished great enhancements regarding accessibility in Drupal 8. These accessibility features will definitively be beneficial to keyboard-only users, low-vision users and colorblind people but will also be good for the usability and the SEO of your website.
Nevertheless, there is still work to be done to make Drupal 8 core fully accessible and Drupal needs contributors to tackle the remaining issues.
If you want to learn more about Drupal 8 accessibility, you can watch the presentation about “How Drupal 8 makes your website more easily accessible” given by Mike Gifford, one of the main accessibility core maintainer for Drupal.