Accessibility in Drupal 8

10 May 2017

In this post I wanted to cover some of the new accessibility features that are included as part of Drupal 8 core, as well as some additions that we’ve developed here at Big Blue Door.

As a GCloud provider who works primarily with public and third sector clients we’re used to having accessibility as a primary concern for clients and it’s something that we’ve always considered from a project planning phase right through to delivery and ongoing support. Accessibility has always been more of a checkbox exercise to us, and so we’re really pleased with some of the standard options in Drupal 8 which further support this and encourage sitebuilders and content editors to build and manage sites in a more accessible way.

Here’s a summary of some key improvements:

  1. Continuing on from Drupal 7, Drupal 8 core follows the World Wide Web Consortium (W3C) guidelines: WCAG 2.0 (Web Content Accessibility Guidelines) and ATAG 2.0 (Authoring Tool Accessibility Guidelines).

  2. Alt text is now a required field for images, a huge help for content editors. This means that alt text is not accidentally missed from new content which previously would have caused a gradual degrading of accessibility over time.

Image highlighting alt text as a mandatory field

  1. Form errors and status messages are now displayed inline with the associated form field with a specialised icon, rather than at the top of the form which was the default in Drupal 7. This should be hugely beneficial to users when completing long applications forms by being able to quickly see any mistakes or validation issues that they need to update before submission.

Form fields showing as required in Drupal 8

  1. The “TabbingManager” javascript feature is a great new feature, which can be used to help navigate users across a page in a logical order. This allows more control for users who might be visually impaired or otherwise, allowing them to navigate a webpage in a structured and controlled way. This combined with alt text on images and semantic improvements play an important role in improving the browsing experience for all users.

  2. A number of accessibility improvements involve semantics, with Drupal 8 using HTML5 elements in templates to add more meaning into code. This means that tools such as screen readers can interpret elements like <header> and <footer>.

  3. Colour contrasts have been improved across Drupal 8 - these changes are fairly modest to the naked eye but make a big difference to some users. As part of this change Drupal core has been reviewed thoroughly against accessibility standards.

As well as these central changes we have developed our own accessibility feature, which in due course we’re aiming to release as a module back to the community. This allows individual sites to automatically include:

  • A high and low colour contrast version of the site

  • Automatic font size increase option

  • Automatic font size decrease option

  • A link to your sites accessibility page

Big Blue Door's new accessibility widget

We’ll be rolling this out for all future Drupal 8 site releases by default.