Accessibility in digital product design is very important, not only to provide an equitable approach to people with disabilities, but because accessibility benefits us all.
If we forget the mouse at home for a meeting, we will have to navigate with the keyboard. Or if we want to watch a video but we do not have headphones, we will miss the subtitles if we are in a library. There are also people who, even if they can read, prefer to use the screen reader as if it were an audio book.
For these and many other reasons, designing an accessible product has become a necessity in any digital business. Here are some guidelines on how to design an accessible product.
How to design an accessible product
Accessibility should be addressed from the early stages of design, since it is not a matter of making adjustments for different types of users, but of creating a generic interface in which all groups are represented.
Several examples of inclusive design patterns are given below.
Hierarchy
For screen readers, important actions should be placed at the top or bottom of the screen and the elements of the same hierarchy side by side. The size and weight chosen for the texts also establishes a hierarchy, where texts with larger font size or in bold type will have more importance.
“Designing an accesible product has become a necessity in any digital business”
Contrast
Note that a small text size requires higher contrast to be more legible. WC3 recommends a ratio of at least 4.5:1 between text color and background color, decreasing to a minimum of 3:1 when the font is larger (14 pt bold / 18 pt or larger). These ratios also apply to icons and other components.
Color
It should not be used as the unique medium for providing information, but as a complement that is supported by text, symbols and textures. Color blind or visually impaired people should be able to identify what is going on in a black and white interface.
Labels and shapes
In forms and searches, the label of the field we are filling in must always be visible and well defined. The label tells us the purpose of the field at all times, so it should remain even after typing in it. In these components you should also avoid borderless elements and create tangible shapes to trigger an action or scrolling.
Tactile and pointer lenses
Interface components that users interact with should be at least 48×48 dp for mobile devices (44×44 dp on iOS) and pointer targets (for mouse) should be a minimum of 44×44 dp.
Focus indicators (web-based)
They serve as a guide to know where you are when using the tab key to move around a website. It is important not to do without these lights, since blind people who need screen readers, or people with reduced mobility, make great use of them.
Graphic elements
It is recommended to add alternative text labels for images and avoid the use of ‘hover’ effects, as these are difficult to navigate for people with motor disabilities and can make it difficult to access the product or service. It is also important to provide narration options for people with visual disabilities and video or audio transcripts for those with hearing disabilities.
Text
During research with older people, it is very common to hear complaints about the size of fonts used in websites and applications. To ensure reading comfort, designers should use reasonably large font sizes and use a clean typeface.
Other good practices that we can also apply with respect to text are, for example:
- Avoid justification because it creates patterns that hinder reading for people with learning difficulties or dyslexia.
- Do not overuse italics or capital letters in long paragraphs.
- Use alternative text to convey what a given image shows, both to blind people through screen readers and to those who can see but have had a problem loading the image.
“Accessibility should be addressed from the earliest stages of design, since it is not a matter of making adjustments according to different types of users, but of making a generic interface, in which all groups are represented.“
Tools to make accessible designs
Here are some tools used by designers and developers to make products accessible:
- ARIA Authoring Practices Guide (APG) patterns list. Repository and explanation of the basic patterns that a digital product has and how to improve accessibility with them.
- Human interface guidelines – Accessibility. Recommendations to maximize accessibility in Apple’s interface design.
- Accessibility for developers. Apple offers information on how to use its Accessibility API to make your products functional for as many users as possible.
- Accessibility scanner. Allows you to identify aspects to improve accessibility in your Android application.
- Material design – Accessibility. Accessible design principles applicable to Google’s design system.
- Microsoft Design – Inclusive design. Microsoft’s inclusive design manual with videos, articles and other informative materials.
- Development of accessible applications. Resources, documentation and videos on accessibility for Microsoft technology developers.
-
Inclusive design and user experience
UX/UI
7 September 2022
We address the principal keys of inclusive design.
-
Build your components usefully
News
29 January 2023
Figma components are becoming more and more powerful and can be your best allies when building a digital product.