Web Accessibility in Drupal 8 – part 2

This blog post is the second part of the session Web accessibility in Drupal 8 from our Development director Bostjan Kovac. We will look at the most common mistakes developers make, Drupal Contrib modules and other tools that will help you out when it comes to web accessibility. If you have missed the first part, you can read it here.

Most common mistakes developers make

Simple markup:

Simple markup

And then there is a classy theme:

Classy theme

The Ignorant theme (Bostjan called it that way) with no HTML elements, no roles for each element, nothing the screen readers should help themselves with. That means that Google also doesn't know what this is.

Ignorant theme

 

Skip link

Don't ever remove this (html.html.twig)

Htmltwig

Or this (page.html.twig)

Htmltwig in Web Accessibility

by any chance.

This is the first part of the HTML code and it comes right after the body tag. The purpose of this link is, if someone is using a keyboard to go to the page, he or she has a way to skip the header links, skip the entire menu, skip everything that is above the main content and go directly to the main content of the page. So, instead of removing that link, you can add additional ones.

Forms

It's important that people, who don't see, can navigate through the page. Form API will do the most of the work for you, so use it. Don't build something on your own. Also, use #title property on every element and #title_display if you want to hide it from a display. In addition, #description property is also highly advisable, so as using fieldsets for grouping elements, which belong together logically (radio buttons, date elements, checkboxes). The worst idea here is to give initial focus to an input field because users will get confused.

Ajax

All the dynamic changes on the page are very tricky and confusing for screen readers. So, as presented in the first part of the Web accessibility in Drupal 8, use Drupal.announce() to announce that you have made some changes.

CSS

Make sure you make the focused element visible. Don’t just use some thin grey line around the element, because keep in mind that you are doing it for the colour blind people as well. You can help yourself by using role attributes for styling.

CSS helping with Web Accessibility

 

Drupal Contrib modules that can help you out

There are Drupal contrib modules, which can help you out. One is, for example, Block Aria Landmark Roles, which extends the Drupal block functionality. It's for Drupal 7 and Drupal 8. It gives you an additional field inside of the block settings, where you can set the role for that block.

Aria Landmark

 

The second one is Switchteme. It gives you a new block available to switch theme. Since it's only for Drupal 7, we will continue with High Contrast. It gives you a new block available to switch color scheme.

High Contrast

 

There is also a module Accessible Forms for Drupal 7. On the other hand, Drupal 8 has most of that out of the box.

Other tools to help you out with Web Accessibility

Besides Drupal modules, there are some other tools that can help you with the web accessibility. Most of them are browser extensions, like Accessibility Developers Tool, Siteimprove Accessibility Checker, aXe and a Color Contrast Analyzer for Chrome. On the other hand, Firefox can be equipped with WAVE Accessibility extension and WCAG Contrast Checker.

We hope Bostjan helped you out. Keep in mind that the Accessibility is not an afterthought. You have to deal with the challenges at the time, not at the end because if you do, you will have to go through all the template and CSS again. And with that, you will forget something and also lose a lot of time. Therefore, make your website easier to understand.