How everybody benefits from accessibility

When we say something is accessible, it means it’s usable for as many people as possible, regardless of their age, knowledge, abilities or disabilities.

For example, an accessible building would have a ramp for wheelchairs and perhaps doors and lights with motion-sensors. An accessible webpage is one where all the information and functionality can be acquired and used by people with low vision, motoric and cognitive disabilities, the blind and the deaf. Making it possible for the disabled to use the web, is a part of providing equal possibilities and allowing them to actively take part in society.

When we talk about accessibility, we usually picture disabled people who use assistive technologies - and that is true, about 80 million disabled people live in Europe alone - but accessibility actually benefits an even wider crowd.

For example, people may have a temporary disability such as a broken arm and not be able to use the mouse. Also, as we age, we naturally experience a decrease in vision and hearing, the speed of reflexes and so on, making it harder to read the small gray text and hit tiny targets.

Overall, an accessible website is just more flexible and suits with a wider selection of needs and preferences. By investing in accessibility, we also invest in usability.

By optimizing the website for our users, we are also optimizing it for the search engines. The cornerstones of accessibility - proper headings, link texts, alternative texts for images and page titles - are all good for SEO. Also, valid HTML code, which simply ensures the reliability of the website, is a prerequisite for accessibility.

So when is a website accessible?

In 1999 the World Wide Web Consortium’s (W3C) accessibility workgroup Web Accessibility Initiative introduced an international standard document called “Web Content Accessibility Guidelines” (WCAG) 1.0. Its most recent version, WCAG 2.1 was released in 2018. The document is divided into four principles: perceivable, operable, understandable, and robust.

WCAG document presents 3 levels of conformance:

• "A” level means that the most basic rules are followed, such as valid HTML code, the possibility to navigate the page with a keyboard, and text alternatives for non-text content.

• “AA” (most commonly required) means that in addition to the basic (“A” level) rules, a set of more complicated rules are followed, such as providing sufficient colour contrast between the text and the background, marking the element in focus, and giving user detailed feedback upon errors.

•  “AAA” means that the webpage follows all of the rules stated in WCAG. When starting a new development project, it is very important to make sure which level of accessibility conformance is needed. The European Union accessibility directive requires the websites and mobile apps of public bodies to meet WCAG 2.1 level AA. That means filling the most essential rules - level A, and the additional rules of level AA.

What makes a website accessible?

Disabled people use the same computers, tablets and smartphones as everybody else, but may need additional help from assistive technologies. We must simply build the websites in a way that allows them to use these assistive technologies.

A user with motoric disabilities may be using a special keyboard or mouse, speech input, different switches or sensors. For them, all interactive elements should be reachable with the “tab” key, openable with “space” or “enter” keys, and the user should always see which element is “focused” – where they are on the page.

The input boxes must allow users to type using a virtual keyboard and the overall amount of required text input should be minimal – by improving the general UX and allowing the autofill function.

Blind users usually browse the web using a screenreader – a program that reads out loud everything that is happening on the screen. To help screenreader understand and read the content out correctly, we must ensure that the names and relationships between elements are understandable programmatically, not just visually.

We must also describe in the text any information that is given in picture or video format. Most of the extra work we put into supporting screenreaders, are good for SEO and therefore valuable for the business.

For people with low vision like most of the elderly, people with glasses or colour-blindness, it may be difficult to see colours with very low contrast, for example, light grey text. To ensure proper contrast, it is important to compare the colours of the text and its background, as well as elements like inputs and icons.

There are many free tools for that on the web, for example, WebAim Color Contrast Checker. High contrast colours are also good for mobile users, who may use the devices outdoors in bad lighting, or turn down the brightness of the phone.

Many people with impaired vision use screen magnification tools or browser zoom. We must ensure that no content gets lost when the user increases the zoom or text size.

It is also important in mobile browsers and especially apps where text often gets hidden because containers are not flexible and do not grow together with the text.

So how to do all of that?

The accessibility rate of webpages in Estonia is low, even for public sector websites which are required to meet WCAG 2.1 AA. Most websites do not even meet level A.

One reason why the accessibility guidelines are not being followed may be that the standard documentation is very long, mostly written in a difficult language and quite hard to comprehend. However, tools made for a “quick and easy” review are superficial and unreliable. Also, the time spent on improving and testing accessibility is often left out of the project plan.

It is difficult to find a balance between giving detailed instructions and creating an easy-to-use tool. But I gave it a try and am happy to introduce our new accessibility tool (in Estonian). I’ve tried to put down the essence of WCAG 2.1 document, best practises for the mobile web, various articles and interviews with disabled people.

 

The guidelines are grouped by function – so you can concentrate on the element you are working on currently – as a designer, developer or content creator. Most of the guidelines are also illustrated with good and bad examples as well as code snippets. I believe this tool will help you get acquainted with the principles of accessibility.

Designers, developers as well as content creators all have their role in improving the accessibility of a webpage. Their motivation may come from different sources – improving the experience for disabled people, junior web users and the elderly, optimizing a webpage for search engines, creating a better experience on mobile devices or following the official requirement to meet level AA. But in the end - we are all benefiting from it.