Selecteer een pagina

Website accessibility, WordPress and the web in general.

In collaboration with the tomato network, I created the new website for the non-profit organization Transkript. Transkript is a production house based in Zellik. Their core business consists of audiobooks, audiomagazines, braille print and schoolbooks.

Transkript works for people with a disability, and that requires a very accessible website.The accessibility for these people is very important for the experience of the company and overall the experience of the website.

To ensure the quality of the website, the Anysurfer logo (quality label for accessible websites) had to be obtained. To obtain this logo, the website must meet specific standards (Web Accessibility Guidelines 2.0 level A).

The question is, what does it take to make your website accessible? Honestly, more than I expected. You will find some examples below.

 

Keyboard accessibility

First of all, the website needs to be accessible through the keyboard.

People with limited vision use their keyboard to access everything on the website. That means everything you can click on with your mouse, must be accessible via the keyboard. That includes links, form fields, menus and so on. It is also very important to simulate the experience that these people may have. That means that you have to test it yourself. From my own experience there are many little things you can do to accomplish a better overall experience.

 

Links

Accessible (and meaningful) links are another example to enhance your visitors’experience. Meaningful links are very important for text to speech readers, or people who navigate with their keyboard. An example of a meaningful link is: ‘click here to download our latest brochure’.

When you use an image as a link on your website, the alt tag takes over the role as description for people who use text to speech readers. The alt tag is therefore required on images.

 

Semantics

Semantics are usually good for most of the websites. It actually means that you use the html tags for structuring your website. The use of H1-H6 tags, lists (ul, ol) is therefore required. Even if the css files did not load, the website still has the basic structure it needs to be read by a screen reader.

It is possible to style the headings with just css classes, but this is not allowed (and not semantic) following the WCAG 2.0 rules.

 

Video and audio description

If your website uses video or audiofiles it is necessary to provide an alternative way to interpret the video or audio message. This can be a written description or auditory information.

If the video on your website contains sounds, then it is required to provide subtitles for this video.

 

Sound does not start automatically

Frequently when you visit websites you encounter sites where the video or audio starts automatically. Background noise on your website can possibly be annoying for screen readers.

 

Characters on the keyboard are not used for styling

A lot of web developers (including myself) use characters like ‘&’ or ‘>’ for styling purposes. Although it is a fast way of developing,  it is not the correct one. It is much better to use an icon-font or an image (with correct alt tag).

 

It is possible to stop motion on the website

If something moves for more than 5 seconds, the user must be able to stop the motion by pressing a link or button.

 

Color

Color is a very important part of the ‘brand identity’ and the overall design of the website. It is very important to consider the color of the font, the background and the way a screen can manipulate certain colors (old screens). You cannot rely on colors to make your website morereadable. You can find much more detail in this article.

 

This article is based on my own experience and the Anysurfer checklist.