Making sure your website is accessible is becoming a necessity - and with all the right reasons. The web is for everyone and, as such, everyone should be able to use it effectively, no matter their physical ability. Sites that are inaccessible automatically prevent a large number of people from using them.
We’ve already written a series of blog posts on Drupal and accessibility - you can check them out here: part 1 & part 2. As you can probably glean from these two posts, Drupal offers a lot of accessibility features out-of-the-box, e.g. the requirement of alt text for images in Drupal 8 (another strong case, by the way, for migrating to Drupal 8 ASAP).
The second part of the series also takes a look at a few contributed modules with which you can further improve the accessibility of a Drupal website. During the time since the blog post’s publication, however, there have been many more accessibility-focused modules contributed to the Drupal project - and these are what we’ll take a closer look at in this post.
Accessibility toolkit (& Accessibility)
While only available for Drupal 7, the Accessibility toolkit (the a11y module) is an invaluable resource for Drupal developers that are tasked with building user-friendly and accessible sites. It allows for: dyslexic font support, high contrast mode, inverted colors mode and text scaling.
On top of that, it also provides support for simulating specific disabilities. Since it’s quite difficult for an able-bodied person to put themselves in the shoes of a disabled person, these simulations greatly help developers to feel empathy by reproducing the symptoms of certain disabilities such as dyslexia or colorblindness.
If you’re looking for a module with similar capabilities that can also be used in Drupal 8, the Accessibility module is the one closest to the a11y module - it’s geared more towards content editors and site maintainers, though. It provides a set of available accessibility tests that check the content published by your editors and other users for any accessibility errors, such as a missing alt text (granted, with Drupal 8 this is already automatic).
So, for a Drupal 7 site, these two modules can be employed in tandem: one is used for ensuring accessibility in development, while the other is used in the live environment to make sure that the content and design meet accessibility standards. Just a disclaimer, though: the Accessibility module is not covered by Drupal’s security advisory policy, since it uses the QUAIL jQuery plugin which is no longer supported.
Accessibility Scanner is a relatively new module; the first development version was released in March, while the latest alpha version was released just about two months ago (June 20). With this module, you can use Drupal together with achecker to perform web accessibility scans directly in the Drupal admin interface.
The Style Switcher module provides incredibly useful functionality for visitors that suffer from color blindness. It allows themers to create themes with alternate stylesheets, and site builders to add other alternate stylesheets right in the admin section.
A site visitor is then presented with all those styles as links in a block, and they can choose the one that they prefer, e.g. one with the optimal contrast for their specific type of color blindness.
The module is available for both Drupal 7 and 8, but the Drupal 8 version is still only in alpha.
Block ARIA Landmark Roles
This module was already mentioned in part 2 of our series on web accessibility in Drupal; it’s available for Drupal 7 and 8. It allows you to assign ARIA landmark roles and/or ARIA labels to a block, which makes it easier for screen readers and other assistive technologies to identify the type and purpose of a certain piece of content. This greatly simplifies site navigation for visitors using such technologies.
While it’s quite easy to resize the text of a page using the keyboard (‘ctrl’ and either ‘+’ or ‘-’), not everyone browsing the web is aware of that. The Text Resize module, available for both Drupal 7 and Drupal 8, allows visitors to change the font size of a text through a special block. It also comes with a ‘reset’ option which has to be enabled from the admin page.
Automatic Alternative Text
With this Drupal 8 module, you can automatically generate an alt text for an image for which the user hasn’t provided any. This is done using the Microsoft Azure Cognitive Services API.
It provides one or more descriptions of an image which are ordered according to their confidence. The default descriptions are in English, but it is also possible to translate them into other languages.
Providing an alternative text is crucial for blind or visually impaired visitors using screen readers, as it is pretty much the only means for them to take in the full content of a page. On top of that, images with the provided alt text are more SEO-friendly and thus help with your site's search engine ranking.
Even though Drupal 8 demands alt text by default for content creators, content submitted by users should also include it, and this module enables just that.
Fluidproject UI Options
The UI Options module by Fluid enables users to modify a page’s font size, line height, font style, contrast and link style according to their preferences. All changes made are retained thanks to cookies.
The module does have some limitations, however. Bootstrap themes, for example, need some additional CSS for font-sizing and line heights to work as they should, and elements that use CSS gradients can’t have their contrast settings changed.
This is a very useful module not just in the context of accessibility, but also security. It restricts and purifies HTML code so that it complies with the site administrator policy and standards and security best practices.
Using this module, you’re able to autocorrect and beautify HTML markup as well as restrict HTML elements, attributes and URL protocols in the input. Moreover, it also balances tags and ensures that HTML elements are properly nested, transforms deprecated tags and attributes, etc.
A very similar module to the just mentioned htmLawed, the HTML Purifier filter library is again perfect for meeting both security and accessibility requirements. It removes malicious code from your website while also ensuring W3C standards compliance.
HTML Purifier is a great fit for Drupal as it works really well with WYSIWYG editors. With it, you get a lot of options, such as custom fonts, tables, inline styling, and many more. It’s available both for Drupal 7 and 8.
This was our list of modules for Drupal 7 and 8 that take care of different aspects of web accessibility. Depending on what security measures you’ve already implemented and what your team’s best practices are, you likely won’t need to employ every single module on this list.
Still, we wanted to give an overview of different options so that you can pick and choose the one that best fits your needs. These modules provide accessibility resources for both developers and content editors, as well as visitors using the site, so you’re sure to find a combination that works for you.
If you're still experiencing accessibility issues or are in need of a complete accessibility overhaul, give us a shout out and let our experienced and proven developers help you make your site accessible to everyone.