How can you design for screen magnifier users?

1 Use relative units

Avoid using fixed or absolute units, such as pixels, for font sizes, layouts, and spacing. They can cause problems when users zoom in or out, as they can distort the proportions and alignments of your elements. Instead, use relative units, such as percentages, ems, or rems, that adapt to the user's preferences and device settings. This way, you can ensure that your design is responsive and flexible.

3 Avoid clutter and distractions

Screen magnifier users often have a limited view of the screen, which can make it hard to scan and comprehend the information. Too much clutter and distraction can overwhelm and confuse them. Try to simplify your design by reducing unnecessary elements, such as images, icons, animations, or ads. Use whitespace and headings to create a clear hierarchy and structure. Use simple and concise language to convey your message.

4 Support text resizing

Some screen magnifier users may prefer to increase the text size instead of zooming in the whole screen. This can help them read the content more comfortably and efficiently. To support text resizing, make sure your text is resizable without breaking the layout or functionality. Use media queries and breakpoints to adjust your design for different text sizes. Test your website with different browsers and devices to ensure it works well.

5 Optimize images and icons

Images and icons can enhance your design and communication, but they can also create barriers for screen magnifier users. If your images and icons are too small, blurry, or complex, they can be hard to see and understand. To optimize them, make sure they are large enough, clear, and meaningful. Use alt text and captions to describe their content and purpose. Avoid using images and icons as the only way to convey information.

6 Test with screen magnifiers

The best way to design for screen magnifier users is to test your website with screen magnifiers. You can use different tools, such as Windows Magnifier, ZoomText, or SuperNova, to see how your website looks and behaves when zoomed in. You can also ask for feedback from real users with low vision who use screen magnifiers. This can help you identify and fix any issues or gaps in your design.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?