WordPress

Make a WordPress Site Accessible for Vision Impairment and Other Disabilities

This tutorial explains making your WordPress website accessible for visitors suffering vision impairment or other disabilities.

Reading this tutorial will teach you how to easily expose your website to visitors with vision impairment and other disabilities. The instructions explained in this article won’t damage your SEO performance and will even positively impact it.

I will use a plugin named WP Accessibility for this article, but you can choose any plugin you want. In this exceptional case, the theoretical information you will acquire is more important than the practical steps.

All steps explained in this tutorial include screenshots making it easy for new WordPress users to follow them.

Important aspects when turning your WordPress site accessible for disabled visitors

Standards for web accessibility are defined in WCAG (Web Content Accessibility Guidelines). These guidelines aim to turn websites accessible according to the following criteria:

  • Sense Perceivable: Accessible websites must allow visitors to perceive the content through their senses: vision impairment visitors’ visibility options and hearing for blind visitors.
  • Accessibility tools compatibility: Accessibility also requires the website to be compatible with accessibility tools used by disabled visitors.
  • Content difficulty: Content can be optimized for cognitive capability reduced visitors.
  • Technology: Accessible websites also are optimized for all device types and unstable low-quality connections.

WCAG defines three accessibility levels: A, AA, and AAA. Where A is the lowest optimization for accessibility, AA is the medium optimization level, and AAA is the maximum optimization level for accessibility.

Some of the important points when making your site accessible are:

  • ALT Attributes: Despite the ALT attributes being used by SEO experts to increase traffic, this attribute was originally developed to helpblind users to learn the purpose of an image. The ALT attribute contains information for reading software to communicate to blind users the function or description of a picture.
  • Skip links: Skip links are links at the beginning of a website, allowing the user to quickly bypass the content and access relevant content. They are very useful for users using a screen reader or without a mouse.
  • Color contrast: There are different levels of blindness; for some of them, keeping a high contrast level is critical. The latest WCAG guidelines require a contrast ratio of at least 3:1 for media and user interface. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text. For large texts, it requires a ratio of 5:1.
  • Software compatibility: This means your site must be compatible with assistive software.
  • Forms: Compatibilizing forms is an important aspect when making your site accessible. This includes excluding irrelevant data, specific labels to make your visitors understand each field, validating input, and fixing mistakes without filling the form from 0.

Make a WordPress site accessible for vision impairment and other disabilities

This practical section explains how to make your WordPress accessible for disabilities.

To begin, login to your WordPress dashboard, and on the left menu, press the Plugins option, and then press Add New on the displayed submenu as shown in the screenshot below (Plugins>Add New).

On the plugins installation screen, find the keyword search box shown in the image below and type “Accessibility”. Once the available plugins are listed, press the Install Now button for the plugin named WP Accessibility.

Once the plugin is installed, enable it by pressing the Activate button.

After enabling the plugin, access its configuration options by moving your mouse pointer over Settings on the dashboard left menu and WP Accessibility on the displayed submenu (Settings>WP Accessibility).

Keep reading below to configure each accessibility aspect of this plugin.

Configuring WP Accessibility (Step 1): Skip Links

After opening the WP Accessibility plugin settings, first, you will see an option to add skip links.

Skip links are strategically located links that allow users who use screen readers or rely on a keyboard (Without a mouse) to access the website’s most relevant content quickly by skipping non-relevant or less relevant content. For example, a blind user using a screen reader or a mobility disabled user using a keyboard without a mouse can access the website’s main content by skipping irrelevant information by simply accessing a strategically located link.

The first section allows you to enable skip links, so your users can access relevant information bypassing the non-relevant content.

Enable it, and define the link target by the ID you can find on your page’s code.

The option “Styles for skiplinks when they have focus” is useful to add CSS styles when a tab and focus are placed on the skip links. In the option “Styles for skip links without focus” you can add CSS styles when the focus isn’t placed on the skiplinks.

After configuring your skip links settings, press the Update Skiplink Settings button.

Below you can configure your toolbars. You can add an accessibility toolbar for users to adjust their fontsize and contrast; also, you can exclude some items from this toolbar. Add an ID attribute to your toolbar specifying its location within your site. You also can hide the toolbar depending on the screen size or place it on the right part of your screen, among other intuitive options. Once you finish, press the Update Toolbar Settings button.

In the Miscellaneous Accessibility Settings section, you can define your site language and useful buttons (Like “read more”). You also can automatically label input forms for users to identify them. Additional options allow you to remove certain attributes, disable fullscreen, and more; all of them are intuitive. Remember to update your settings by pressing the Update Miscellaneous Settings button when finishing.

Scrolling down, you can remove title attributes from tag clouds.

Finally, you can test your website’s color contrast to know if it’s friendly to visitors with vision impairment.

That’s all to make your website accessible for users with vision impairment and other disabilities, preventing them from using a mouse.

Conclusion

Making your website accessible to users with disabilities is very important because of the humanism behind this and because you may be missing important users for your business, your cause, or your blog.

As you can see, any WordPress-level user can make his website accessible for all kinds of users by following a few steps described above. There are a lot of alternatives to the plugin explained in this article; you can choose any of them. Remember, when using this plugin (WP Accessibility) you will need to save changes for every section you edit. Planning your website for all users may have a great impact on your site.

Thank you for reading this article. Keep following Linux Hint for more WordPress high-quality tutorials.

About the author

David Adams

David Adams is a System Admin and writer that is focused on open source technologies, security software, and computer systems.