The World Wide Web was created 37 years ago — but it’s only in recent years that some fundamental things are becoming a standard. One of them is website accessibility.
Thinking about how to make a website accessible, you need to know that some CMSs are accessibility-focused from the start — Drupal. We invite you on a tour of its built-in accessibility features and add-on accessibility modules.
Drupal accessibility: introductory notes
Accessibility (a11y for short) is in the “source code” of Drupal's philosophy. The latter is strongly focused on inclusion and strives to make websites accessible to all users regardless of disabilities (auditory impairments, visual impairments, difficulty holding a mouse, and so on).
The key accessibility standards by the Worldwide Web Consortium — WCAG and ATAG — have compliance levels from A to AAA. According to Mike Gifford, Drupal 8 Core Accessibility Maintainer, the community began implementing WCAG 2.0 AA compliance in Drupal 7. In Drupal 8, they also began incorporating elements of ATAG 2.0 AA and finding ways to comply with the new WCAG 2.1 AA.
The accessibility work has progressed enormously in Drupal 8 and addressed a number of very important issues. This makes the 8th version inherently accessible, which is listed among the top benefits of Drupal 8 that inspires many businesses to upgrade to Drupal 8 or hire a web development team to build a site from scratch.
The key built-in Drupal accessibility features
So how exactly does Drupal remove the barriers in any user’s interaction with websites? What makes it friendly to screen readers and other assistive software? We are reviewing this right now.
New accessible front-end theme Olivero
In addition to accessible themes in Drupal 8, the new default front-end theme Olivero created for Drupal 9 is an example of accessibility in everything — colors, contrasts, buttons, and so on. The theme is WCAG compliant, created in cooperation with the best accessibility experts, and thoroughly tested considering the accessibility feedback. It owes its name to a programmer Rachel Olivero who was a well-known advocate of website accessibility. We will see the theme in Drupal 9.1 core, so it makes sense to get ready for Drupal 9, which is forthcoming and promises an easy upgrade.
Better semantics with HTML5 and WAI-ARIA
It’s easier in D8 to make the purpose and behavior of all web page sections and components clear to screen readers. This provides a more user-friendly navigation.
- Developers can use the semantic HTML5 elements that Drupal 8 is equipped with. The latest version of the markup language has an especially clean code and level of screen-reader friendliness.
- When native HTML5 markup is not enough, WAI-ARIA attributes (roles, states, and properties) can be added to it. They will provide even more information to screen readers. WAI-ARIA is especially helpful with interactive UIs.
Required ALT text for images
Making images accessible to visually impaired audiences is vital. A huge role here belongs to the ALT text (aka alternative text). It describes what is on an image, so it can be understood by screen readers.
ALT is required by default in D8 so it’s impossible to add an image without describing it — it will refuse to save the image and display a reminder. This is a great example of Drupal 8 a11y. This can be overridden in the image field or CKEditor, but why would someone want to?
The defaults match the accessibility standards. It should also be noted that, just like other accessibility practices, ALT tags are very useful in terms of SEO.
Accessible inline form errors
When users submit forms, they may submit some information wrong. Form errors are usually listed in the top of the form with the wrongly filled fields highlighted in red.
However, visually impaired users may not see the highlights, and screen readers cannot help them relate the particular error message to the particular form field.
To solve this issue and improve form accessibility, the D8 core has the Inline Form Errors module. Thanks to it, errors are displayed next to specific fields so it’s easy to understand what needs to be fixed. The module is not enabled by default, but you can choose to enable it.
Aural alerts
When some changes take place on the page that users should know about, it may go unnoticed by screen readers. The Aural Alerts feature is what you need. It allows you to inform screen readers about these changes with a message that they need to read out. This feature in the Drupal 8 core uses a JavaScript method Drupal.announce(). It follows the WAI-ARIA practices.
Controlled tabbing
Many people prefer using the tab key on their keyboard instead of the mouse to move around the page (for some, this their only option). Drupal 8 has a JavaScript feature called TabbingManager that allows you to guide these users through the important page elements in a logical order. With its help, you can control where exactly the user can tab into. This is another important accessibility feature.
Better contrasts
Sufficient contrast, both in headings and regular text, is crucial for people with low vision or other visual impairments. In Drupal 8, the core themes have improved contrasts. Another great news is that the Olivero theme also follows the best design principles of high contrasts, saturated colors, and negative space to draw the eye to the most important things.
CSS Display Options
Drupal 8 introduces a set of CSS classes that allows you to control the nuances of how your content can be hidden in situations when it is needed. For example, it can be hidden from users but stay visible for screen-readers. These CSS classes include: (1) hidden, (2) visually hidden, (3) visually hidden, focusable, and (4) invisible.
Keyboard accessibility in the Media Library
Drupal 8 pays a lot of attention to keyboard accessibility for users who cannot hold a mouse or cannot see the screen properly. A brilliant example is keyboard accessibility in the Media Library introduced in D8.8 after the full Media Library’s integration with the CKEditor. Users can jump to the Library while creating or editing content, select media, and embed them in — all by using the keyboard only.
Contributed Drupal accessibility modules
There are plenty of useful add-on modules that are able to extend Drupal’s accessibility features even further.
Automatic Alternative Text
Screen readers cannot understand what is on an image unless you add ALT tags. Artificial intelligence software can help you with image recognition and automatic ALT generation. The Automatic Alternative Text module in D8 does this task using the Microsoft Azure Cognitive Services API. It generates image descriptions in human-readable language. This is especially useful on sites with a large number of images.
CKEditor Abbreviation
Making content easy to understand is part of the best web accessibility practices. The CKEditor Abbreviationmodule adds a button to CKEditor that lets you insert and edit abbreviations via the handy context menu on your D7 or D8 site.
Siteimprove
The Siteimprove module connects your Drupal 7 or Drupal 8 site to the Siteimprove intelligence platform. It analyzes the quality of your content, including accessibility issues, and gives you valuable improvement hints. The tool allows you to check your content pages and then recheck them when the discovered issues have been addressed to see that no further action is needed.
Style Switcher
The Style Switcher module in D7 and D8 allows themers to provide alternate stylesheets that can be added directly in the admin dashboard. Users can then choose in which style they want to view the page. The module provides this choice as a list of links in a block. It also uses cookies to provide returning users with the stylesheet they once selected.
High contrast
The Drupal 7 and Drupal 8 High contrast module allows your users to switch to the high-contrast version of the theme. They can do it by just pressing the Tab key once or twice, and the "Toggle high contrast" link will appear. When they click it or press Enter, they will enter the high contrast mode.
Text Resize
Enable your users with low eyesight or other visual problems to easily adjust the text size to the one that is comfortable for them. This is a key accessibility demand. The Text Resize module for D7 and D8 helps you here. It creates a block with two buttons to increase and decrease the font size. The block is built using the jQuery and the jQuery Cookie plugin and is themable.
Text Size
Here is another module that takes care of text size adjustment. The Text Size is a popular module in Drupal 7 and serves a similar mission. It provides convenient text size changing options and a zoom feature. The module is able to resize variable media objects, pixel images, and vector images.
Block ARIA Landmark Roles
Both Drupal 7 and Drupal 8 websites can enhance their use of the best WAI-ARIA practices for accessibility with the Block ARIA Landmark Roles. It adds elements to your block configuration forms that enable users to assign an ARIA landmark role or label to each block.
htmLawed
A clean HTML is always more screen reader friendly. The htmLawed Drupal module uses the htmLawed PHP library to make your HTML cleaner on your Drupal 7 or Drupal 8 site. The module works fast, is highly configurable, and covers all HTML elements.
HTML Purifier
Another module that takes care of the clean HTML for web accessibility is the HTML Purifier. It exists in Drupal 7 and 8. The module uses a standard-compliant HTML filter library — the HTML Purifier. It removes malicious code and helps you make your HTML comply with W3C's specifications.
Let us help you get the most with Drupal accessibility
It’s time to make your website accessible to all users. Our web agency specialists are ready to help you if you want to:
- install and configure Drupal accessibility modules
- migrate your site to the more accessible Drupal 8 (and prepare it for Drupal 9)
- move your site from another CMS to Drupal due to its accessibility features
- comprehensively test your website accessibility
- create any accessibility features that are needed for your site
Contact us and be accessible!
