Digital design and accessibility tips

70 practical tips for designers on how to create an accessible digital experience.

Um caderno de anotações, uma lupa e uma suculenta em cima de uma folha com textura em braile. (Freepik)

I’ve been studying accessibility for some time, and it’s a theme that always caught my attention and brought a purpose in my work, but without help, I wouldn’t have been able to go deeper or gain confidence to share this article. This is because accessibility is an extremely broad theme, involving many specialties and evolving involving many specialties and evolving the social aspect of design to the extreme, since we (still) do not live in an inclusive society.since we (still) don’t live in an inclusive society.

My goal is not to create shortcuts in your studies, accessibility is a topic that needs to be deeply researched because it directly influences the way we see people and the solutions we develop for them. I’m also not going to address accessibility at all stages of the design process and the impacts on the business, that will be for another time.

My main objective here is to simplify and share with you the notes that I use in my daily life. A summary of a lot of research that became heuristics that helps me create accessible experiences in a simple and fast way.

Not all the tips are going to be used on your project, either by necessity or option, but most of them require teamwork among designers and developers and, of course, time to support the implementation and run the final tests. There is no point in creating accessible solutions if we don’t make sure it’s successfully built for the final users.

Let’s go! 70 tips:

Beware of contrast, motions, and fonts

• Use contrast that facilitates the reading of people with daltonism or low vision.
• Colors don’t need to be not the only way to distinguish elements and status. Use textures, labels, or icons. That not only helps daltonic persons but also makes reading easier for people with autism and dyslexia.
• Very saturated colors can bother people with autism. Use it wisely.
• Are you designing an international solution? Make sure that the color you are using has representativity and cultural meaning.
• Motion can distract users, any user, mainly those with difficulty concentrating.
• Animations that “blink” more than three times per second can cause seizures in people with epilepsy.
• Parallax animations can cause dizziness in users, especially in people with labyrinthitis.
• Beware of the font size.
• Use different font sizes to create a hierarchy, visually and in the programming code! If it works as a title, it needs to be coded as a title.
• The font size needs to be responsive to adapt to different screen sizes.
• Use fonts that facilitate the reading of people with dyslexia, for example, Verdana or Arial.
• Be careful when using italic and cursive fonts.
• If the illustrative image sends a message, it must also have its color contrast checked.

Respect the areas of interaction and spacing

• The touching area must have at least 44 pixels (WCAG). This will help users with motor disabilities or the elderly to interact with your solution.
• The controls should not be too close to each other, so the users don’t miss-click them.
• On the other hand, don’t put the elements too far from each other, as it turns the navigation of people using zoom harder.

Avoid using complex elements

• Do you really need to use graphs? Give users another way to access the information. Graphs are not well-read by screen readers, for example.
• Avoid charts that mix more than two pieces of information. That helps people with a low understanding of the subject or learning issues.
• Visual elements that depend on manual interaction, like drag and drop, need to have another way for users to interact with them.
• In complexes flows provide feedback often. This will help all the users to understand the experience, but will help even more the users that have any kind of focus problem.

Offer more than one way to provide the information

• Your solution must be compatible with all devices and screen sizes.
• Do not depend on only one way or one type of interaction to pass the information you want.
• Offer the content in multiple formats like text, audio, video, sign language, infographics, so all users can understand it in their own way.
• Create an easy-to-use navigation tree to offer shortcuts for your users.
• Your solution must have a good search mechanism. It makes navigation easier and straightforward, besides helping people with visual and physical disability, for example.
• Offer a voice command functionality.
• Use a breadcrumb navigation for experiences that have more than one step.

Give control

• Be careful with audio and videos that play automatically and can distract the user. Provide controls for the user to pause and play the media as they please.
• If possible, also offer controls for rotating banners and animations.
• Use explanatory texts about what the controls do, whether for screen reader or visual navigation.
• Make the font-size customization possible.
• Give time or don’t create solutions that depend on it. Each user needs a different time to interact with the interface or understand the information.

Establish hierarchy

• Make sure your layout has a logic sequence.
• Allow the users to zoom on your interface without breaking elements and the tabulation order.
• Create visual hierarchy. Differentiate fonts, element sizes and group elements to make the visual understanding easier.
• Standardize elements with the same meaning, function or hierarchy.
• Plan the navigation hierarchy. Does every information really need to be in the homepage?
• If a task requires remembering other information, both need to be available in the page. This makes the usability easier for people with some kind of dementia, for example.
• The visual hierarchy needs to be reflected on your code to facilitate the navigation through a screen reader. These tools enable users to navigate through elements by function, for example, this tip makes this kind of experience better and improves your code quality.
• Inform how the screen reader needs to identify each element and the reading order for the developers. Don’t forget to respect the screen reader experience standards.
• If necessary, offer a shortcut for the user to go to the main content, to the top of the page, footer and specific sections.
• The elements’ focus indicator must always be visible, it helps the experience of people with low vision.
• Be careful with the color choice for the focus indicator. This color must have contrast with the color of the element.

Images must have a description

• The image description depends on the context. If it’s part of the information you want to deliver, it needs to be described.
• If the image is only a visual support, it doesn’t need to be identified by the screen reader.
• Use short descriptions to aprimore the experience, but offer an option to a longer and more complete description.
• Don’t forget to describe the colors on the images, the colors have meaning and are part of the content too.
• If the users are uploading images, encourage them to insert the alternative text.

Prioritize native elements and focus on the “material honesty”

• Use native elements in your layout, it makes the development easier and support the navigation by screen readers.
• If an element has a button function, it needs to be developed as a button. If it’s a title, it needs to be developed as a title. Guarantee the material honesty, it improves the code hierarchy and the navigation by screen readers.
• Create elements visually consistent with their functions. A button needs to look like a button, for example.
• Differentiate, visually and in your code, links from buttons. Their functions are different.
• Don’t accumulate functions, it makes the experience complicated and confusing, whether or not using screen readers.
• Don’t use texts in image format.

Be clear with labels, status and content

• Don’t forget to create transcriptions and subtitles in your videos.
• Offer multi-language support, including sign language, if possible.
• Labels must have context. “Buy”, what? “Continue”, to where? “Click here”, for what? It improves the reading flow and the navigation by function, when using screen readers.
• Avoid using complex language and word games.
• Avoid using expressions in another language, if it’s not possible to translate, explain the term.
• Be objective, prioritize short sentences and paragraphs.
• Each paragraph needs to focus only on one idea, so it makes understanding easier and helps to remember the content.
• Offer information in layers and in a contextualized way, each information needs to be presented only when the users need it or when they are prepared for it.
• Be careful with the text lengths, long content lines turn reading difficult.
• Use bullet points to deliver important information quickly, but beware of excess, as it can fatigue the users’ eyes (for example, this article hahaha)
• The most important information must be the first on the line or paragraph. The user tends to scan the information and lose attention while reading, especially users with autism, dyslexia, or low vision.
• Connect status messages directly to the corresponding element helps the navigation by screen readers and the understanding of context.
• Describe exactly the error that must be corrected.
• If the interaction element has any kind of rule, you need to inform the users before or when they interact with the element.
• Don’t use “*” linking to complete information, if there is something the user needs to know, be clear and explain it in the right context.

Remember, accessibility is for everyone!

These 70 tips will improve the experience for all users, but for some of them, they are necessary to provide even the most basic experience.

Sometimes designers will skip some of these “rules” to create a different solution, but, as designers, we have the responsibility to offer innovation that doesn’t exclude people, just unite and connect them.