Back to top

How to Make Your Drupal Website WCAG 2.1 Compliant

People with impairments struggle to get the necessary information from the Internet, as most of the websites are not built with the accessibility-first approach. However, website accessibility is not a trend but a necessity for any digital platform in 2024. It’s not only a moral issue: in some countries, it’s a legal requirement and you might get fined if your online business is not compliant with accessibility guidelines.

Drupfan, as a Drupal web development agency, offers support services to make your platform more inclusive for everyone by implementing the Web Content Accessibility Guidelines (WCAG). 

In this blog post, specialists at Drupfan explain how to make your Drupal website WCAG 2.1 compliant. Keep reading if you want to make your site more user-friendly, gain more traffic, and increase conversion rates.

How to Make Your Drupal Website WCAG 2.1 Compliant

What is Web Accessibility?

Website accessibility (a11y) refers to the website usability which makes it possible for all users, especially those with physical disabilities, to access all content & functionality on the website. A11y is a shortened form of the word ‘accessibility’ in which 11 means the number of letters between the first letter ‘A’ and the last ‘Y’. Unfortunately, many websites experience accessibility barriers and, as a result, it becomes more difficult or even impossible for people with impairments to see or find the desired content. With this in mind, WCAG guidelines were created.


What is WCAG?

WCAG is an abbreviation for Web Content Accessibility Guidelines. WCAG is a set of standardized success criteria for web accessibility. These standards are developed and continuously updated by the World Wide Web Consortium (W3C)’s Web Accessibility Initiative

WCAG includes several levels of accessibility: A, AA, and AAA (from the most flexible to the most strict level). 


Checklist for Drupal WCAG 2.1 Compliance

Optimizing a website to meet WCAG requirements is highly recommended. The Drupfan specialists have created a short checklist on how to make your Drupal website compliant with WCAG 2.1 AA level. You can implement these simple updates for making your site more accessible yourself, or you can always rely on our team of Drupal developers.

  • Add alt text (text alternatives) to any non-text content on your website.

  • Add titles with the description of their aim to each web page.

  • Provide captions or subtitles for all prerecorded or live audio and video content.

  • Add audio description for all prerecorded video content.

  • Offer text or programmed instructions on understanding and operating content on your platform.

  • Do not restrict the content view to a single display orientation.
  • Provide functionality to pause any automatic audio/video content.

  • Do not use colors to indicate an action.
  • Use a contrast ratio between elements on your website.

  • Identify the purpose of each input field.
  • Do not place text on images.

  • Make sure that all website’s functionality is available from a keyboard.

  • Do not set any time limits for perceiving the content.

  • Never add elements that flash.

  • Provide comprehensive descriptions to all linking URLs.

  • Make it possible to read all the content through screen readers.

  • Develop predictable website navigation.

  • Provide the ability to resize any text on your web pages.

While this advice isn't exhaustive, following a few simple steps could notably improve the accessibility of your Drupal website.


Why is Drupal 10 Accessibility-Oriented?

Drupal 10 is taking significant steps toward website accessibility. Here, Drupfan web developers outline 5 main features of Drupal accessibility.

  1.  The Olivero interface

The main advantage of Drupal 10 is that its default front-end theme Olivero is now fully compliant with WCAG AA standards out of the box which makes website development easier.

  1. The Claro back-end theme

The old back-end Seven theme is finally replaced by the brand new Claro theme in Drupal 10, designed with accessibility in mind. The Claro theme has also reached WCAG AA level compliance, especially due to its color contrasts and the unification of its elements.

  1. More clear semantic

In Drupal 10, the HTML 5 elements have a better semantic structure which makes it possible for screen readers to crawl the web page in a more structured and clear way.

  1. Alt-text is required

In Drupal 10, the alt-text is required for any media element by default, so you do not forget to fill it out.

  1. Accessible inline form errors

Make Drupal 10 forms more accessible with a module that helps to identify what errors were made while filling out the form. Although this module is not enabled by default, you can find it in Core. Don’t forget to manually enable this module if necessary.


Make Your Drupal Website Accessible Today!

Drupal 10 is an open-source content management system that offers a number of accessibility features out of the box that can be enhanced by Drupal accessibility modules or 3rd party tools. Due to its A11Y-first approach, Drupal 10 is the best digital solution for developing a highly-usable, robust, and most importantly 

Get a website’s accessibility audit to check if you are WCAG 2.1 compliant. Contact the Drupfan web development agency today to add accessibility to your Drupal website in compliance with WCAG 2.1 standards.