Creating accessible digital experiences

August 26, 2021

No, we didn’t accidentally added a blurred image to this article. This is an example of what our website might look like for someone with low vision.

For people with visual impairments or any other type of disability —hearing loss, learning difficulties, muteness, limited fine motor control, etc. — to be able to access websites and web tools with no major issues, they need to be designed and coded properly. The problem is that’s not always the case. Many websites and tools are built with accessibility barriers that make it very hard or even impossible for some people to use.

Accessibility is of major importance for organisations who deliver web products and tools. Accessibility issues can affect not only a website’s usability for people who have disabilities but also for those who don’t. By offering accessible products, organisations will show they are inclusive, reach a wider market, be legally compliant, and offer a better user experience. For everyone.

What is web accessibility?

Web accessibility is about creating websites, apps and web tools that can be used by everyone regardless of their ability. It’s about allowing everyone, including people with disabilities, to perceive, understand, navigate and interact with the internet.

Accessibility improves the usability for everyone — Although accessibility focuses, in a first stage, on users with disabilities, it can actually improve the experience for everyone. Imagine you’re in a loud environment and unable to hear audio, having the option to turn on subtitles on the video you’re watching will allow you to understand what is being said. Maybe you’re outside in bright sunlight and can’t see a screen. If the website has sufficient contrast you’ll have higher changes of seeing the information displayed.

Disabilities and web accessibility barriers

According to the World Health Organisation’s 2011 world report on disabilities, 1 billion of the world’s population live with a disability.

Even if you’re not part of that billion, you can eventually experience a temporary impairment due an accident, surgery or medication.

Types of disabilities

There are many reasons why people may be experiencing a certain degree of disability — it can be from birth, illness, disease, accident or they might develop impairments with age.

We can distinguish five types of disabilities that can impact how people use the web:

• Visual — Blindness, low vision, colour blindness, increased sensitivity to bright colours. People with visual disabilities have problems accessing information when text, images and page layouts can’t be resized, when video content doesn’t have text or audio alternatives, or when text and images have insufficient contrast between foreground and background color combinations;
• Auditory — Mild or moderate hearing loss in one or both ears and deafness. People with auditory disabilities have problems regarding audio content, so it needs to have alternatives, such as transcripts or captions.
• Cognitive, Learning and Neurological — Neurological disorders, as well as behavioural and mental health disorders (i.e. epilepsy, Alzheimer’s, multiple sclerosis, Parkinson’s disease, Autism spectrum disorder, dyslexia, dysgraphia, attention deficit, memory impairments). They affect how well people process and comprehend information.
• Physical — Weakness and limitations of muscular control, limitations of sensation, joint disorders, pain that impedes movement, and missing limbs. People with physical disabilities might experience trouble clicking small areas and are more likely to make mistakes when typing and clicking. They often use specialised hardware and software, like ergonomic or specially designed keyboard or mouse, head pointer, mouth stick, etc.
• Speech — Muteness, impairment and/or difficulty in being understood (i.e. stuttering, dysarthria, cluttering, apraxia of speech, speech sound disorder). People with speech disabilities encounter barriers with voice-based services as their volume or clarity of speech can make voice recognition difficult.

Source: https://www.w3.org/WAI/people-use-web/abilities-barriers/

Going beyond web accessibility

People with disabilities not only use their computers to access content, they also use mobile phones, tablets and other devices— smart TVs, wearables (smart watches), devices in car dashboards and airplane seatbacks, devices in household appliances and smart home technology.

All these devices mean a new range of accessibility issues to address— touchscreens, small screen sizes, different input modalities (speech, for example), usage in different settings (such as in bright sunlight).

By developing a mobile application with accessibility in mind, brands are enabling people with disabilities to access the mobile world. They also broaden the brand’s scope and make sure they reach the widest possible audience.

A few ways to build accessible apps

• Design for varying screen sizes — smaller screens limit the amount of information people can see at a time, particularly when users with visual impairments need to zoom in content.
• Tap targets must be big enough for people to interact with precision. Smaller touch targets must be surrounded by inactive space to avoid unintended actions.
• Buttons should be placed where they are easy to access.
• Device gestures should be kept simple so they are easy to execute (one-finger tap, for example). More complex gestures, involving multiple fingers or drawing shapes, will be more challenging for people with motor or dexterity impairments.
• If users take unintentional actions like clicking something by accident, they should be able to easily go back and fix the mistake.
• Offer the options to adjust text size, brightness and colour within the app settings.
• Data entry using on-screen keyboard, a bluetooth keyboard or speech, might be difficult for some users. The ideal is to reduce the amount of data entry required by providing select menus, radio buttons or check boxes. Giving alternatives like autofilling known information, data sharing between apps or dictation will prevent errors and improve the experience.
• Make sure the app plays nicely with built-in accessibility tools (Android’s Google Voice Assistant and VoiceOver from iOS, for example).

Why should organisations care about creating accessible products and services?

Accessibility is of major importance for organisations who want to create high-quality digital experiences, and not exclude people from using their product or service.

Key benefits:

• Maximising target audience: If we think that 15% of the world’s population has some sort of disability, that’s actually millions of people who have millions in purchasing power. It becomes clear that making organisations’ websites accessible has businesses benefits.
• Possibly stand out from the competition: If people with disabilities can’t use an organisation’s website they’ll easily turn to a competitor who offers a similar product or service.
• Avoiding discrimination: By creating accessible, high-quality websites and tools, organisations aren’t excluding people from using their products and services.
• Legal compliance: In many countries having an accessible website is required by law.

- EU member states used to have their own laws regarding accessibility so the EU established the European Accessibility Act, that aims to improve the functioning of the internal market for accessible products and services, by removing barriers created by divergent rules in member states. To complement it, the EU applied the Web Accessibility Directive. It provides people with disabilities with better access to websites and mobile apps of public services. EU countries have until 2022 to apply this directive, incorporating it into their national legislation.

- Section 508 of the Rehabilitation Act of 1973 requires federal agencies in the United States to ensure that their electronic and information technology is accessible.

- In the UK, the Equality Act 2010 states that goods and services providers (from both public and private sectors) have a legal obligation not to discriminate against people based on the number of protected characteristics, including disability. If a business’ website is not accessible, the organisation can be sued for discrimination.

• Creating a positive public impression: Organisations will prove their commitment to break barriers and create a web that’s accessible to everyone.
• Saving time and money when accessibility is considered right from the beginning: Building accessible products right from day one will make it possible to identify possible issues and correct them when they are still easy to fix. It will avoid a major redesign after the product is launched.
• Boosting SEO: Search engines rely on content structure, semantics and functionality to present content to users and determine its relevance. Accessible websites can then have better search results.
• Improving usability and user satisfaction: Accessible websites will provide a better experience to users both with and without disabilities, and ultimately increase their satisfaction. Satisfied users that will most likely keep visiting the website, purchasing and recommend it to their friends.

How can we evaluate accessibility?

When you’re developing or redesigning a website, it’s best to evaluate accessibility from the start and include it throughout the development process so any accessibility issues are identified early, when it’s easier to address them.

Standards Review

To assess accessibility issues and improve web accessibility, the World Wide Web Consortium (W3C) defined a set of guidelines — the Web Content Accessibility Guidelines (WCAG). The guidelines and success criteria are organised under 4 principles:

• Perceivable: Information can’t be invisible to users’ senses (sight, sound and touch). Users must be able to perceive all information presented.
• Operable: Users must be able to operate the interface. For example, ensuring a good keyboard-only navigation will make it easier for people with motor difficulties to browse the web.
• Understandable: Users must be able to understand the content and operation of the interface. The terms have to be clear, instructions simple and complex issues explained.
• Robust: Content must be interpreted reliably by a wide variety of user agents, including assistive technologies, like screen readers.

These guidelines are organised into three levels of conformance. They all have criteria that must be met to consider a website is accessible for all users, covering aspects like site navigation, text, videos, inputs and more.

• Level A: The most basic web accessibility requirements. Websites that don’t meet this level are impossible or very difficult for people with disabilities to use.
• Level AA: Requirements include the biggest and most common barriers for disabled users. If a website meets this level then it is usable and understandable for most people with or without disabilities. It’s the most used level around the world when it comes to accessibility rules and regulations.
• Level AAA: The highest and most complex level of accessibility. If a website hits this level then it means it is accessible to the maximum number of users and the navigation experience is easy.

The WCAG guidelines are universally accepted and adopted. In some countries and jurisdictions there are legal reasons for implementing them. European Union requires that websites and mobile apps of public sector conform with level AA.

Accessibility Evaluation Tools

Software tools can identify accessibility issues and increase efficiency of evaluation by saving time and effort. However, alone they cannot determine if a product meets standards and is accessible.

Heuristic Evaluation

Finding the usability problems in a user interface according to an established list of rules called heuristics, so that they can be attended to as part of an iterative design process.

Design Walkthroughs

Find potential usability and accessibility issues by visualising the user’s route through an early concept or prototype. A walkthrough can be performed using personas with disabilities and scenarios that include adaptive strategies to complete tasks.

Screening Techniques

Activities to help identify potential accessibility barriers in product designs. It involves interacting with a product with one or more physical or sensory abilities eliminated or modified.

Usability Testing

Best practices for accessible websites

1. Provide sufficient contrast and don’t rely on colour to communicate information

People with visual impairments may find it difficult to read text without enough contrast against the background. Text and images of text should have a contrast ratio of at least 4.5:1. (WCAG 1.4.3 Contrast).

When using a contrast checker tool we can see that the text on the left passes and the one on the right fails

Still regarding colour, it can’t be used as the only visual means of conveying information. Design that relies solely on colour limits engagement for colourblind users who are unable to distinguish colour differences. 

2. Provide alternative text for non-text content

Alt text example from Amazon

As we see here, Amazon is using an image to inform people they ship over 45 millions products around the world. In the HTML markup, we can see that the image alt text states exactly the information the image conveys. This way people with visual disabilities using screen readers will hear text content in place of the image.

Alt text example from All Recipes

When a screen reader reads the image above it will say “image” and then the alternative (“alt”) text “a canning jar of spaghetti sauce with fresh tomatoes and garlic on the side”. If the image didn’t have any alt text, the screen-reader would simply skip it. Alt text will also appear if an image on a webpage fails to load on a user’s screen. Instead of seeing a broken link icon, they’ll see the alt text and know what the image was supposed to convey. It also gives search engines better information to rank a website with and possibly rank it higher.

3. Label forms correctly and provide feedback for errors

Screen readers can’t go through form fields if they aren’t labeled correctly. They might also miss label words inside the form field.

Label forms examples from AliExpress and Zoom

In AliExpress Sign In form both form fields have no label, only placeholder text. Not to mention the other accessibility problem here — placeholder text colour clearly doesn’t have the necessary contrast ratio.

In Zoom’s example we can see that form fields have both labels and placeholder text (although in this case it’s a bit redundant).

Since we’re on the forms subject we should also talk about feedback errors. It gets really frustrating when you supposedly made a mistake and don’t know why that happened. It should be easy for users to quickly correct their errors. Hints and instructions should be persistent and placed outside of the form field.

NN Group has an entire article about how placeholders in form fields are harmful. Worth checking!

4. Ensure keyboard accessibility

Someone with some kind of physical disability that stops them from using their mouse needs an alternative to navigate through a website, and that is often keyboard navigation.

Using the keyboard tab key and other keystrokes, users must quickly access and move between links, buttons, forms and other controls.

Using the tab key to navigate through Airbnb website

5. Make navigation consistent

A website’s navigation bar must be easy to use and fixed on top of all website’s pages. It should include a list of items with links to the main sections of the site. Users should be able to quickly locate the search function. The website should also include a “skip navigation” link as the first link on every page. This allows users to skip navigation and start interacting with the main content of a page.

“Skip to content” link in Airbnb website

6. Provide captions and transcripts for videos and podcasts

The internet has increasingly become a crucial resource in many aspects of our lives, be it education, government, health care, commerce, etc. It needs to be accessible so that everyone has equal access and opportunities, regardless of their abilities.

Accessible design will not only make it possible for people with disabilities to use a website or app, it will also improve the overall experience and satisfaction of all users.

Moreover, accessibility has its business benefits. It will enhance the brand, drive innovation and extend market reach.