Did you know that 1 in 4 adults in the US has a disability*? That's a staggering 61 million people who may be impacted by inaccessible websites.

As a Drupal developer, you have the power to make a difference by ensuring your site meets the Web Content Accessibility Guidelines (WCAG). In this blog, we'll explore the key features and best practices for testing WCAG 2.1 accessibility in Drupal, so you can create websites that are inclusive for all users.

What is Accessibility (A11y)

Accessibility refers to making a website usable by as many people as possible, particularly regarding people with disabilities. What does A11y refer to? A11y simply refers to the word “Accessibility” where 11 denotes the number of characters present between “A” and “Y”

WCAG and its origins

WCAG stands for Web Content Accessibility Guidelines. It is considered to be the standardized benchmark for website accessibility. Created by the World Wide Web Consortium (W3C), WCAG guidelines are the best and the easiest way of making your website usable for everyone. WCAG guidelines are strictly followed by most government and healthcare organizations in order to ensure that the website abides by accessibility laws (for example, section 508).

Principles of WCAG

There are four major principles of accessibility if you want to adopt WCAG compliance. These follow the ‘POUR’ acronym, which stands for Perceivable, Operable, Understandable, and Robust.

Perceivable

In simple words, the content should be detectable to a user’s senses. This means that they must be able to recognize the information that is being presented to them. It includes allowing users to hear audio content clearly and making sure that it is distinguishable from background noise.

Operable

It's all about making sure users can comfortably navigate your website and the interface is user-friendly. There mustn’t be any inaccessible part of the site or any steps that users might be incapable of completing. Should avoid fast-moving and flashing content when designing your web content. It should be made easy to surf the site without a keyboard, also making sure the site is keyboard accessible for users who can’t use a mouse.

Understandable

Users must be able to process the information presented to them and also be able to understand how to use and navigate through the website. This includes making the text clear and readable and predictable to make sure that pages appear in a user-friendly and anticipated way.

Robust

This highlights that the technology could evolve and build your website with future technology evolvements. As a thumb rule, if technology changes and develops, the content should also remain accessible. It also needs to be comprehended by a wide spectrum of users with different disabilities and still remains easy to understand. For example, the site made it compatible to work with the newest version of screen readers.

Why should you comply with WCAG

Below are a few of the advantages of WCAG implementation

• An accessible website builds goodwill toward your brand and improves search engine optimization. Your site will rank more highly in search engine results.
• An accessible website enables greater engagement, reach, and retention since you will have efficiently removed the barriers that prevent an extensive range of people from accessing your content.
• Once WCAG is implemented as part of any website, it is considered standard.

WCAG 2.0/2.1 Success Criteria: The Most Widely Implemented

1. Every input field on the site has an appropriate label
2. Decorative content is implemented in a way that it can be ignored by assistive technology. For example, decorative images ignored by screen readers
3. Captions are provided for all prerecorded audio/video content
4. Sign language interpretation is provided for the audio content
5. A meaningful sequence of content, for example the headings on any page are placed in a sequential order
6. The user is able to pause or stop the audio or control the audio volume independently from the overall system volume for automatically playing videos.
7. The contrast ratio of text and images of text is 4.5:1, and large-scale text and images are 3:1. The contrast ratio does not apply to decorative content or logo or brand name
8. Low or no background audio. The pre-recorded audio/video does not contain any background noise
9. All functionality of the content is accessible via the keyboard interface. There will be no keyword trap.
10. Providing the users with enough time to read through and use the content
11. If the content is time-based, the user is allowed to either pause or adjust the time constraint
12. In case of any fast-moving content such as auto carousels, the user will be presented with options to pause or stop it
13. When the authenticated user’s session expires, the user will be able to continue with the session without loss of data after re-authentication.
14. Page titles, headings, and labels will describe the topic of the webpage
15. Keyboard focus is visible and highlighted well
16. Focusable components will receive focus in an order that signifies meaning and operability.
17. Each section of the webpage is accompanied by its section heading
18. Except for decorative images, all images have meaningful Alt text
19. Audio, video, forms, dropdown menus, anchor text, URLs, and alt text is accessible to the keyboard and screen reader
20. Content clarity adapts according to the zoom level of the page. Content is clearly visible, even on the maximum zoom level
21. The header and footer menu with help context should be available on all pages throughout the site
22. The sites have proper implementation of hover and focus states

Screen Readers

Many people with visual challenges use screen magnifiers and screen readers. A screen reader is software that reads digital text displayed on the screen aloud. Some screen reader examples include:

• Paid products like JAWS (Windows) and Dolphin Screen Reader (Windows).
• Freeware like NVDA (Windows), ChromeVox (Chrome) and Orca (Linux).
• Software built-in the OS(Operating system), like VoiceOver (macOS, iPadOS, iOS), Narrator (Windows), ChromeVox (on Chrome OS) and TalkBack (Android).

Three levels of accessibility

WCAG 2.1 has 3 levels of success criteria

• Level A: All 30 essential success criteria defined in WCAG 2.0 are met. At a minimum, all websites should achieve this level of compliance.
• Level AA: All level A success criteria are met and an additional 28 accessibility success criteria are satisfied. This level achieves a broader accessibility spectrum and is often the goal for most of the development teams to achieve.
• Level AAA: The website should satisfy all three levels of success criteria, including 28 additional success criteria. This level is typically reserved for special sites such as government organizations.
  Most of the WCAG-compatible sites widely fall under the accessibility success criteria level A or AA.

Accessibility Testing a Drupal Website

The following are steps followed to perform an accessibility test for a Drupal website

1. Run a Google Chrome Lighthouse audit and fix the highlighted accessibility issues
2. Run a Wave tool audit
3. Validate the keyboard highlight focus and the tab order of the page manually
4. Validate the page with the required screen reader software. For example, VoiceOver
5. Validate the site accessibility on all resolutions such as wide desktop, laptop, tab, and mobile devices
6. Validate the site code using W3C’s validation tools for Markup and CSS
7. Validate the color contrast of the site to make sure it meets the standards (4:5:1) by using a Chrome extensions tool like Kontrast or an application like Color Contrast Analyzer

How Drupal Helps Attain Accessibility Standards

Web development must include accessibility to make sure that websites are functional and accessible to those who have disabilities. Drupal is renowned for its steadfast dedication to accessibility. Take a look at how Drupal promotes accessibility and what tools and features it provides to assist websites to be more user-friendly.

1. Building Accessibility into Drupal

The goal of the Drupal development team has always been to build a platform that is usable by as many users as feasible. The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requirements are followed when developing the core Drupal platform. This indicates that a variety of disabilities, such as those affecting the visual, auditory, physical, verbal, cognitive, and neurological systems, can access Drupal websites.

2. Default Accessibility features

• With their ability to adapt to various screen sizes and devices thanks to responsive design, Drupal's default themes are usable for those who use mobile devices or assistive technology.
• Drupal creates semantic HTML markup, which aids screen readers and other assistive technology tools in comprehending the website's structure.
• Drupal includes a field for adding alternate text to photos, which aids those who are blind in understanding the website's content.
• Drupal supports keyboard navigation, which is crucial for users who are unable to use a mouse.
• Forms that are easy to use and navigate with assistive technology are generated by Drupal that are accessible.

3. Drupal Provides Plugins & Modules for Accessibility

To improve a website's accessibility, Drupal provides a variety of accessibility modules and plugins that can be deployed. Several well-liked accessibility modules and plugins are as follows:

• Editoria11y Accessibility Checker: This module examines a website for problems with accessibility and makes recommendations for solutions.
• CKEditor Accessibility Plugin: This add-on improves the accessibility of the widely used text editor for Drupal, CKEditor.
• All-in-one accessibility Widget: This module includes an accessibility widget that enables users to change the website's text size, contrast, and other accessibility-related settings.
• A11Y: Form helpers: This module helps make all the Drupal webforms meet the accessibility standards
• Block ARIA Landmark Roles: This module adds additional elements to the block configuration forms that allow users to assign an ARIA landmark role and/or ARIA labels to a block.

4. Strong Community Support for Accessibility

Developers and designers who are committed to accessibility make up a sizable part of the Drupal community. An effort led by the community to make Drupal more accessible to those with disabilities is the Drupal Accessibility Group. The group offers guidance, tools, and best practices for developing ADA-compliant Drupal websites.

References:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Final Thoughts

Drupal is an effective and open-source content management system that provides a variety of features, tools, and plugins to improve a website's accessibility. Because of its dedication to accessibility and the strength of its accessibility-focused community, Drupal is a fantastic platform for building websites that are useable and accessible for those with impairments.
I hope this article provides you with the required insight on accessibility testing with WCAG 2.1. Want to build an accessible Drupal website from scratch or want to make your current site more accessible? We’d love to make that happen! Let’s talk!