All about Accessibility

Accessibility is the possibility and condition of reaching, perceiving, understanding, and interacting for use, participation, and contribution, with equal opportunities, safety, and autonomy.

About

Most common characteristics to keep in mind when designing:

• Blind people.
• People with low vision.
• Dyslexic people.
• Deaf people.
• People with physical disabilities.
• People with autism.
• People with older mobile devices.
• People with limited connectivity.
• People with limited time.

“Access for all, regardless of disability, is an essential aspect” — Tim Berners-Lee

Usability

Prioritize content: people should be able to focus on one thing at a time. Identify the purpose of the screen and highlight the content and functions necessary to fulfill that purpose.

Offer choice: There is more than one way to complete a task. You cannot assume what someone’s preferred path would be.

Give control: Disable the ability for the user to change and adjust the browser’s default settings. Avoid automatic content changes that were not triggered by user action.

Be consistent: You should communicate the behavior of components in the same way throughout the interface, and people should be able to do the same things in the same way.

Consider situation: Users may be people at work with little time to interact, people at home, people walking down the street, or even people under some kind of pressure. All these situations can have some impact on usability.

Type

At some point in our lives, we experience a disability that can be permanent, temporary, or situational (when we don’t understand something).

Perceptible: Aspects that users can perceive, such as color contrast, captions, or navigation.

Operational: What is easy to use, such as a keyboard, help links, or shortcuts.

Comprehensible: What is easy to understand, such as text, language close to reality, or familiar elements.

Robust: What makes content easy to access, such as HTML specifications, resolutions, or operating systems.

Levels

Criterion A — A criterion that needs to be in the interface, as it only meets the minimum and most critical WCAG requirements.

Criterion AA — Should be in the interface, as it only has criteria A and AA.

Criterion AAA — Could be in the interface, as it is ideal for an ‘interface’ to be accessible. It contains criteria A, AA, and AAA.

Screen reader

There are 3 ways to read the screen:

• Reading the entire page using the keyboard arrow keys.
• Reading through links/fields using the “tab” key on the keyboard.
• Reading using keyboard shortcuts such as h, t, or b.

On mobile devices, to navigate, simply drag your fingers to the sides, and to access content, double-tap the screen.

Image descriptions

• Image descriptions are specifications of inputs and screen elements that the developer must write in the code.
• The designer is responsible for passing these specifications to them.
• Images should always be described, not relying solely on automated tools.

Legend for the handoff in figma prototypes.

• The image description must take into account the context in which it appears.
• The same image can have different descriptions in different places.
• Always describe what is in the image, and nothing more.
• Do not make assumptions about race, nationality, religion, etc., or interpretations of what may be happening.

Acessibility handoff in figma prototypes.

Tips

• Validate the HTML with the developer.
• Use accessibility auditors.
• Test the screens by navigating using only the keyboard.
• Ask for help from specialists.
• Test with diverse users.

Font Size

• The minimum font size for readability is 16px.
• A font smaller than 16px already makes it much harder for the user to read.
• Use a line spacing at least 1.5 times larger.
• Remember, the white space is for visual breathing room.

Link

• Do not use links with the names “click here” or “learn more” in the middle of the text.
• Links are sensitive for accessibility, as screen readers will only translate what is written and will not inform what the link is about or where it leads.

Textures

• Use textures along with colors.
• We know that using only colors isn’t enough because some people can’t see them.
• A tip is to use textures or icons to better represent the meaning of the information, always explaining in a supporting legend what it means to the user.

• Texture can also be applied to charts to differentiate information.
• Use different lines and shapes or symbols in tables.
• Prioritize bar and column charts.

Click and touch area

Don’t forget to show the developer the click and touch areas of the elements.

This documentation is very important, especially for mobile devices, in defining the clickable area for the user.

Contrast

• A color study is essential. Talk to the design team if you have any questions.
• Use our color guide in the graphics section. We’ve done a contrast study between the colors to make them more accessible.
• It’s not recommended to use the darkest background and the whitest white. Use the minimum AA (analytic encoding).

Tools

Plugin Lighthouse (chrome)

WAVE

Simulador Plugin Funkify (chrome)

Handtalk — Libra signs

Plugin Colorblinding (chrome)

Coblis — Image upload simulator

Stark (figma)

Who can use — Contrast

Accessibility scanner (android)

Thank you for reading.

Let’s talk? Uli Azeredo | LinkedIn