Mastering Accessibility in Drupal - Essential Tips and Tools

Many of you have likely heard the term "accessibility" in the context of websites. In this article, we will focus on this specific area. However, accessibility is a much broader topic, encompassing various aspects of life, including public infrastructure such as ramps, lifts, or the installation of handrails in places like health facilities or schools.

Mastering Accessibility in Drupal

When it comes to websites, accessibility can be divided into two types:

  1. Code implementation - including appropriate tags.
  2. Editorial work - adding appropriate alternative texts to images or creating accessible resources such as PDF documents.

Why is Accessibility Important?

According to WHO, about 1.6 billion people have some form of disability, which constitutes around 16% of the world's population. Not all these individuals use or have access to the Internet, and their disabilities do not necessarily cause problems in using websites. For example, a person who lost a leg in an accident and now primarily uses a wheelchair does not face any issues using sites, whether on a desktop or mobile device. However, infrastructural conveniences can significantly impact their lives, as mentioned earlier. Nevertheless, it is essential to consider the high statistics the WHO provides.

European Union countries must implement directives passed by the European Parliament. One such directive, dated October 26, 2016, mandates the implementation of WCAG 2.1 guidelines at least at level AA. The public sector, among others, had to comply with these guidelines. On April 17, 2019, another directive was adopted, extending accessibility to certain private sector services:

  • Audiovisual media services,
  • Passenger transport services (road, air, rail, and water),
  • Retail banking, e-book distribution, and e-commerce services.

Each country can also have its guidelines and restrictions related to accessibility. 

Implementing accessibility guidelines from a programming perspective is not always optional. Depending on the sector the website operates in, it may have to include mechanisms that facilitate its use by people with disabilities, which unfortunately involves additional time and cost for the client.

Basic WCAG Guidelines

The official WCAG document contains many guidelines at various levels of compliance. These include levels A, AA, and AAA, where single A is the minimum requirement and the easiest to achieve. Below are some tips to consider when implementing some of them:

  1. Provide alternative text for non-text elements, like adding the alt tag for images.
  2. Ensure proper heading structure and HTML tag semantics.
  3. Implements skip links.
  4. Allow free tab navigation through active site elements while distinguishing the currently focused element, such as adding a border or outline. Ensure tab navigation can go from the start to the end of the page without getting stuck in a loop.
  5. Ensure a minimum contrast ratio of 4.5 to 1, or provide an alternative colour version.
  6. Maintain appropriate text spacing.
  7. Ensure adequate size for active elements, such as buttons, which should be at least 24px by 24px.
  8. Avoid animations that flash faster than three times per second.
  9. Avoid horizontal scrollbars on different resolutions, except for elements like tables.

These are just selected guidelines for maintaining a site. Following these tips make the site more accessible and SEO-friendly.

Accessibility in Drupal

Let’s examine what Drupal offers "out of the box" in this area.

  1. When adding images in the CMS, we must provide alternative text.
  2. Drupal has a thoughtful HTML structure and semantics for default templates, like page.html.twig.
  3. When configuring fields for Content Types, we can specify whether the Label should be visible to screen readers.
  4. Tabbing Manager is a JS script defining which elements can be navigated using the tab key.
  5. Announce is a JS script that creates a container with the aria-live attribute, essential for dynamically changing or loading content.
  6. Checkbox and radio fields are inside the fieldset tag.

Additionally, several modules further enhance accessibility, but this topic requires a separate article.

Essential Tools for Testing Accessibility

Website accessibility can be tested in several ways, most straightforwardly using appropriate tools. Below are some essential tools worth familiarising yourself with:

  1. Wave checks contrast on the site. It has an online version and a plugin.
  2. HTML 5 Outliner provides an outline of the document based on headings and other semantic tags.
  3. headingsMap is a browser extension similar to HTML 5 Outliner.
  4. Axe is a tool for detailed WCAG guideline analysis that is available as a browser extension.
  5. Snook.ca checks the contrast between two colours.
  6. Lighthouse is a Google Chrome extension that checks WCAG guidelines, performance, and SEO.
  7. Google Speed Insight is a site that runs based on the Lighthouse extension. It gives identical results, except you must provide the site URL.

These tools help identify basic errors but only solve some issues; they only generate information on automatable problems. They need to check if you can navigate the site using the tab key without getting stuck in a loop or if the alt text provided is appropriate.

How to Approach the Problem?

  • After finishing work on a website, use the above tools to ensure I haven’t missed anything. If errors occur, I correct them and repeat the check.
  • Pay attention to elements that use aria attributes, such as modals, sliders, tabs, and accordions.
  • Go through the WCAG guidelines checklist to ensure everything is considered.
  • Manually test the site by enlarging the browser window, increasing the font size, and displaying it at different widths.
  • Check the site’s behaviour in both vertical and horizontal orientations.

Even after thorough testing, nothing replaces real users who use screen readers or other assistive devices, as such tests provide tangible results. Unfortunately, it is not always feasible.

Conclusion

Implementing WCAG is a complex process, especially with complex components. However, we can aim to implement as many guidelines as possible within the client's budget. Using the Pareto principle, where 20% of the effort accounts for 80% of the results, ensures the site may not be perfect but good enough for people with disabilities to use. Remember, accessibility is a much broader topic than just related to the Web.

Are you interested in improving the accessibility of your Drupal website? Contact Us, and we will help you achieve your accessibility goals.