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
And then there is a 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.
Don't ever remove this (html.html.twig)
Or this (page.html.twig)
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.
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.
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.
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.
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.
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.
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.