How to Improve WordPress Accessibility

How to Improve WordPress Accessibility

When setting up and running a website, most people may take times and energies for the improvement of the post content, page loading speed, search engine optimization and social sharing. However, only a few of them spare some efforts on the aspect of website accessibility. This time, therefore, we’d like to talk something about this part and introduce some tips helping you effectively improve WordPress accessibility.

In fact, based on Handbook of WordPress Accessibility, this term is a special web design technique that helps all the people easily enter, check, navigate through, understand and interact with your web content. To be frank, with the improved overall accessibility, you can achieve a great experience for all the readers visiting your website.

Leverage the Power of WP Accessibility Plugin

Firstly, we think you can leverage the WordPress plugin for the improvement of your website accessibility. Here, you can consider the WP Accessibility plugin, with which you can deal with various accessibility issues for your WordPress site using a number of useful features. In this case, you will not be forced to modify your website template and design coding with the complicated setup process along with the expert knowledge.

Now, you can have it installed and activated on your site. After that, you can move to its settings page by clicking Settings > WP Accessibility in the WordPress admin. Note that there are 5 main parts you should configure.

Remove the Title Attributes

This plugin allows you to easily remove all the globally added title attributes from your tag clouds and archive links. To be frank, the title attributes are useless for most of your readers. They simply carry the same value of the link texts. For instance, if the link text is “Google”, then, the title attribute is also “Google”.

This is awful for people read the context of a link twice. Actually, this is the main reason as why many people generally ignore them, and prefer to check your content via the meaningful anchor text indicating what the link is about clearly.

Remove the Title Attributes

Add the Skiplinks

In fact, the skiplinks are really useful for people looking to use the keyboard for navigating your webpages and for some visually impaired readers who need the screen readers to check your web content. With it, people can easily navigate from the beginning of the whole page to some other sections of the same webpage.

Skiplinks

In this case, this plugin allows you to enable the skiplinks on your site and make them always visible on the top of your pages. In addition, you can choose to skip to your main content container, main navigation container, HTML sitemap and the specific link. Here, you only need to enter their ID or URL correctly.

Add the Skiplinks

Enable Some Miscellaneous Settings for Accessibility

There is a list of miscellaneous settings for you to configure to better improve the WordPress accessibility. By default, this plugin enables three settings as discussed in below. Personally, unless you are in some special situations, you’d better not to change the default settings.

  • Generally, if the links inserted into your content need to be opened in a new window, this may break your site flow, affect the reading momentum and disorient your visitors. Therefore, you’d better remove the target attribute from each link.
  • If people submit an empty search query, WordPress will return the main index that might be confusing. In this case, you’d better change this default setting by forcing the search error on all the empty submissions. This way, WordPress will return in the same way as the search without any result.
  • The tabindex now always causes some problems for website accessibility, so you’d better remove this feature to make the keyboard navigation more predictable and linear.

In addition to these recommended settings, you can also decide some others based on your real situations. For instance, you can choose to add the text direction and site language for improving the comprehension of your content texts, add the post titles into the “Continue Reading” links, display the underline for all the links, remove the title attributions for all the images and many more.

Miscellaneous Settings for Accessibility

Decide the Toolbar Settings

There is an accessibility toolbar offered by this plugin. We highly recommend you to display it on your site so that your content readers can easily adjust the font size and color contrast. It is pretty helpful if your template comes with the small fonts or the low contrast issues that cause troubles for post reading. Note that the toolbar will be showcased in the left side of the screen by default.

Accessibility Toolbar

In addition, you can decide the font size of this special toolbar, determine to use the toolbar as a widget or a shortcode, display a gray-scale toggle and many other minor settings.

Toolbar Settings

Test the Color Contrast

As the color contrast of your webpage has a huge impact on the accessibility and readability of your web content, this plugin offers a special tester to check whether the colors of your foreground and background pass the luminosity testing. If not, you need to modify accordingly.

Test the Color Contrast

Some Other Tips for Accessibility Improvement

In addition to the plugin utilization, you can also carry out some manual optimizations to improve your website accessibility. We have listed some useful tips in the following.

  • Utilize the clean and solid HTML structure with the proper alt tags, header tags, meta descriptions and bulleted lists.
  • Make your site 100% accessible via the keyboard, especially for your buttons and menus.
  • Create a simplified website version that omits unnecessary CSS.
  • Remove the time-limited feature for all your displayed media so that people can stop and replay them freely.
  • Choose a fully accessible website theme.
  • Headings need to be useful enough to indicate the sub-sections of your page content but not for some visual effects.
  • Only one H1 tag is not enough.
  • Instead of using the “Read More” for your links, you can consider the text of “Continue Reading [Post Title]”.