The Accessible Web

This article was last updated in January 2022.

To quote Tim Berners-Lee, W3C Director and inventor of the world wide web, “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." But what should be an essential component of any web design project is too often a low-priority afterthought, beholden to budget and timeline restrictions. This is often because of the misconception that users with accessibility concerns are a small minority, but over a billion of the world’s population faces some kind of disability that may limit their interactions with your website.

There are four main types of disabilities that may affect your user’s ability to interact with your website:

• Visual -- blindness, low vision, and/or colour-blindness.
• Auditory -- profoundly deaf and hard of hearing.
• Motor -- the inability to use a mouse, slow response time, and/or limited fine motor control.
• Cognitive -- learning difficulties, distractibility, and/or the inability to focus on large amounts of information.

And in most cases, a person’s disability will lie somewhere on a spectrum -- that is, they’re rarely black and white, on or off, etc. and so each individual’s experience will vary.

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are a series of guidelines for improving the accessibility of your website. Developed by the World Wide Web Consortium (W3C), the WCAG are internationally recognized and adopted standards. Although they’re not an exhaustive list of all of the possible issues that users with disabilities may face, they do help to explain how to mitigate many of the more common challenges. By designing WCAG 2.0 around general principles rather than specific technologies, the W3C also created an ethics statement as well as helpful guidance. The principles of WCAG 2.0 are:

Perceivable

A website being perceivable is all about the senses people use when browsing the web. Some of your users may have difficulties with one or more of their senses, making them reliant on assistive technology to browse your website. The three main senses that the guidelines can help with are sight, sound, and touch. With WCAG 2.0, you can make sure that users can perceive all the information on your website.

Operable

A website being operable refers to the actions people take when browsing, including the different ways your users browse the web. Some of them may have motor difficulties, which means they use their keyboard to navigate, and others who have sight impairments often prefer to use a keyboard rather than a mouse as well. The main issues for making your website operable are ensuring good keyboard-only navigation, avoiding setting time limits for your users, and assisting them in completing forms -- particularly if and when they encounter errors.

Understandable

Making a website understandable is a different kind of task than the first two principles, because a perceivable and operable website means nothing if your users can’t understand it. Your website must use clear terms, have simple instructions, and explain complex issues. You must also ensure that your website functions in a way that your users understand by avoiding unusual, unexpected, or inconsistent functions.

Robust

A robust website is one that third-party technologies, like web browsers and screen readers, can rely on by adhering to recognized standards such as clean HTML and CSS. This minimizes the risk of your users relying on technologies that can’t correctly process your website.

Drupal 8 and Accessibility

Drupal 8 has made a significant effort to ensure that the websites developed with it are both universal and accessible. As “an inclusive community, [they] are committed to making sure that Drupal is an accessible tool for building websites that can also be accessed by people with disabilities.” This is seen in enhancements to both the default settings as well as tools that enable developers to build more accessible websites.

Some of these include:

• WAI-ARIA attributes have been included to provide semantic meaning to elements where HTML5 does not suffice, allowing for screen readers to be able to distinguish and identify sections and components better.
• Images uploaded by content editors, whether through image fields or WYSIWYG editors, require Alt tags by default, encourage developers to enforce accessible image content.
• Drupal’s Form API sees improvement to radios and grouped checkboxes, which now use fieldsets to improve output from screen readers, as well as error messages which, through an optional, experimental core module, can be placed inline with fields.
• Several tools are available to developers to allow them to improve user experience, including Announce, a means by which direct output can be sent to screen readers to replace more visual cues, and a JavaScript alert for audible announcements so that audio cues aren’t missed by those with hearing difficulties.
• Developers can also help screen readers and power users navigate by taking advantage of the new TabbingManager and declaring the logical order by which users should navigate through the page’s dynamic elements.
• Drupal 8 strongly encourages the integration of libraries so that existing technologies can complement each other and share their efforts in achieving an accessible world. Examples include Drupal’s replacement of it’s autocomplete functionality with that of jQuery UI, whilst also borrowing their modal dialogs for Views UI.
• Other steps have also been taken towards framework unity, where Hidden/Invisible/On-focus declarations have now been standardized with HTML5 Boilerplate, and work well in Firefox as well as Safari on Macs, iPhones & iPads.

Drupal’s accessibility team has also identified accessibility barriers within the core code of Drupal 7 and worked to resolve them for version 8.

Some of the many improvements to both the visitor and administrator sides of Drupal include:

• Search engine form and presentation
• Drag and Drop functionality
• Color contrast and intensity
• Adding skip navigation to core themes
• Image handling
• Form labeling
• Removing duplicate or null tags

Finally, in addition to the more technical accessibility features, Drupal also makes the web more qualitatively accessible through its Translation and Localization features. And with every default theme being developed responsively with efficient mobile-first design flows, Drupal 8 is now accessible on every device -- something that is especially important in areas where mobile devices may be more common than traditional computers, and internet connectivity is limited, such as developing economies.

Wrapping Up

The Drupal community is an inclusive one. It is committed to making sure that Drupal is an accessible tool, not only for the end users who are accessing the websites that are built with it, but for the developers who build them too. And with upwards of 15% of the world’s population facing some kind of disability that may affect their online experience, building a more accessible and universal web is imperative for everyone.