About Accessibility in Interfaces

Accessibility, in a broad sense, involves creating products, devices, and environments that accommodate everyone, regardless of their context or physical abilities. When it comes to interfaces, accessibility means designing them to be as user-friendly as possible for a diverse range of users. We can consider the following aspects:

• Accessibility for People

  Accessibility is crucial for people with varying physical abilities. For example, when designing an elevator panel, intercom, or terminal, we should consider how someone in a wheelchair or a person with impaired vision will use it.

• Device Accessibility

  Devices vary in operating systems, resolutions, contrast, and color reproduction. Additionally, web services may be accessed through set-top boxes, smart TVs, different browsers, or screen readers.

• Accessibility in Different Usage Contexts

  Interfaces may be used in various contexts, such as bright sunlight, winter weather, wearing thick gloves, or in noisy or quiet environments.

The World Wide Web Consortium (W3C) has developed the Web Content Accessibility Guidelines (WCAG), which categorize sites into several levels of accessibility: basic (A), moderate (AA), and high (AAA). Given other constraints, achieving AAA-level accessibility is a complex and sometimes unattainable goal. However, striving for it can significantly expand your audience.

Recommendations for Designers

• 1

  Don’t Rely Solely on Color to Convey Information

  Imagine your design in black and white, and ensure that color is used to complement what is already visible, not as the only means of communication.

• 2

  Provide Sufficient Contrast Between Text and Background

  According to WCAG guidelines, the contrast ratio between text and background should be at least 4.5:1. For fonts larger than 24px or large UI elements, a contrast ratio of 3:1 is acceptable. For users with visual impairments, aim for a contrast ratio of at least 7:1.

You can check contrast levels using tools like WebAIM.

Remember, contrast-checking tools use algorithms that may not capture all the nuances of human vision, so user feedback remains crucial.

• 3

  Consider Keyboard Focus Visualization

  The ’Tab’ and ’Tab + Shift’ keys allow users to navigate web elements using the keyboard, which is essential for those who cannot use a mouse and for professionals who frequently interact with forms, like bank tellers.

To ensure keyboard focus works properly, make sure the browser’s native focus indicator isn’t disabled. If pressing "Tab" results in a standard blue focus outline, you’re on the right track. You can customize the focus style, as Amazon does, but be careful. If you use a brand color for the focus, ensure it doesn’t blend in with the button’s brand color.

• 4

  Be Mindful of Minimalism

  Visually impaired users may struggle with minimalist designs, especially when fields lack borders or visual cues. This can make it harder for them to locate and interact with elements.

• 5

  Consider Element Size

  The recommended size for touch targets is based on the average size of a fingertip, which is about 10 × 10 mm. This translates to a minimum target area of 48px in the Material Design guidelines and 44px in the Human Interface Guidelines. While the element itself doesn’t need to be 48px, ensure there’s a safe area around it.

Also, remember that many users hold their phones with one hand, so frequently used actions should be positioned near the bottom quarter of the screen.

• 6

  Follow Typography Guidelines

  WCAG recommends a minimum line spacing of 1.5 and paragraph spacing of at least 2.25. Additionally, the recommended line width for English text is no more than 80 characters.

What Developers Should Keep in Mind

• Focus Control

  Ensure that focus flow is well-managed so that the focus indicator doesn’t disappear on elements, allows control of modal windows, and returns to the last place after an action.

• Semantic Layout

  Use proper tags and attributes, and provide alternative descriptions for non-text elements to enhance accessibility.

• Consider Poor Internet Connections

  Optimize the application for fast loading and consider how to support users with intermittent connections.

• Zoom Functionality (Ctrl +) in the Browser

  Ensure that users can zoom the site by 300% to 400% without losing content or functionality.