Tools to make your website accessible to all users

The World Wide Web without barriers could be an amazing place for everyone. What about your website — does it follow web accessibility guidelines?

Our web team respects accessibility and is always ready to help you make your website accessible. We also love to share tips about creating accessible content and making your images accessible in your team’s everyday content editing practices.

This post will sum up everything you wanted to know about accessibility (a11y for short): what it means to make your website accessible, what accessibility tools are available based on your site’s CMS (Drupal modules and WordPress plugins), and much more.

What does it mean for a website to be accessible?

An accessible website is one that is available to all users regardless of their visual, auditory, cognitive or motor disabilities. It is friendly in every aspect — from color contrast to keyboard navigation.

No user is left behind — the site’s content and UI are easy to comprehend and control in various ways including via assistive technologies.

Why is accessibility important for a website?

• Website accessibility (a11y) enhances your brand’s reputation because it shows your attitude. According to the Centers for Disease Control and Prevention, roughly one in four adults in the US has some form of impairment. Most people have a friend or acquaintance with a disability, and they appreciate your willingness to follow the guidelines.
• Make your website accessible and stay protected against possible legal proceedings. The Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities. It states that everyone should be provided with equal access and opportunities. There are an increasing number of lawsuits against businesses with inaccessible websites.
• An accessible site gets a much wider reach. To estimate the figures, consider the above mentioned quarter of the US population and add users with situational issues. These may include broken arms, tired eyes, or even just the need to use your site’s content in a non-native language. In all these cases, users will love your accessible site.
• By making your website accessible you boost your SEO. Being ready for assistive tools is in many ways similar to being ready for search engines. ALT tags describing the images, clear meta descriptions, video captions, a clear menu hierarchy, and other a11y practices are good SEO practices as well.

How do I add accessibility to my website?

To make your website accessible, you should follow the WCAG (Web Content Accessibility Guidelines). They are the international web standards embracing every aspect of your site’s interaction with users who have an impairment.

The WCAG has been brought to us by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). They are based on four key principles:

• Content is perceivable
• Interface elements are operable
• Content and controls are understandable
• Content is robust enough

WAI has also developed ARIA (Accessible Rich Internet Applications Suite). This is a suite of attributes that make interfaces, especially rich and interactive ones, more understandable to assistive devices. WAI-ARIA attributes (roles, states, and properties) can be added to the HTML markup.

Considering all the above, here are some of the key things required from you to make your website accessible:

• text equivalents for non-text content (ALT tags for images, captions for videos, transcripts for audios, etc.)
• the proper HTML markup (with the use of WAI-ARIA where necessary)
• logical layout
• keyboard controls
• clear field labels
• informative error messages
• clear and simple language
• informative link texts
• sufficient color contrasts
• text resizability
• adjustable audio volume
• no auto-playing media
• more time to complete regular actions

and much more.

Tools to make your Drupal or WordPress website accessible

If your site is built with a CMS, you are in luck . It should already have built-in or add-on plugins to make your website accessible. They are easily installed and configured on your website and take care of various a11y aspects.

Since our agency’s main expertise is Drupal and WordPress, we will list a bunch of helpful extensions for both these CMSs — Drupal modules and WordPress plugins that make your website more inclusive and compliant.

Drupal accessibility modules

Automatic Alternative Text

The Automatic Alternative Text module generates alternate texts to describe images using the Microsoft Azure Cognitive Services API. This is an example of how artificial intelligence helps you make your website accessible.

CKEditor Accessibility Checker

It’s important that you make your content accessible in everyday editing practices. The CKEditor Accessibility Checker module inspects the content created in Drupal content editor and immediately resolves the issues found. The module may soon become part of the Drupal core.

Block ARIA Landmark Roles

The use of WAI-ARIA in your site’s markup becomes more advanced with the Block ARIA Landmark Roles Drupal module. Every block in your site’s layout can be assigned an ARIA landmark role and/or ARIA labels directly in the block configuration form.

High contrast

The High contrast module enables users to switch between the active theme on your Drupal site and a high contrast version of the theme. This will make your website more accessible to users with eyesight problems.

Text Resize

Since adjustable text size is one of the requirements to make your website accessible, the Text Resize module is very helpful. It provides website visitors with a block that has two buttons to make the font size larger or smaller.

Text Size (Drupal 7 only)

The Text Size module serves a similar mission. It provides an adjustable text size changer or a zoom feature. Though its zoom capabilities are similar to text zoom in Firefox, the module can also work with variable media objects, pixel images, and vector images.

htmLawed

The proper HTML markup is essential in making your website accessible. The htmLawed Drupal module gives you highly customizable control of your HTML. It uses the htmLawed PHP library to restrict and purify the code.

WordPress accessibility plugins

WP Accessibility

The WP Accessibility is a multi-functional plugin to help you make your website accessible. Its wide range of features includes enabling skip links, enforcing ALT tags on images, adding language and text direction attributes, providing a font size and color contrast toolbar and more.

WP Accessibility Helper (WAH)

Here is another multipurpose plugin with basic a11y tools — WP Accessibility Helper (WAH). It adds a user-friendly accessibility toolbar to your site. Among its key features are a skip links menu, adjustable fonts and color contrasts, accessibility error scans and more.

Accessibility by UserWay

The UserWay plugin provides a smoother browsing experience on your website, with particular attention to keyboard navigation. It performs smart modifications to your site’s elements in order to make them more compliant with the a11y requirements.

Accessibility Widget

The Accessibility Widget plugin adds a sidebar widget to allow users to easily make the text size larger or smaller in your WordPress website. It offers the “Small,” “Medium” and “Large” text options.

WCAG 2.0 form fields for Gravity Forms

The WCAG 2.0 form fields for Gravity Forms plugin makes the forms created by the famous Gravity Forms builder more accessible on your site. It wraps form fields in a fieldset, adds ARIA attributes, gives on-page error messages with the number of errors and links to them, etc.

Screen Reader WCAG Accessibility Tools

Here is a plugin that makes your website accessible by adding a text-to-speech engine to it. The Screen Reader WCAG Accessibility Tools plugin can read the text in 50+ languages. However, the free version of the plugin is limited to 100 characters.

WP Accessibility Tools & Missing Alt Text Finder

Here is a plugin that helps you make your website accessible in a number of ways. The WP Accessibility Tools & Missing Alt Text Finder offers a missing alt text finder, contrast ratio checker, compliance checklist, automated accessibility audit, and more.

SOGO Accessibility

The SOGO Accessibility plugin for WordPress scans your website’s code and adds the accessibility support automatically. It uses JS and CSS to improve or enable accessibility features.

Our experts are ready to make your website accessible

Hopefully, this article has provided a good review of the basic accessibility principles, requirements, and tools based on your CMS.

The above listed Drupal modules and WordPress plugins are just a few of the many. Our web development team can select or create from scratch the ones that will suit your website best. Let us make your website accessible in every way!