Improving Accessibility in Drupal

Disability-Friendly Inclusion in a Developer’s Dreamland

If you are at all familiar with back-end website design and content management, you likely have more than a passing acquaintance with Drupal already. Considered an updated classic, in its 10.2.0 release as of this article’s publish date, Drupal is a powerful content management system (CMS) that combines the flexibility of a dynamic platform with the accessibility features necessary to create inclusive websites.

Drupal's modular architecture makes it easy to add and remove features, so developers can create websites that meet the needs of their users. It’s a very accessible CMS out of the box, with a number of features that make it easy to create accessible websites, including built-in accessibility in its forms API. Much loved by developers, it’s not a new system, nor does it need to be. It is very solid and powerful when used properly, and stability is an extremely valued aspect of its perennial popularity.

Drupal is frequently the choice for government and educational organization websites, because it is free and robust. It offers ready-made, simplified administration. Its “views” feature, considered perhaps the most difficult part of Drupal to learn and use, is an excellent tool for configuring content to your own specifications.

There is now also a very significant accessibility-forward change that many developers are not yet aware of: a Drupal core maintainer announced in April 2023 that new changes committed would allow included aXe testing within Drupal’s CI/CD pipeline, one of the first open-source CMSs to do so.

Okay, we’ve nerded out our intro and scared you off, haven’t we? If you’re still here, we’re going to assume you’re either a developer or dev-adjacent. Stick around for more overly technical fun, and possibly some bad jokes. Maybe we’ll spare you those.

Let’s pretend you know somewhat less about accessibility, although we’re guessing that’s not the case.

Basic definition:

Digital accessibility refers to the practice of designing and developing websites and web applications so that they can be used by people with disabilities, which may include visual, hearing, mobility, or cognitive impairments.

Extended definition:

Accessibility in the context of web development indicates that people with disabilities are able to use a specific website or web application. In Drupal, saying that your site or app is accessibility-compliant signifies that you have carefully built and checked every part of your website, be it navigation, media content, or user interfaces, so that it is usable by everyone. You have provided appropriate options for interacting with everything offered on the site or app in an adaptive or alternative manner. Whether or not a user can see the content or hear the audio, they should be able to comfortably navigate the site, understand the data being relayed, interact with the forms, and complete their user journey. A developer who builds accessibly is creating a digital environment where all users have equal access to the website or application’s content and information. As it should be.

Now that we’ve covered that, let’s move along. In this article, we will discuss the importance of accessibility in Drupal, and how to improve the accessibility of your Drupal website.

Why Should You Hardwire Accessibility Into Your Drupal Sites?

First, it’s the right thing to do. Everyone should be able to use the internet, regardless of their level of ability. Even if you’re more of a black-hat, we can all agree that information wants to be free. And free means free for us all. It’s an invaluable resource that should be accessible to everyone.

Second, accessibility can help to improve the usability of your website for all your users. By making your website accessible, you’ll make it easier for everyone to find the information they need.

Third, accessibility can help to improve your website's SEO. Search engines like Google give preference to websites that are accessible.

What’s stopping your users from accessing your website? We’d be better off asking what’s stopping you from making it accessible.

But, yes, let’s restate the obvious, because actually that’s a good way to plan improvement.

Visual	Hearing	Mobility	Cognitive
People who are blind or who have visual impairments may not be able to see the content on a website.	People who are deaf or have hearing impairments may not be able to hear the audio on a website.	People with mobility impairments may not be able to use a mouse or keyboard to navigate a website.	People with cognitive impairments may have difficulty understanding the content on a website.
➔ When you build in accessibility, screen readers can vocalize your text for those with visual impairments.	➔ Captions and transcripts can make your videos understandable for users with hearing challenges.	➔ Keyboard navigation benefits people with motor limitations.	➔ Clear and simple design, plus direct and logical language can help users with cognitive challenges navigate your site.

Making your website accessible doesn't just benefit individuals with disabilities; it improves the experience for mobile users, people with slow internet, users in noisy settings, and people who are just plain exhausted.

Without minimizing permanent and severe conditions, think about how you can relate. This is all of us on a tough day. ADHD stressing your synapses? Brain fog maxed out? Stayed up too late doing the Dew? You would like website content to be at the very least clear and logically set up, so your overloaded brain can trudge through it.

Now that you’re empathy-pilled, we’ll take it as a given that you do want to provide accessibility.

Here’s how.

Drupal’s Zero Install Accessibility

Drupal comes with several key features that support accessibility out of the box:

Semantic Markup

Drupal comes with HTML5 integration. HTML5’s semantic elements clarify the structure of your page, making it easier for assistive technologies to interpret content.

Accessible Themes and Templates

Drupal comes with an assortment of accessible themes and templates that are designed with accessibility in mind. They’re easy to read and navigate for people with disabilities.

Drupal Accessibility Modules

Built by the community, Drupal’s accessibility modules offer a quick way to adapt various Drupal features to meet accessibility standards and further improve the accessibility of your website. These modules can help you to add features such as keyboard navigation, screen readers, and color contrast enhancements.

Content Creation and Accessibility

Drupal doesn’t skimp on inclusive content creation features. They’re there to assist you in making sure that while you create content, you're also making it accessible to all, including people who use screen readers or other assistive tools.

Getting Set Up For Accessibility

Some of the things you can do to directly improve the accessibility of your Drupal website:

• Use clear, concise language that is easy to understand. Skip the technical jargon and get straight to the point.
• Use colors that have a high contrast ratio. Make sure text stands out against its background. This makes it easier for people with visual impairments or color blindness to read the text.
• Give all images alt text that describes the image. This helps screen readers interpret what's on the screen. This way, people who cannot see the image will still be informed what it is.
• Implement keyboard navigability. Not everyone uses a mouse; some folks rely on keyboard shortcuts. Make sure they can use them.
• Provide alternative text and tool tips for all forms, to describe the form fields and explain what’s needed. This will help people who cannot use a mouse or keyboard to interact with the forms.
• Test your website with a variety of assistive technologies such as screen readers and screen magnifiers. This will help you to identify any accessibility issues that need to be addressed. And, different people use different tools to browse the web, so make sure your site works for everyone.
• Test using recommended tools and techniques, including:
  • The Web Accessibility Evaluation Tool (WAVE), a free online tool that can be used to scan a website for accessibility issues.
  • The aXe-core tool, a free and open source tool that can be used to scan a website for accessibility issues.
  • The Drupal Accessibility Testing Guide, with detailed instructions on how to test the accessibility of your Drupal website.
• Best suggestion we’ve got? Get an accessibility expert to conduct regular audits and test your website professionally. They know what they’re doing better than you do, at least on this front. They can help you pinpoint and solve accessibility issues.

The Triple-A ABCs of WCAG

The Web Content Accessibility Guidelines (WCAG) are a set of rules created to guide accessible web development. Although they are not put forth by any government body, they’re accepted nearly worldwide. There are three levels of compliance: A, AA, and AAA. In Drupal, you can achieve AA compliance without drama, thanks to modules designed to meet WCAG guidelines. Basically, once you’ve got AA, you’re golden. AAA is a level only development gods can hope to achieve. You say you are one? Go get it then.

The WCAG page we’ve shared above is not at an introductory level. For an intro to accessibility from the WCAG perspective, check the W3C’s Accessibility Fundamentals Overview. 

5 Top Accessibility Pitfalls & Solutions

1. Missing alt text for images: Images should always have alt text that describes the image. This is important for people who cannot see the image: those who are blind or have low vision.
   
   Fix It ➔ Use descriptive alt text that accurately describes the image. Avoid using vague or generic terms like “image” or “picture.”
   
2. Inaccessible forms: Forms should be accessible to people who cannot use a mouse or keyboard. This can be done by providing alternative text for form fields and by using ARIA labels.
   
   Fix It ➔ Use ARIA labels to identify form fields for assistive technologies. ARIA labels are descriptive text that is added to form fields to make them accessible.
   
3. Poor color contrast: The color contrast between text and background should be high enough for people with low vision to read the text.
   
   Fix It ➔ Use a color contrast checker to test the contrast between your text and background colors. There are many free color contrast checkers available online.
   
4. Long or complex text: Long or complex text can be difficult for people with reading or cognitive disabilities to get through.
   
   Fix It ➔ Break up long blocks of text into shorter paragraphs. Use headings and subheadings to help people scan the text.
   
5. Lack of keyboard navigation: Websites should be keyboard-navigable, so that people who cannot use a mouse can still use the website.
   
   Fix It ➔ Use keyboard shortcuts to allow people to navigate the website using only the keyboard. There are many keyboard shortcuts that can be used in Drupal.

Hey, Drupal people? We see you putting in the time here. By investing in accessibility, you're doing the right thing. You're also expanding your audience and making your site more user-friendly. Regardless of your initial motivation, the results are tremendous. Thanks for joining in the effort to make the web a better place to be.

Link Up, Link Out

With over a million developers who share solutions and best practices, Drupal is more than a CMS, it’s a community. If you have a question, check for online suggestions. If you don’t find an answer immediately, there are many discussion forums with experienced developers who can help.

For more Drupal and Drupal + accessibility information, here are a few of the main URLs you should bookmark:

Drupal Official Site

W3C Accessibility Guidelines

WebAIM

Plus, some direct internal Drupal URLs:

https://www.drupal.org/features/accessibility

https://groups.drupal.org/accessibility

https://www.drupal.org/docs/develop/standards/accessibility-coding-standards

https://www.drupal.org/docs/getting-started/accessibility/how-to-do-an-accessibility-review

https://www.drupal.org/docs/7/accessibility/tools-techniques-resources

And, of course, Reddit. Here’s a nice little tidbit to start with.

FAQs