Hosting Tutorial & Guide

How to Make Your Website More Accessible – Tips and Advice

updated on Aug 07, 2016
How to Make Your Website More Accessible – Tips and Advice Many bloggers haven't paid enough attention to their website accessibility as they usually put more emphasis on things like loading speed, image optimization, layouts, and the website content.

It is true that accessibility is not among the top things to consider when building a website. However, if you want to optimize your website and make it easy to be accessed and read by as many people as possible including the disabilities, you should think about improving the accessibility seriously.

The improvement of accessibility sometimes involves the customization or change of your theme. But if you have already been using a theme with clean code, you only need to make some small changes to your site. You may not imagine how small stuff can bring a difference and make your website more credible.

Now let's start the discussion with the accessibility guidelines.

Understand the Web Content Accessibility Guidelines

Web Content Accessibility Guidelines (WCAG) define the several important rules that webmasters can follow to make websites and web content more accessible and usable to the most possible people. They not only help you improve your websites to meet the needs of disabilities, but also enable you to improve the usability for all general users.

At present, WCAG is on the version 2.0. It includes the following four guidelines.
  • Perceivable – The information on a website must be presented to users in a way that they can perceive.
  • Operable – The navigation of a website should work in multiple circumstances, for example, from a keyboard.
  • Understandable – All information and the navigation on a site must be easily read and understood.
  • Robust – Website content must be readable and usable to different user agents, such as the assistive technologies.
Web Content Accessibility Guidelines

Tips to Make Your Website More Accessible

Based on the accessibility principles and many developers' advice, we have worked out several tips that could help bring your website's accessibility to the next level. These tips are effective, while most of them are easy to apply.

Make sure your website uses clean HTML

One of the basics of good website accessibility is the clean HTML. A solid HTML structure should include the proper use of the header tags, title tags, meta descriptions, alt tags, unique IDs, bulleted lists, and so on. By optimizing the use of these elements, your visitors will be able to know where they can find the information they need. Besides, you are making your content more robust for assistive technologies like screen readers.

Besides, you may also need a clean sitemap which helps screen readers navigate your website quickly. An HTML sitemap, in this case, is recommended.

In addition, to guarantee the accessibility of your website to the largest extent, you should avoid using fancy HTML which looks great but is hard to understand.

Use Clean HTML

Provide text alternatives for all images, graphics and videos

For any non-text content presented to your visitors, such as the images, audios, videos and graphics, you have to provide text alternatives that can serve the equivalent purposes. For almost any type of website, you are encouraged to use multimedia items, but without adequate alternatives and descriptions, these items might not be readable to some of your visitors as well as the search engines.

A special thing to pay attention is that for the time-based media like videos and audios, you should support them with captions or text transcripts. Sign language is also suggested for audios.

Offer a high contrast color scheme

To make your content and design easy to see for all visitors, you can add a high contrast option to your website. This enables the visually impaired visitors to have a good experience of reading your content.

Of course, you can use a website theme with a high contrast color scheme from the very beginning. However, if you are not using such a theme, there is no need to worry, because you can simply offer an additional color option. With such an option, your website visitors are able to turn on or turn off the high contrast color scheme with a single click.

High Contrast Option

Also, if you are willing to, you can even offer a style-free version for your website which eliminates most CSS while not sacrificing any layout, navigation elements or content. If you are fond of this option, you'd better seek the help from a developer.

Offer text resizing capabilities

Some of your visitors, such as the elders, will need larger text in order to guarantee effective reading. To make your website more accessible to this type of readers, you can offer a text resizing option that allows users to resize the texts to 200%. The bottom line of doing so is not to compromise your website's functions.

Improve the keyboard support

Enabling keyboard accessibility to your website is an important point to make sure your website is operable. With good keyboard support, your visitors will be able to perform any task by using a keyboard.

When adding the function, you have to eliminate the potential keyboard traps, so that visitors can navigate your website with a keyboard only. Also, you can create access keys to make the navigation even easier.

Improve Keyboard Support

Extend or remove the time limits

Sometimes you may include time-sensitive content like a test, a quiz, or an auction. For such content, you have to offer alternatives to the disabled. And for the multimedia files, you will need to allow users to pause or replay them at any time.

Any time limit on your website should come with the possibilities to be turned off or extended. If you offer auto-scroll of any content, you'd better offer an option to turn off the function, or provide the alternative of non-moving content. This ensures that readers have enough time to read your content.

Get rid of seizures

This means you should be careful about the use of the flashing content like slideshows and animated GIFs although they look fancy. To guarantee the maximum accessibility, you'd better not use flashes as the images will trigger seizures. In the case that you have to use flashing elements, make sure that they don't flash for over three times in a second.

Bonus Tip for WordPress Sites – Make Use of WP Accessibility Plugin

If your website is based on WordPress, it could be easy to apply most of the tips mentioned above because the talented developers have made them available in various plugins. And in the case that you take your website accessibility as a whole and want to make an overall yet simple improvement, you can install a plugin named WP Accessibility.

WP Accessibility is developed to help users address most of the common accessibility issues in WordPress without acquiring much expert knowledge, so this plugin is suitable for most WordPress users. It comes with many features which enable you to:
  • Add skip links.
  • Add an Accessibility toolbar to your website, which allows your visitors to adjust the font size and toggle on/off high contrast with ease.
  • Use the toolbar in a widget.
  • Choose color contrasts and test them lively.
  • Add long descriptions to images.
The feature list is quite long, and you can check the details carefully to see whether there are more features you need.

WP Accessibility

When the plugin is activated through the WordPress dashboard, you can configure its settings and improve your website's accessibility in Settings > WP Accessibility. For all the options on the settings page, look at each of them carefully and try to get a good understanding before checking the ones you need.

No coding or direct theme customizations are required when using the plugin.

Set Up WP Accessibility to Make Your Website More Accessible