Drupal 8 Accessibility

What is web accessibility?

It refers to practicing good web standards to design, and develop websites, that are accessible to everyone. By removing any barriers that prevent people with disabilities to interact or access the site.

Web content accessibility guidelines (WCAG) was created to help standardize web content. It's very important because it focuses on the user goals instead of current technologies.

Who is web accessibility for?

"One billion people, or 15 % of the world’s population, experience some form of disability, and disability prevalence is higher for developing countries." The World Bank

• 285 Million people with vision impairment.
• 360 million with hearing loss.
• 1 in 10 people need some sort of accommodation.
• 4.5% of the world is colorblind. That means 1 in 12 men (8%) and 1 in 200 women in the world are colorblind. (Color Blind Awareness)

Though these numbers are high, we also have to take in consideration aging which with luck everyone will experience,  at some point we all need better accessibility. 

Challenges we face.

The web is always changing, making it difficult to maintain it accessible.

User needs are always changing, individuals may face several disabilities or just one, and that can change with time.

No standardization for how assistive technology works, no consistency how tools are implemented. Software is updated for improvements which may cause it not to be compatible with some sites or how they have been developed.

How Drupal 8 Fits in.

Color contrast has been improved. (CSS GRADIENTS) by making the default background darker it improves contrast and by default makes sites more assessable.

Semantic HTML5 elements + WAI-ARIA landmarks:

Visually impaired users will be able to take advantage of this, since Drupal 8 comes packed with WAI-ARIA markup. This ensures that people that rely on the markup of a site and not visual cues of a site will be able to navigate it. Using a screen reader becomes easier since it will be able to read ARIA roles, properties and states.

ARIA Roles

An example of applying a role to an HTML element would be <div role="main"> … </div>, which indicated the main content of the page.

Roles fall into these categories:

• Abstract
• Widget
• Document Structure
• Landmark

More info on roles on Drupal.org

Aural Alerts

Provides instructions to screen reader users to be read out ether as assertive or polite.

Alt Tags

The purpose of alternative tags on images is to provide a clear description of the image being used. For those who use a screen reader this description is crucial for a good experience.

Think of it like a tweet, you have to get your idea across using a small amount of text that your audience will be able to understand.

Now on Drupal 8 this attribute can be made a required field on all images.

Color Contrast

One of the accessibility standards is color contrast. Drupal has made some subtle changes to adhere to those standards. Most people probably won't notice that the blue on the header is a darker blue. Like a lot of the changes on Drupal, this makes a big impact for those with disabilities.

A free and easy way to check color contrast is WebAIM, there you can check if your color contrast passes WCAG AA standards.

Controlled Tab Order

With the Tabbing Manager a user can navigate in a logical order, by accessing salient elements.

Inline Form Errors

Identifying errors in forms will be a much more accessible task. This is available as an option in the Core Module.

In conclusion

Making the web as accessible as possible should be everyone's mission, even if it means adding a couple of extra steps to your workflow. We are fortunate to be part of a community like Drupal, because there are a lot of us who really care and are making a difference regarding this and other issues.