What is exactly the accessible design?

pch.vector by freepik

We often tend to demonize technology because it has changed our relationships and our way of life. But I believe that the great advantage of technology is that it is democratic and, if used correctly, it gives everyone the same chance. The accessibility of a product is the characteristic that allows products, services and facilities to be used independently by people with a variety of disabilities.

In the past, people with disabilities were left on the margins of society with almost no life expectancy. Thanks to technology, they can perform actions that for many people are considered ordinary: playing, jumping, walking, for a young teenager flirting, for a mute person to call friend via video, for a senior person with low vision to read a newspaper, for a quadriplegic to edit and shoot a video.

It may seem trivial. But for some people, it is not and it is also defined as a basic human right in the United Nations Convention on the Rights of Persons with Disabilities.

“Accessibility is for everyone” namely good for someone but essential for somebody else.

Type of technologies and strategies

How people with disabilities approach the web? Depending on their needs and capabilities, we can make the difference between assistive technologies and adaptive strategies.

Assistive technologies are software or hardware that enable people with disabilities to interact with the digital environments such as braille keyboard, screen reader or switch control,

Adaptive strategies are tools or shortcut to interact with web such as increasing font or resizing browser

The disabilities that are covered are of the following types: physical, visual, auditory, speech, cognition and learning.

Physical

The physical impediments can vary and, for each, different technological assistance systems can be used. Often several technologies may be combined at the same time to perfectly match the user’s needs and improve user flow.

The way to have access to the web is to be supported by keyboard, pointing devices and/or voice control.

These devices work by reading HTML code, which is why digital products must be perfectly coded by following a hierarchy and a logical focus order. In Occidental countries, people are reading from left to right from top to the bottom. In Oriental countries, it happens oppositely, from right to left, from the top to the bottom. And that is the way how the devices work: screen the page and highlight the relevant attribute.

Keyboard — Keyboard accessibility: To move inside a webpage without a mouse is possible by using the TAB on the keyboard. For perfect navigation, it is a good method to show where users are and highlighting the contents through a system of visible focus: contents will be turned on from a square or circle or underline. Or in case of a link or bottom, they will change the state.

Understanding Keyboard Accessibility by WAKE TECH

Pointing devices — Switch controls: In case of partial or total paralysis of the upper limbs, users can access a digital environment by the alternative tool, designed specifically for remote control. Most common are Sip-and-puff switches, Button switches, Camera switches and Eye-tracking.

How eye tracking works by Tobii Eye Tracking

Voice control — Speech recognition software: This software permits to translate and transform the speech in the text. Throw a system of automatic writing, users can use their voice and dictate text via a microphone and the software will convert it.

Speech recognition software by Sarah Cordiner

Visual: People with visual impairment, low vision or blindness can be supported by different devices to navigate the digital environment.

Screen magnification: It is a way for people with low visibility to enlarge all or part of the screen content. To make the experience better, users can also have the possibility to change and resize the font dimension or switch colour.

How Magic screen magnification software is working by freedom scientific

Screen reader: A screen reader is a software that analyzes and scans the content of the web page or smartphone screen, separating each attribute and a voice is describing its content.

Android TalkBack for the System is the software developed by Android for their products and iOS VoiceOver for Apple providers.

how it works the screen reader by CUBoulderOIT

Alternatives image: Images and multimedia can be a big challenge for some people with visual disabilities. The text alternative is the possibility to insert a description of metadata to permit software as a screen reader to be coded. The good rule is to make a short description of the image content.

How the reader assistant is reading the emoji by Molly Burke

Intelligent personal assistant: An intelligent virtual assistant (IVA) or intelligent personal assistant (IPA) is a software agent that is using artificial intelligence to solve tasks or services via users’ voices, based on commands or questions. Most famous are Siri and Cortana or Alexa.

Amazon Echo Demo by AMI: Accessible Media Inc.

Hearing

People with hearing impairments have found good opportunities to approach the web but they still have some not access when they are facing video.

Go to closed and solve those problems the solution could transcribe and subtitle. There is 4 type of method with how people with these disabilities can be faced:

Closed Captions: the dialogue between characters are transcribed in the same language as the spoken audio.

Subtitles: audio is translated into another language.

Transcripts: When transcribing subtitles, extra information is entered to clarify the context.

Sign language: through the use of hands and facial expressions, words are communicated and coded to communicate a phrase or a thought.

Speech

People with speech disabilities have a bit of advantage to approach the web since it is not a request to interact with voice, they can write an email or use the chatbox to communicate with customer service. But Intelligent personal assistant as Alexa, Siri or Cortana are completely inaccessible to people with voice disabilities.

Cognition and learning

Neurological type disabilities involving neurological or behavioural disorders are very variable and can change profoundly with changes in age or health status. A good rule is to give these types of people the opportunity to:

  • Increase font size without increasing the size of the images or media.
  • Zoom (magnifies) some or all part of the screen.
  • Use high contrast mode to invert colour or using the dark mode to make the text more readable.
Increase Text Size On Mac by Tech Talk America

Principles and standards

Accessible design is not good only for people with disabilities it makes the user experience better for everybody. Also, people without disabilities can take advantage of these small shrewdnesses.

In order to create an accessible product, there are some guidelines that it is important to know provided by the Web Accessibility Initiative (WAI). We can figure out three typologies:

  • Web Content Accessibility Guidelines (WCAG) defines requirements on how to make Web content accessible such as text, images, multimedia, structure and presentation. They are following 4 principles to define an accessible product and they are defined with the abbreviation of POUR:

P: Perceivable — Information can be presented in different ways; for example, in braille, different text sizes, text-to-speech, or symbols, etc.

O: Operable — Functionality can be used in different modalities; for example, keyboard, mouse, sip-and-puff, speech input, touch, etc.

U: Understandable — Information and functionality is understandable; for example consistent navigation, simple language, etc.

R: Robust — Content can be interpreted reliably by a wide variety of browsers, media players, and assistive technologies.

Small font text can be really problematic for different types of users. It is a good strategy to create a responsive design that can adapt to those people’s needs that allow resizing the text without increasing the size of the images or media.

Photo by Agence Olloweb on Unsplash

Hierarchy

The web product should have a clear hierarchy and structure. It is important to give the right attribute on the text, following the structure of tile.

Typically a web page has one Level 1 heading, which usually provides the main topic. For example, “Name of the website” could be the main heading of a web page. On this image “our mission” is a heading Level 2 coded as <h2>, and under that other heading coded as <h3>.

It is important also to maintain consistency across the web and the button to not make users confused.

Photo by Pankaj Patel on Unsplash

Poor contrast

A correct contrast can be a big challenge in the case of bright environments, especially for mobile devices. A not sufficient brightness does not permit users to receive the correct information.

Colour

Colour is an essential part of the design that can improve the aesthetic of the product and use to be consistent during the brand strategy. But, some users have some impairment about colours such as deuteranopia or protanopia and it means they have a limited colour vision and difficulty perceiving them. Instead of using the only colour to describe an action, use another identifier that does not rely on using colour alone. This can be simply adding an asterisk next to the field:

EdX — Introduction to Web Accessibility

Provide sufficient contrast The contrast ratio should be at least 4.5:1 and ideally 7:1 for text. For graphical objects, such as charts, and for large text, a contrast ratio of 3:1 may be sufficient.

EdX — Introduction to Web Accessibility

There are several tools to help you calculate the contrast ratio and select appropriate colour combinations. An example could be Colour Contrast Analyser. Another interesting tool to understand the different colour blinder is Color Oracle that gives users the possibility to simulate different colour disorders such as Deuteranotopia and Protanopia.

Animations and moving content

Some animations and moving content for some people with cognition and learning disabilities can be distracting especially if the screen is magnified, they can lose the orientation. When the content is magnified and zoomed, a good rule is not to change the place where the content is.

When we insert a video or audio it is important to provide the users with the possibility to turn off in case of autoplay and adjust the volume because they could disturb the users

Icons

Icons should be difficult to understand. It is important to convey icons that users already know to create a memorable experience and in addiction writing a label to describe the function.

Conclusion:

Why it is so important to think in an accessible design path? Because all users can receive the benefit.

We can take an example of the wheelchair ramp for sidewalks. How can benefit on it? Not only the person in a wheelchair but also mother or father pushing the pram, a person pulling a luggage, delivery man with a car or a bicycle man.

EdX — Introduction to Web Accessibility

15–20% of the population has permanent or temporary disabilities, and it is risky for companies not to make their products accessible to a large segment of users. Making their products accessible would greatly increase the reputation of the company and also the pool of influence.

What would happen if the world turned upside down? This video shows us a world where not everyone can access it, but only those who know specific codes can have access.

Take the time to watch it.

Disability is caused by a mismatch between the design and the person.

Ux designer, photographer and art passionate. I am an observer, listener and problem solver, fascinated by human behaviour.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store