Accessibility within the User Experience: what it is and why it's important

01 Jul Accessibility within the User Experience: what it is and why it’s important

Posted at 15:17h in Translation & Localization by Creative Words

This article is part of a series of posts on accessibility here on the Creative Words blog. As we know, translation and localization are to bring as much content as possible to as many people as possible. Accessibility is a natural extension of this concept. Keep following us to learn about a vast and crucial aspect of our industry.

What does accessible mean?

If you are creating a digital product, it is critical to start integrating accessibility right from the design process, rather than later as it is a much more complex process. According to the Web content accessibility guidelines (WCAG) 2.1, accessibility in User Experience must meet the following parameters:

Perceivable: users must be able to perceive the information presented, at least through one of the senses.
Usable: users must be able to use the interface and interact with it.
Understandable: the operation of the interface and the information presented must be easy to understand.
Solid: content must be easy to be interpreted by assistive technologies.

Why is accessibility within the User Experience important?

An increasingly digital world equals a wider range of opportunities for companies and people. On that note, developing an excellent User Experience is key to the product success in order to satisfy users, build loyalty, and improve sales. But how do we do that properly? The most common mistake is to limit the choices of “the average user,” whereas the purpose of UX Design should be to design in an accessible way, to ensure the same rights and possibilities regardless of anyone’s condition. The current existence of a gap, called the Web Accessibility Divide, tells us that we are still a long way from reaching this goal and we are leaving behind many people with disabilities.

The areas of disability may be visual, motor, hearing or cognitive.

In addition to this subdivision, It is also worth looking at the type of: permanent (such as a deafness since birth); temporary (such as visual difficulties following eye surgery); situational (such as using a smartphone while holding other objects or listening to a video in a very noisy room). From these examples we can see that accessible design is actually to meet the needs of all people.

Is this principle really applied?

To better understand how to make a piece of content accessible, here are some basic pointers that may offer some interesting insights. They have been grouped according to macro-categories for quicker and easier reference, but consider that some aspects may fall under more than one.

1. Visual and cognitive disabilities (e.g. DIS disorders)

Contrast: to ensure excellent readability use a light background and dark text, but do not overdo it so as not to incur the “swirl” effect (which makes text blurry). Too strong a contrast (black text on a very white background) may appear too intense and hinder reading. Better opt for softer colors.
Fonts: should be of appropriate size, even better if you make a manual enlargement function available so that each user can adapt it to their needs. To avoid the blurring effect, choose sans-serif fonts, that is, without the “decorations” that distort the shape of the letters and make them appear as if they are attached. Arial, Helvetica and Montserrat are among the recommended fonts.
Bold: it is preferred over italics. The letters, in fact, follow irregular lines and hinder reading.
Structured layout and spacing: page readability improves if you set up the document so that it has clear headings, recognizable citations, bulleted lists, etc. Paragraphs should not be too long to prevent users from missing the mark, while adequate spacing between content helps to distinguish it more easily. However, it avoids justified text alignment, which creates large, irregular spaces between words and can cause a “river” effect.
Simplicity: to facilitate understanding, use clear, fluent and simple language without too many technical terms.

2. Visual disabilities

Alternative text (Alt text) for images: alternative text can be read by screen readers and allow even those with visual impairments to know what the images represent. What’s important is to not write lengthy descriptions.
Buttons and CTAs: in order to avoid confusion in following the screen reader’s directions, instead of generic copy (“click here”), for buttons and CTAs choose copy that is descriptive of the action (e.g., “download report”).
CAPTCHA codes: always include the audio option and use them in a limited and careful way.

3. Visual and motor disabilities

Voice commands: voice commands are useful both for those who do not have the ability to see the screen and interact with it directly, and for those who have difficulty using their hands and fingers or are completely unable to do so.
Keyboard navigation: creates links and navigation menus accessible directly from the keyboard, needing no mouse. Instead of drop-down menus you can assign shortcuts for each item (e.g., press “1” for home, press “2” for price page, etc.).
Sliders: predict the activation of special sliders to navigate and perform actions.
Position of the keys: they should be neither too close nor too far apart.
Touch commands: set combinations of touches or swipes on the screen to perform specific actions.

4. Hearing disabilities

Transcripts and subtitles: always include a text alternative for each video and audio.
Sign language: offer audio and video content accompanied by sign language version to promote inclusivity.

Assistive technologies: a valuable aid to ensuring accessibility in the User Experience

An accessible User Experience is well suited to support other types of technologies that are installed on an existing system to make it more usable.

Let’s take a look at some of them:

Alternative browsers: one of the best for those with ASD disorders is Helpbird, available for both Google Chrome and Mozilla Firefox. After installation, you can change the colors and fonts (choosing dyslexia-friendly ones such as OpenDyslexic) or enable text-to-speech and much more.
Screen readers: programs that read text aloud or use the braille writing system through a special display connected to the computer.
Eye-trackers or oculometers: applications that take advantage of eye movement tracking and eyelid closure.
ASR speech recognizers: the acronym stands for Automatic Speech Recognition and indicates a technology that enables transcription of spoken bits or a speech.

Test your website

In conclusion, if you have a web site, you can check what the current level of accessibility is using the axe DevTools – Web Accessibility Testing application, a free extension installed directly on your browser and allows you to scan the site for any problems that need to be fixed.