Web Accessibility in Drupal 8
At AGILEDROP, we like to share our knowledge and experience with others. Our development director Bostjan Kovac did that at DrupalHeart Camp Zagreb with his session Web Accessibility in Drupal 8. We will look at this session and we will present it in two parts. This is the first part.
The inspiration for his session (and of course this blog post) came from the fact that web accessibility was a demand when Bostjan worked on a couple of projects. He also went to one of the similar sessions on Drupal Camp in Vienna 2015 and decided to take a closer look at it.
Today Drupal websites sites have awesome UIs, beautiful designs and an incredible speed. But the web accessibility still causes some concerns among Drupal developers. It’s true that when clients ask, if web developers will be able to do it, they simply nod with the head, to calm the clients down. But in fact, they are not so sure about it.
Some facts
- 15% of the world’s population has some form of disability (they are actually the biggest minority in the world)
- More than 110 million adults have significant difficulties in functioning
- 8% of men have some form of colour blindness
Web accessibility and an Assistive technology
There are, of course, some situational disabilities, like a broken part of the body, lost eyeglasses and listening to the video in a noisy room. Web accessibility also refers to responsive pages for mobile devices, multilingual web pages (not everybody speaks English you know) and Google, who can’t see your beautiful design and it is named the biggest blind user of all. Due to so many disabilities, there are some tools, which can help, like zoom, screen readers (informative images, images of text, functional images), browser configuration, captions, braille keyboard and mouth mouse.
Drupal and Accessibility
Drupal 7 was pretty good when it came to accessibility. Drupal 8 even improved in that area, so that we now have a very strong accessibility tool. It’s all out of the box. But this tool is not flawless because developers can break everything, despite all the greatness. Bostjan confessed that he did that in the past sometimes, so he likes to share that with you (in part 2) in order that you won’t make the same mistakes.
Drupal 8 has all the templates and semantic rules for the accessibility. It has HTML tags, like <article>, <section> …, roles for the main content, ARIA properties (aria required) out of the box and ARIA states out of the box (aria invalid). Very important to keep in mind is that Google likes semantic markup, so if you do all the described things, Google will “like you more”. Moreover, there is also a color contrast for designers not neglected by Drupal developers from the Drupal Community.
There is also something new. An alternative text under the user image is now required by default. In Drupal 7 there was only an option, but that changed in Drupal 8.
Drupal.announce()
Drupal.announce() is very important for front-end Drupal developers working with JavaScript. It’s part of the Drupal core now. It is a simple way to turn text into speech for screen readers. Therefore, it’s very important for dynamic pages. You use it when something changes dynamically. For example, when you add a new content at the bottom, you add new items … Users, especially blind ones, may not see it, so you have to tell them (announce) that something changed.
Drupal tabbing.Manager
Drupal tabbing.Manager was another thing added to Drupal core. It enables constrain tabbing through the links. A good example is contextual link.
There are also some other things that improve accessibility, like Filedsets for radios and checkboxes, jQuery UI for autocomplete and dialogue …
More about web accessibility in Drupal 8 will come in the part 2, where 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.
