Web Accessibility in Drupal 8

[email protected] • +442081442189 • www.agiledrop.com

Web Accessibility in Drupal 8

Matic CretnikAgiledrop

mailto:[email protected]

http://www.agiledrop.com/

https://www.agiledrop.com/





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



https://www.agiledrop.com/blog/agiledrop-going-nearest-drupal-camp


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



https://www.drupal.org/u/boshtian





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.ManagerDrupal 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 ...




Most common mistakes developers make

Simple markup:




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




Skip link

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




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 before, 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




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



Software

Web Accessibility in Drupal 8