What is exactly the accessible design?
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.
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.
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.
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.
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.
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.
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.
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.
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.
- Authoring Tool Accessibility Guidelines (ATAG) defines requirements on how to make the authoring tools themselves accessible so that people with disabilities can create web content.
- User Agent Accessibility Guidelines (UAAG) provides guidance on how to make user agents accessible to people with disabilities. User agents are browsers, browser extensions, media players and readers.
Flexible design and Font size
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.
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.
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:
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.
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.
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.
