The World Wide Web has been around for over 30 years— but the standardization of the fundamentals of web development is a more recent phenomenon. One of these fundamentals is website accessibility. 

It’s far easier to design an accessible website if your focus is on accessibility from the get-go, but this is a luxury many of us can’t afford. It’s likely that you already have a website on your hands, and, if you’re reading this, you’re probably wondering how you can test your site’s accessibility so you can make changes accordingly.

Here’s a straightforward guide on testing your Drupal site’s accessibility.

Manual Accessibility Assessments

Before you dive into automated testing solutions, it’s always good to go through your website manually to identify pitfalls and barriers to accessibility. This is an excellent way to develop and refine your “eye for accessibility”.

Validate your Code

If you want your website to render correctly across devices and work well with assistive technologies, the underlying code (HTML and CSS) must comply with the most recent web standards.

Here are a few things to look out for where HTML is concerned.

• Closing tags: One of the most common causes for invalid code.
• Attributes: The W3C (World Wide Web Consortium) recommends quoting all HTML attributes, although it’s not technically a requirement.
• Semantic markup: Don’t put content into a <div> when it actually belongs in a <p>.

You can use the World Wide Consortium’s markup validation service and CSS validation service to verify your site’s HTML and CSS markup.

Test Keyboard Accessibility

Most website designs primarily cater to users who navigate using a cursor; however, web accessibility standards now require you to make accommodations for all users including those with disabilities (visual impairments, auditory impairments, difficulty holding a mouse, and so on). Therefore, it’s crucial to ensure that users browsing with their keyboard or with a screen reader don’t have trouble navigating your website.

Here are some things to consider:

• Is there a “skip to main content” link that provides users access to the most important part of the page directly? (This is very helpful for keyboard-only users.)
• Is highlight focus enabled to provide visual feedback with respect to where a user is on the page? (Pro-tip: Ensure that all focusable elements are interactive.)
• Test all hoverable elements to ensure that the information revealed via mouseover is available to keyboard-only users too.
• Tab through every page to ensure that there aren’t any “keyboard traps” or dead ends.
• Don’t forget to test tabbing in both directions! Shift+Tab is the hotkey for tabbing backwards.
• Pay close attention to the flow. If your page’s visual layout is in a different order than the DOM (Document Object Model), the keyboard browsing experience may be disjointed and confusing.

Test Screen Reader Accessibility

Screen readers like NVDA (Windows) and VoiceOver (MacOS) enable users with visual impairments to navigate through websites via sound by reading aloud the contents of each page. A 2019 survey by WebAim shows that 79.9% of screen reader users with disabilities rely solely on sound to navigate.

The best way to ensure that the screen reader experience on your website is smooth and seamless is to download a screen reader, run the application, and navigate through your site yourself. But before you do that, here are some basics to cover:

• Do all images (excluding ones that are purely decorative) have alt text?
• Does link text make sense without any context? (Pro-tip: frequently used labels like “read more” can be too ambiguous for screen reader users. You can use the Views module to make the “link to content” more accessible by adding text which the browser will display as a tooltip when the user hovers over the link and the screen reader will read out loud.)
• Are dynamic content changes (these occur without reloading the page, such as notifications or search result filtering) accessible to those who can’t see them? (Hint: You can use the Drupal.Announce() API, which utilizes ARIA live regions to signal to screen readers that a dynamic content change must be announced.)

This Web AIM article outlines how you can use CSS to make content that’s “visible” to screen reader users while it remains invisible to sighted users.

Test Color Contrast Ratio

Text color needs to have a contrast ratio of at least 4.5:1 with the background color to meet WCAG 2.1 standards. There are several tools you can use to test your site’s color contrast ratio. Here are a few:

• WebAIM: Contrast Checker uses two inputs: a foreground and a background color and outputs their contrast ratio. It tests the inputs against WCAG standards for both normal and large text (the smaller the text, the higher the contrast needs to be) and allows you to adjust lightness.
• Colour Contrast Checker – Chrome Web Store (google.com) is similar to the previous one, is easy-to-use and provides additional features such as options to adjust hue and saturation. It’s available as a chrome extension.
• Kontrast – WCAG Contrast Checker – Chrome Web Store (google.com) is another Chrome extension that allows you to check and adjust the contrast of any element you select on a page against WCAG 2.1 guidelines, and comes with other useful features too.

Ensure that your content is complete and usable even with CSS and JavaScript turned off

There are all sorts of reasons why users may not be able to access JavaScript elements. This tweet from Jake Archibald offers us a friendly reminder:

In any case, non-script users exist, and it’s your job to make sure they get a coherent experience when they access your website. To disable JavaScript in your browser to start testing, you can use the option in the dev tools menu, or install the Toggle JavaScript Chrome extension for one-click toggling.

Chris Ashton at Smashing Magazine wrote an in-depth article titled I Used The Web For A Day With JavaScript Turned Off, and we strongly suggest checking it out to understand how non-script users experience the web.

Similarly, make sure that your website renders properly without CSS styling enabled. This is especially important considering some people use their own custom stylesheets on their browser; try to use plain and proper semantic HTML so that pages retain their logical structure regardless of style being used.

Use WAI-ARIA where appropriate

You can use WAI-ARIA markup in some situations to further improve accessibility. For example:

• ARIA landmarks help make navigation easier for screen reader users
• Adding ARIA attributes to HTML forms may improve their accessibility
• ARIA live regions help screen readers identify dynamic changes in content
• The aria-hidden attribute can conceal things from screen readers while displaying them visually on-screen

General Accessibility Testing Tools

Most of the tools mentioned thus far have very precise functions; however, there also exist more general testing tools which can check entire web pages and even sites for various accessibility issues. There are many such tools, and they can save you a ton of time – but you must fully understand what each of them is for if you want to get the most out of them. Running a full accessibility audit without any prior knowledge or preparation can produce overwhelming results that are difficult to process and prioritize.

These are two of our favorite accessibility testing tools that you can run directly from your browser.

Axe browser extension

Here’s how you can use Axe to test a page’s accessibility.

1. Download and install Axe for Firefox or Chrome
2. Navigate to the page you want to inspect
3. Open your browser’s developer console.
   • Chrome: Cmd + Shift + I (Mac) / F12 (Windows)
   • Firefox: Cmd + Option + K (Mac) / Ctrl + Shift + K (Windows)
4. Right-click the Axe tab, and then the Analyze button in the left-hand column

Once the tool finishes analyzing the page, you’ll see a list of issues on your screen (if you don’t, then congratulations! But there will most likely be a few things you’ll need to fix). You can click on any issue to access more details, including its level of impact on accessibility (Low to High) and potential workarounds and solutions. Use the Toggle Highlight feature to make issues more visible.

Tota11y Bookmarklet

This nifty tool aims to make accessibility testing more intuitive by providing easy-to-understand visualizations of accessibility issues and annotations on how to fix them. To try it out, scroll down to the bottom of this page and drag the tota11y icon onto your bookmark bar.

To run the tool on any web page, just click on the bookmarklet. This will toggle a button on the bottom-left corner of the page which will expand into a menu. Then, you can select whatever you want to focus on, and the tool will display any relevant issues along with details as to where they are on the page, and how you can fix them.

Drupal Modules for Accessibility

If Drupal’s built-in accessibility features aren’t enough, you can also further develop your website’s accessibility using a variety of user-contributed modules. Some of these are listed below:

• Automatic Alternative Text uses AI – via the Azure Cognitive Services API – to automatically generate alt text for your images
• Block ARIA Landmark Roles enables you to assign ARIA landmark roles to elements of the block class
• Fluidproject UI Options allows your site’s users to customize accessibility settings themselves, such as text size and line spacing, and saves their preferences using cookies
• High Contrast (in beta) enables site users to toggle between regular and high contrast modes

Here’s a more comprehensive list of accessibility-focused Drupal modules.

Document your process and apply the knowledge you gain to your next project

As you move through the various steps of testing your site’s accessibility, make sure you take notes of your findings and modifications. This will help you familiarize yourself with various accessibility concepts that you can incorporate in future web projects.

You might even want to consider converting your notes into a comprehensive accessibility policy for your organization, which you can then publish on your site as a statement of your commitment to inclusive web experiences.

Still unsure of where to start? Want to update your accessibility know-how? Need some help crafting an accessibility policy for your organization? At Mpire Solutions, accessibility is our top priority. Get in touch with us for personalized assistance!