Drupal accessibility modules: The essentials

Maitreayee Bora

Drupal

Published on 18 Oct, 2021

14 min read

Web accessibility is always prioritized by Drupal to provide its potential users a decent user-experience. Without any fail, Drupal has succeeded in providing an extensive range of modules that can be downloaded according to user convenience. This platform has consistently put efforts in bringing significant improvements in all its versions when it comes to accessibility modules. So, with this article, I will try to give you an insight of some of the recently refreshed or newly released Drupal modules that will efficiently help you in your various challenging projects. You will also get the answer to a common question that often comes to your mind, “Why Drupal for accessibility”?

To begin with, for your better understanding, I am describing the Drupal web accessibility modules by categorizing them based on their different functionalities.

Accessibility Auditing

Under this category Drupal has a sufficient number of modules that help in offering you an enhanced accessibility audit for your ambitious projects.

Editoria11y Accessibility Checker

Editoria11y can be termed as a user-friendly checker that provides support to the content authors and editors. Compatible with Drupal 9, it also looks after the three most vital needs of the content authors.

It makes sure that the spellcheck is constantly running and rectifies the content mistakes when it occurs.
It makes sure that no mistakes take place in terms of Views, Layout Builder, Media and other modules, as it runs in context with them and it's checkers are also constantly on.
It prioritizes content issues by fixing them, also ensuring that the page editors do not omit any issue that is easily rectifiable.

Monsido Tools

Monsido helps in smooth optimization of your website, also focusing on web governance, quality assurance, and accessibility compliance. Since accessibility laws differ from country and sector, this module helps in validating your site against the international standard, the WCAG 2.1. This module which is compatible with Drupal 9 provides your site with the scanning facility to identify any difficulties that might further hamper accessibility, and also enhances your search engine rankings by recognizing SEO errors.

Siteimprove

Known as the most comprehensive cloud-based Digital Presence Optimization (DPO) software, Siteimprove enables you in creating high quality content, editing efficiently, driving better traffic, measuring digital performance and working towards regulatory compliance. Siteimprove plugins help in filling the gap between Drupal and the Siteimprove Intelligence Platform, also empowering contributors to test, fix and optimize their work without any hurdles. This module has Drupal 9 compatibility which is an added advantage.

CKEditor Accessibility Auditor

CKEditor Accessibility Auditor is a module that has Drupal 9 compatibility and it functions by clicking a button which runs the HTML_CodeSniffer Accessibility Auditor on the source code of the current content. With this module, you get to access a detailed view on any type of specific error, convenient success criteria and suggestions of techniques, and also upon what exactly triggered the error, once you run the auditor.

CKEditor Accessibility Checker

CKEditor Accessibility Checker helps in enabling the Accessibility Checker plugin from CKEditor.com in your WYSIWYG. You can inspect the accessibility level of content that is generated in CKEditor, and resolve any accessibility concerns at the earliest.

Sitemorse Lite - a11y Audit

Integrating Drupal with the inCMS service, this module enables to run the on-page accessibility audits and view results from the Drupal Administration interface. Sitemorse along with Ixis bring you a Drupal connector that provides the facility of checking your content quality before it gets published. Additionally, this module is compatible with Drupal 9 as well. With this module, the content editors can have more command over their content by making it more SEO friendly, accessible and resolving any issues that adversely affect the customer experience.

Accessibility

The Accessibility module is a great support for the content authors and theme developers as it enables them to make their websites accessible to the users regardless of their capabilities and the technologies they prefer. It offers a set of available Accessibility tests that helps in scrutinizing the content for any accessibility errors that are published by the editors. Since this module uses the QUAIL jQuery plugin, it is not covered by Drupal's security advisory policy.

Accessibility Scanner

The Accessibility Scanner module enables you to use Drupal along with Axe toolset to opt for web accessibility scans on local and remote websites within the Drupal admin interface. It is compatible with Drupal 9 but isn’t covered by Drupal's security advisory policy.

USWDS Ckeditor Integration

The USWDS library has become an essential requirement for government websites. This module majorly focuses on making a user to smoothly utilize and inject USWDS classes and components into the ckeditor without even opening the source event for a single time. The USWDS Ckeditor Integration module is compatible with Drupal 9.

Quail API

This module is a complete rework of parts of the Drupal 6 project known as “Accessible Content”. It offers an API for the 3rd-party Quail Library to Drupal modules. Quail API has Drupal 8 alpha version as well.

Site builders

This is the second category under which Drupal offers exclusive modules to its users which enable them to design and create functional sites without the need of manual code editing.

Automatic Alternative Text

Automatic Alternative Text module allows you to automatically generate an image caption, while none of the Alternative Text has been given by the users. It is made possible by using the Microsoft Azure Cognitive Services API. This module offers one or even more descriptions of an image that are ordered as per their confidence. Although the default descriptions are in English, there is an option of translating them into other languages. This module is also compatible with Drupal 9.

iFrame Title Filter

To comply with WCAG guidelines, the iFrame Title Filter helps in ensuring that embedded <iframe> tags include a title attribute. When there is no title attribute available in an iFrame, this particular filter parses the src attribute's URL and also adds a title attribute which reads "Embedded content from [url]". There are many Drupal filters that generate iframes, for example, media, video_filter but their compliance with iFrame accessibility needs differs. It is compatible with Drupal 9.

Text field formatter

Text field formatter module which is compatible with Drupal 9 can be termed as the extension of the plain text formatter. The main concept of creating this module came from another similar module known as String field formatter. The main features of Text field formatter include:

Adding additional wrapper to the text field.
Adding classes to this wrapper.
Adding any of the attributes to this wrapper and
Ability to override a link label (tokens are supported).

This module is compatible with Linked Field and Layout Builder.

Field Display Kit

The Field Display Kit module enables fine tune rendering of any field in the system. The main features of this module consist of:

Independently changing title (label) of the field in every display (identified as view mode).
Ability to change the title (label) element tag, along with adding classes and some other attributes to the wrapper.
Ability to change the wrapper element of the field, and also add classes and other attributes to the wrapper.
Ability to change the wrapper element of every individual field item, and also add classes and other attributes to the wrapper and
Ability to link any field item. Therefore, to build the link, tokens like [node:url] can be used.

When authorized, this module helps in facilitating configurations for each field on each entity of your site. It works with fields which are normally displayed or with Layout Builder as well. It is compatible with Drupal 9 but isn’t covered under Drupal’s security advisory policy.

Block ARIA Landmark Roles

Taking inspiration from Block class, the Block ARIA Landmark Roles module prioritizes on adding additional elements to the block configuration forms that helps users to assign a ARIA landmark role and/or ARIA labels to a block. It is compatible with Drupal 9.

A11Y Paragraphs Tabs

With the A11Y Paragraphs Tabs module, you get the authority to smoothly add tabs through paragraphs to your content which complies with the standards of Accessibility (A11Y). The paragraphs which are already configured, to provide you tabs on desktop and an accordion on mobile are added by this module. There is no need to configure anything from your end. The three new paragraphs created by this module consist of:

A11Y Paragraphs Tabs Wrapper
A11Y Paragraphs Tabs Panel
A11Y Paragraphs Tabs Content

The wrapper (A11Y Paragraphs Tabs Wrapper) consists of the tab panel (A11Y Paragraphs Tabs Panel) that enables you to add tabs according to your convenience. On the other hand, the tabs panel (A11Y Paragraphs Tabs Panel) consists of a paragraph in which you are able to add the paragraphs you would prefer to use inside the tab panel. It is compatible with Drupal 9.

Decorative Image Widget

The Decorative Image Widget proves to be a solution for the site builders that prefers the option of leaving an image's alternative text blank explicit (by checking a new "Decorative" checkbox) instead of implicit (by simply leaving the alt text field blank). To put it simply, the editors are made to affirm the reason behind leaving alt text empty, which is because of the decorative image that needs to be hidden from the screen readers. The primary features of this module consist of:

Providing an option of a “Decorative” checkbox to image widgets that has to be checked if the user chooses to leave the alt text empty.
Forcing users to focus upon alternative text instead of leaving it blank.
Working with any existing image widget which extends from core's default. For example, it can be used with the default image widget or the one offered by Image Widget Crop.
Lastly, there is no need for any kind of data model changes, since the position of the state of the "Decorative" checkbox is completely inferred from the value of the alt text.

This module is compatible with Drupal 9 but isn’t covered under Drupal’s security advisory policy.

A11Y: Form helpers

A11Y: Form helpers module helps you to make forms more accessible in Drupal. Following are the modules features:

You do not need any HTML5 validation.
You can include readable inline error messages for screen readers.
You can also put in pre-filled attributes to certain form elements.

This module is compatible with Drupal 9 but isn’t covered under Drupal’s security advisory policy.

CKEditor Abbreviation

CKEditor Abbreviation module helps you in adding a button to CKEditor for inserting and editing abbreviations. This module also has an added benefit i.e., the availability of a link to edit the abbreviation. It is compatible with Drupal 9.

Node Link Report

Since links within content can take various forms in WYSIWYG, such as link fields, free text, entity reference fields and many more. It might be a difficult task to ensure that links are not broken in your content. But the Node Link Report module offers you a block which displays a link report also including all the links in the rendered note. It enables you to display the links on node view, node edit, and node preview as well. Also, it is compatible with Drupal 9.

Devel Accessibility

The Devel Accessibility module offers support to the module developers by providing them an API for aria-live region update announcements. It is compatible with Drupal 9.

CKEditor Balloon Panel

CKEditor Balloon Panel module allows the Ballon Panel plugin from CKEditor.com in your WYSIWYG editor. The Balloon Panel plugin offers the capacity for creating a floating, balloon-shaped container that is capable enough of presenting content at the preferred position in the document. The CKEditor Accessibility Checker uses this module to create the floating panels with accessibility tips.

Developers

Under the third category, Drupal provides significant modules to the developers that helps in enhancing their experience in building well-designed and user-friendly websites.

WCAG Drawer

The WCAG Drawer module is compatible with Drupal 9 and has Drupal 8 alpha version. Although it isn’t covered under Drupal's security advisory policy, you can take the benefit of utilizing the framework offered by this module in order to create easily accessible drawers.

Color Swatch

Color Swatch module is considered as an alternative to the Drupal Core color module and color scheme. This module prioritizes supplying a css with the preferred colors. And it is also said to be flexible as the generated css isn’t compiled in the form of a file but rather added as an inline css. Additionally, the css operates via rendering of a twig file with a theme function that provides more control from preprocess functions, and also twig template overrides on a theme level. This module is compatible with Drupal 9 but isn’t covered under Drupal’s security advisory policy.

End-users

Under this category, the end-users of Drupal are offered with some unique modules that enable them to witness an excellent experience while building their respective projects.

Accessibility Enabler

People with any kind of disability can easily consume and navigate sites in a very effective way with Accessibility Enabler. It also meets the differently abled population in using the preferred content, enhancing accessibility, and increasing the sales and conversation. It helps in making your site more compliant with accessibility regulations of your country, preventing lawsuits and heavy penalties. You get an opportunity to build your brand among your customers, and also exhibit social responsibility by increasing accessibility via this module. The key features includes:

Availing accessibility tools for each and every disability.
Providing intelligent design for mobile.
Availing accessibility presets for each persona.
Option to put accessibility triggers anywhere.
Ability to change accessibility trigger button position.
Facility of making your own custom trigger.
Multiple color theme options.
Freedom to express your commitment towards accessibility.
Enhancing your site navigation to the best of its ability and
Ability to return to the top of the page easily.

This module isn’t covered under Drupal’s security advisory policy.

Civic Accessibility Toolbar

Civic Accessibility Toolbar facilitates a block with accessibility utilities to enable end-users switch theme versions with higher color contrast and also change font size of text. You can create a block with both or one of the utilities to allow visually impaired users access Drupal sites without any difficulty. It is further tested with Bartik, Garland, Zen Starterkit, Stark, Oliveiro themes and is compatible with Drupal 9.

Text Resize

The Text Resize module provides a great support for the visually impaired people by increasing the accessibility of the pages with necessary text size adjustments. By using jQuery and the jQuery Cookie plugin, this module creates a Drupal block which can be themed. Moreover, it gives the option to resize images as well. Also, never forget to enable the "Text Resize" block of your theme to help the block appear.

High contrast

With the High contrast module, you are able to smoothly switch the active theme and a high contrast version of it. You will only need to press the tab on the keyboard after installing the module and will then get the high contrast pop-up link on the screen. It is compatible with Drupal 9.

Voice Search Redirect

The Voice Search Redirect module enables you to redirect on any page with the help of voice command. And there is no need to click manually on the menu. This module isn’t covered under Drupal’s security advisory policy.

Fluidproject UI Options

Fluidproject UI Options offers accessibility options to its users to modify a page's font size, font style, link style, line height and contrast using cookies. But there are some limitations such as:

Internationalization is done through JSON files within the module folder instead of the Drupal interface.
Although this module is tested successfully with the most popular themes, some of the themes like Bootstrap require additional CSS for font-sizing or line heights to work.
The contrast settings do not prefer working for elements that use CSS gradients.

It is compatible with Drupal 9.

Style Switcher

The Style Switcher module empowers themers to create themes with alternate stylesheets, and site builders to add other alternate stylesheets in the admin section. It provides all those styles to site visitors in the form of a list which consist of links in a block. This helps the site visitors to select the style of the site they prefer. Cookies are being used by this module so that when people return to the site or even visit a different page they still get their preferred style. It is compatible with Drupal 9.

Generic HTML validations

The modules under this category enhance the overall accessibility for screen readers and other non-browser devices.

htmLawed

Along with accessibility, the htmLawed module also provides you security. This module restricts and purifies HTML code for compliance with the site administrator policy and standards and for security by using the htmLawed PHP library. In addition to that, you are allowed to autocorrect and beautify HTML markup, restrict HTML elements, attributes and URL protocols in the input. It helps in balancing tags and ensuring that HTML elements are well nested, , transforms deprecated tags and attributes, and many more. It is compatible with Drupal 9.

HTML Purifier

Similar to the htmLawed module, the HTMLPurifier library is a great mix of both accessibility and security. Along with removing malicious code from your site, it also ensures your site with W3C standards compliance. Since this module works perfectly with WYSIWYG editors, it proves to be a great fit for Drupal as well. Also, options like custom fonts, tables, inline styling, and many more are offered by this module. It is compatible with Drupal 9.

Now, what do you think, is Drupal accessible? Undoubtedly, YES, as all the above Drupal accessibility modules prove so.

Learn more about accessibility and what Drupal has to offer:

Conclusion

With the above mentioned Drupal module list, I tried providing you the essential modules that can efficiently help your developers, content editors and site visitors with better web accessibility. So, now it’s completely up to you how you choose the right modules that fits your project needs and expectations. Without waiting further, take your pick!