Designing for Visual Impairments

People with peripheral or tunnel vision problems lack a wide-angle field of vision, even though their central vision might be perfect. The most common cause of such vision impairments is glaucoma, which occurs when high pressure inside the retina damages the optic nerve, the carrier of images from your brain to your eyes. Patients often complain about their difficulties in seeing in dim light and navigating when moving.

When designing a website or an app, we should keep in mind that people with peripheral vision problems can only see central elements. Our main goal is to ensure they can access and use the main functionality without limits.

Diabetic retinopathy is a diabetes complication that affects the eyes. What may start as mild vision problems can often progress into severe blurred vision symptoms and eventually blindness. According to the stats, 80% of diabetic people are affected by this problem. Patients usually complain of seeing spots or floaters, losing their sharpness of vision, and having difficulty seeing in dim light and at night.^[2]

Users usually struggle to read text and interact with elements on websites and products that don't comply with WCAG 2.0 requirements. For them, the content looks fuzzy as if viewed through dirty glass.

Visual acuity refers to the eye's ability to see details clearly and precisely. Generally, it depends on how far away the eye is from the object and its smallest features. However, some people with visual acuity impairment struggle with partial sight loss in one eye and color desaturation, in which colors, especially red, lose their intensity.

When developing interfaces, we should be particularly delicate about the text's type, size, weight, and font style. Users' ability to perceive details also depends on the contrast between the foreground and background which should fall within the WCAG 2.0 contrast ratio requirements.

Ghost images, visual distortions where faint duplicates of an image appear, can signal astigmatism, cataracts, or other vision impairments. This effect often results from irregularities in the eye’s lens or cornea, causing light to scatter instead of focusing correctly.

For users experiencing ghosting, reading text and distinguishing small elements can be particularly challenging. Letters may blur together, and fine details may become difficult to perceive. To improve readability, ensure sufficient contrast between text and background, avoid excessively thin typefaces, and allow adequate spacing.

For color blind people, the world may seem like a scene from an old movie where everything is pale and dull, and some colors have been removed. Essentially, science defines color blindness as the inability to perceive and distinguish colors, along with sensitivity to color brightness. The most common type is red/green, followed by the blue/yellow type, and complete color blindness. It affects approximately 4.4% of the entire global population, or one out of 12 men and one out of 200 women.^[3]

Colorblind Web Page Filter is a web tool that simulates different types of color blindness so you can adjust your color palette and provide the best experience for everyone.

To make the content accessible to visually impaired users, we need to ensure that content presentation is independent of its inner composition. Assign this task to developers to organize the code structure and provide relevant semantic tags such as headings, lists, tables, and input fields.

It allows screen-reading tools or other assistive technologies to quickly scan content and interpret it to users regardless of visual changes. Users may enlarge text, images, or spacing or adapt the content to their needs without fearing those adjustments can break the underlying structure.

To enjoy the content in a way others do, visually impaired individuals often turn to assistive technologies, like screen readers. Such tools scan images, find alt attributes, and interpret them by reading the text aloud to users.

Providing concise and informative descriptions helps convey the meaning of an image effectively. Imagine explaining the image over the phone. You would focus on the idea rather than the colors or patterns.

Alt text also benefits all users by providing context when images fail to load due to a slow internet connection, ensuring they still understand the content.

When designing interfaces, relying solely on color can create accessibility barriers. Color-blind users may struggle to differentiate elements, making key information unclear. For example, red and green error or success states appear nearly identical to some users, rendering them ineffective. To ensure clarity, complement colors with additional visual cues like icons, labels, and patterns to communicate meaning effectively.

Distinguishing elements without relying on color is essential for accessibility. Color-blind users may have difficulty differentiating between certain hues, such as red and green or blue and yellow, making color-based indicators ineffective. Textures and patterns, like dots, stripes, or diagonals, provide a clear visual distinction that doesn’t rely on color perception.

Incorporating these elements benefits all users, not just those with color blindness. Patterns and textures improve readability in charts, infographics, and interactive elements by creating strong visual contrasts.

For people who live with visual impairments and can't fully rely on imagery content, text is like a beacon of clarity in the rough sea of information. That's why it's crucial to provide sufficient color contrast between text and its surrounding background. The WCAG 2.0 recommends keeping a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for larger text.

The WCAG 2.0 recommendation states that the entire website text must be resizable up to 200% without assistive technology and loss of content or functionality. You should also apply this guideline for touch displays and pinch-zooming behaviors. What seems like a small detail has a significant impact on people with visual disabilities. Instead of holding their devices right in front of their noses to see and read the content, they can simply zoom in.

Voice User Interfaces (VUI) are among the latest advancements in accessibility, allowing visually impaired users to navigate websites and apps using only their voice and hearing. These interfaces also benefit individuals who need hands-free interaction, such as those cooking, driving, or multitasking.

For conversational VUI, consider the following recommendations:

• Keep messages concise: Shorter audio responses improve comprehension and efficiency.
• Allow interruptions: Users should be able to stop or skip messages when needed.
• Provide speech rate control: Adjusting the speed ensures better usability for different preferences.
• Ensure easy discoverability: Users should quickly find and activate voice interaction features.

Keyboard navigation is essential for visually impaired users who rely on the Tab key or arrow keys to move through a website. To ensure a smooth experience, several key factors should be considered.

Make keyboard focus visible. By default, browsers provide focus indicators, such as dotted or solid outlines, but these can be customized to align with brand colors while maintaining high contrast for visibility.

Follow a logical focus order. The focus should match the visual layout, typically moving left to right and top to bottom, prioritizing essential content. All interactive elements—buttons, links, forms, dropdowns, and modal dialogs—must be accessible via the keyboard, just as they are for mouse users.

Use semantic HTML and ARIA roles. Elements like <header>, <nav>, <main>, <section>, and <aside> help assistive technologies provide a clear page structure. Screen readers use these landmarks to generate a navigational map, allowing users to jump directly to key sections. Adding ARIA roles and descriptive labels enhances this experience, making navigation more intuitive.^[4]

Tooltips are brief, informative elements that explain the function of a specific item on a website. They help users understand what an element does, providing guidance without overwhelming them. Tooltips can be accessed by various methods, such as a mouse, keyboard, pointer device, screen reader, or zoom software, ensuring accessibility across different user needs.

While tooltips typically appear on hover and disappear shortly after, they should not contain long instructions or detailed steps. Overloading users with this kind of information can strain their memory and eyes, particularly for visually impaired individuals. Tooltips should remain concise and only offer enough information to clarify the element's purpose, avoiding complexity that may lead to confusion or frustration.