Tips on designing inclusively for visual disabilities
Problems, behaviours, needs & tools, plus design guidelines for building accessible products
In my article “The three levels of accessibility”, I mention the importance of designing for clarity and inclusivity. Not only to ensure everybody regardless of ability is able to access your site but so that developers can implement accessible code.
I will be discussing the various problems people face, their unique behaviours and needs, the tools they use, and how we can better accommodate them in our digital products. I’ve broken it into 5 sections across 5 articles:
Visual/Sight
Typically people think of full blindness when discussing web accessibility for the visually impaired. There are many different visual challenges people face ranging from full blindness to tunnel vision or the inability to see colour or certain colours. Over time as we age our vision deteriorates, how many of us require prescription glasses? I certainly do and occasionally browse online without them because I’ve misplaced them or they are in another room browsing online then becomes harder on poorly designed websites. Finally, even those with good vision can be affected if they are in poor lighting conditions, think about glare from the sun.
Here are some more:
- Blindness — loss of vision in both eyes
- Central field loss — only seeing the edges of the visual field
- Clouded vision — like looking through a foggy window
- Colour blindness — inability to perceive any colour or certain colours
- Contrast sensitivity — the contrast between objects and their backgrounds is reduced
- Poor acuity — vision that is not sharp
- Poor lighting — typically when outdoors in the sun
- Tunnel vision — only seeing the middle of the visual field
- And more…
Behaviours & needs
Visually impaired users require a significant amount of trust in people and technology to feel comfortable. When using digital displays they may only be able to see a small portion of the content at a time. To recreate this try reading this section by lightly clenching your fist to leave a small hole and putting it up to your eye, now read on.
Customising settings for fonts, colours, and spacing is important, especially enlarging text sizes and images, in some cases up to 1200% magnification. This allows them to cater the interface to their needs. They also expect a common layout to remain oriented as they will start in the top left corner and work left to right, top to bottom. Users with severe visual issues may not use a monitor at all and need all tasks to be accomplishable with a keyboard & screenreader. This means tabbing orders and skip links need to work correctly, it also means the correct labels have been added in the code for screen readers to use and perform commands.
Problems
A lack of full keyboard support is still a big issue (test, test, test features with keyboard only!), as well as interactions that are not executable by other tools that they use. Define the tools these users need and test that they work for every feature implemented.
Other problems include alt text that is missing on images and controls or hasn’t been updated, providing incorrect or missing information to screen readers. Content that prevents resizing or that loses information when resized, for example, content overlapping or hidden off-screen. A lack of visual orientation cues like headings, navigational aids, and background colour changes which prevent users from finding their way around the interface. Poor foreground and background contrast on text and media content as well as missing textual or audio descriptions on videos. Lastly, interactions that don’t provide feedback on the component itself but elsewhere on the interface outside of their visual field causing confusion and them to question: “Did that do anything?”.
Tools
Some of the tools used include:
- Audio descriptions
- Keyboard only
- Magnification (zoom)
- Refreshable braille display
- Screenreader
- Text-to-speech
- Voice recognition
Inclusive design tips & tricks
So how do we provide a better experience for visually impaired users?
Audio & video
- Clearly distinguish foreground noise by removing or reducing any background noises
Colour
- Don’t use colour only to convey a message, include shapes, patterns, text, symbols. Especially for messages (success, error, info, etc.)
- Use a contrast checker on your current style guide and any future or new colour combinations to ensure compliance. This includes text on background colours, images, and brand colours.
- Use background colours to indicate content/section change when scrolling, this helps orient users if the full interface can’t be seen
Forms
- Place input error messages in proximity to the input, ensure they are connected in the code, use the aria described by label, this tells screen readers which field the message is connected to
Images
- Functional & informational images and icons need text equivalent (alt-text), decorative images and icons don’t (ask yourself if the media was gone would the page or meaning be affected?)
- Consider allowing informational images to retain a usable size on smaller screens by scrolling horizontally allowing exploration (works for tables too)
- Include a description of the product image on eCommerce sites
- Use aria-labels on embedded SVGs to allow screen readers to read them (alt text doesn’t work on SVGs as they do on images)
- Use alt text on images that convey the intended message and action instead of visually describing it
Interactions
- Provide feedback within the proximity of the component interacted with, otherwise, the confirmation will be missed and cause confusion
Layout
- Place related items together, proximity is important for magnification and a low field of vision
- Place important/relevant information in prominent areas so they can be easily found by users with a reduced field of vision
- Make sure mobile menus are coded properly for screen readers and tabbing. They need to read and interact from top to bottom, for example, the menus open/close trigger is coded before the menu itself. If coded the other way around the user has to move back not forwards to access the menu items.
- Code flexible heights, using ems/rems instead of absolute measurements like pixels this allows for an increase in text size and provides screen height responsiveness, test this up to 200% font size as a minimum
- Ensure pages are coded in a way that content can be processed in different ways for the most effective experience through browsers and assistive technologies. For example, it might be more efficient and usable for a visually impaired user using a screenreader if certain content was presented differently compared to the default.
Tabbing
- If using outline none, make sure to replace it, as good or even better, plan focus states on everything, test fully! Otherwise, users who tab won’t be able to find where they are on the interface
Testing interfaces
- Look through a straw or make a small hole with your fist to test interfaces, work from left to right, top to bottom. Can you understand the content and complete tasks?
- Confirm alt text is accurate to what’s visually there, voice commands need alt text to be correct
Touch screens
- Do not disable pinch and zoom on smaller screens this will inhibit those with poor eyesight from accessing the content
- Provide alternatives for touch only interactions that work with assistive technologies like screen readers
This list scratches the surface on designing inclusively for visual disabilities. This course on LinkedIn learning is well worth watching:
As are these articles:
Up next
I’ll be discussing how to design inclusively for physical disabilities. The problems they face, their behaviours and needs, the tools they use, and how we can design to include them. If you found this article helpful and are interested in the next 2 articles on the various disabilities, press Follow and stay tuned.
What design tips do you have when designing for visual/sight impairments? Let’s all share our knowledge and help each other out in the comments!
