Category: Advanced

Let’s say you have a great site, awesome graphics, smooth transitions and an ever increasing readership. You should be really happy! Well, there is one thing your site might be missing out on- and that is accessibility.

Web accessibility aims to provide users of all abilities and disabilities access to the same information and features at minimal efforts on their parts. For instance, when a blind user accesses your website with the help to text-to-speech software or text-to-brailled hardware, you should provide an alt text for images for obvious reasons. Some of the disabilities are listed below:

• Motor/Mobility: Some inabilities in movement which usually lead to slow movement or lack of movement, due to which a user is unable to properly control a mouse.

• Auditory: Deafness improper hearing abilities.

• Seizures: Photoepileptic seizures can caused by flashing effects in your website.

Blind users use text-to-speech software (or screen readers). Users with low vision depend on you to make a site with good contrast so that they can read its content. Users with restricted mobility depend on only the keyboard for navigation and those with hearing issues can’t interpret sounds. Anything which involves flashing or sudden effects must have a proper warning before they go off. There are ways in which we can tackle each of these issues and help make your site friendly for all types of users.

Considering a very low number of people with disabilities would visit your site, why then should you make it accessible? The social aspects of web accessibility are well documented in this document published by w3c. Well, if you are not in the mood for social work, there is still an incentive for you to follow accessibility guidelines. An increasing number of countries are passing legislations which require websites to be accessible to people with disabilities. For instance, a blind gentleman from Australia won a court case against the committee for the Sydney Olympic Games as they had failed to make their official website adequately accessible to blind users.

Here are a few guidelines for making your website accessible.

Label your images with an alt text:

For obvious reasons, images are not accessible. To make them accessible you must provide an alt text for images. In HTML, you add it as an attribute. For example,

<img src=”wordpress.png” alt=”Wordpress Logo” />

Fortunately, WordPress goes a step forward and gives you an option for alt text when you add media as shown in the screenshot below.

That being said, please note that a screen reader would read it out once you hover over it, or the keyboard has that image under focus. So, you should provide a very concise alt text which explains the image well. In this case, this is a logo of a popular open source screen reader NVDA. Excessive alt text can get irritating to the user too, hence that must be taken care of as well.

Note: All HTML and CSS changes that I would describe need to be done in your themes. To check your current active theme, go to WP Admin > Appearance > Themes and check the theme which is active.

In this example, the active theme is “Twenty Twelve” and the theme directory is wordpress\wp-content\themes\twentytwelve.

Use Headings Properly:

Headings and subheadings are used to organize content in an HTML page. HTML provides headings from <h1> to <h6> with decreasing sizes. However, many modern day websites ignore this fact and show the headings by using CSS properties in place of using the inbuilt HTML tags. In the latter case, it is easy for the screen readers to decipher the content and read it out and the native HTML tags must be used as much as possible.

Images used to represent text:

Many times, partly for decorative purposes and partly because of their laziness, web developers crop out images from a design and put it in their HTML. That is a strict NO-NO. Not only does it take a relatively longer time to load, but it totally cuts screen readers out of the picture as the webpage looks like a bunch of images to them! Take for example the header image in this page. If you look closely, it is a huge banner image which is not accessible at all!

Inaccessible Menus:

Certain drop down menus which display text when you hover over them. In most cases, the drop downs are impossible to reciprocate for keyboard-only users and also touchscreens. One solution is to avoid dropdowns altogether and use proper breadcrumb navigation. However, there are new open source initiatives (like the list described here) which have been developed keeping accessibility in mind.

If you are not competent enough to change templates yourself, don’t be disheartened; there are open source alternatives to this too. All you need to do is install the plug-in!

If you need an idea of what access keys in menus do, open any page in Facebook and press “Alt + 1”. You would have clicked the Facebook logo on the top left of the screen using your keyboard. In websites with a lot of menu items, such keyboard alt keys are provided for the links. Head over to the website of this plugin to install it. Alternately, you can search for ‘Access Keys’  in Plugins > Add New. Activate it after installation. This plugin adds access keys to categories and pagination links.

Navigation Links:

Imagine you are a blind user. You use the keyboard to tab through the menu items and then reach the posts. You want to continue reading a long post and click continue reading. In the new page that opens, you have to go through the menu yet again to reach the part of the website you want. That can be irritating at times.

This can be removed by adding a “Jump to Content” link as the very first link in your website. This link (<a href=”#content”></a> assuming the div with the main content as an id ‘content’) would shift the focus to the main content of the page. Make sure it is not visible to the normal user by removing any text in it. However, it would still be active if you tab through the website with your keyboard.

You can add more navigation links like ‘Jump to Search Bar’ or ‘Jump to Navigation’.

Specify language:

If your webpage contains text in multiple languages, it becomes difficult for the user as the screen reader might read one language using the pronunciation rules of the other. For example, if your webpage is in English you should specify in the beginning:

<html lang=”en”> … </html>

For a paragraph containing text in French, you must specify:

<p lang=”fr”> … </p>

Taking care of ARIA compliance:

As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), describes a way to make Web content and Web applications more accessible. ARIA roles have been defined by W3C to assist screen readers to read out content with more precision. These roles are designed for specific parts of the page and are supported by most screen readers now. ARIA compliance is a huge topic and you can read the official W3C documentation for further implementation.

Using proper Javascript:

Even with all the guidelines I have mentioned, sometimes the web developer must be aware of the problems that can lead to accessibility issues. It is very common to overlook accessibility during the process of adding javascript functionality. Take for example the use of javascript alerts. Alerts don’t shift the focus of the page making it impossible for blind users to understand there has been a change, and halt javascript execution totally until they are clicked.

Another common issue is the change is the updating of a page through AJAX without changing the focus, it is again impossible for blind users to know that anything has changed in the page. Make sure you change the focus when you have updated something.

Checking the Accessibility of your website:

After you have implemented all the things that have been mentioned here, you would naturally want to test how far you have been been successful in making your website accessible to all! Here are a list of tools which would help you.

IDI* Web Accessibility Checker(http://achecker.ca/checker/index.php):

This accessibility checker is very versatile in a way that it allows you to either give a link to your website, upload an HTML file or even paste HTML markup for validation. There are many advanced options before you submit and it comes up with a very detailed report as well.

Check color contrast online (http://www.checkmycolours.com/):

You can give a link to your website and it would give you a list of the elements, a model display of the text with its background and how good the color contrast is.

Using a screen reader:

You can head over to the NVDA site to download an open source screen reader to test your website. Try to switch off display and tab over the site using a screen reader to see if you can manage the navigation.

Even after following all the guidelines mentioned here, it is definitely not possible to make a website 100% accessible, but you can definitely be sure that you site is more accessible than most other websites out there. Also, people with disabilities would be better equipped to naviagte through your site and use your services.

About the author: The author has worked on a UI Redesign project under the Google Summer of Code with Inclusive Design Institute (which provided the accessibility checker mentioned above) on their tool ATutor, which greatly emphasizes on global accessibility standards. The project involved AJAXification of the interface and modifying the user interface.