Responsive Design for users with low vision

Responsive design was originally invented for small screens and mobile devices. The design adjusts itself to fit into a single column, text reflows and horizontal scrolling is avoided.

These adjustments not only make it easier for all users to see content on smaller screens, but are also a huge benefit for users with limited vision who rely on zooming in to see the content. This is because zooming in creates almost the same conditions as on small screens and mobile devices.

In this article, I want to show you how to effectively create content and make it look good even when people zoom in to view your content.

Screen Magnifiers

People with low vision need to use screen magnifiers to see content properly. They use either the browser's built-in zoom, zoom tools built into electronic devices, or third-party tools (assistive technology) like such as ZoomText and Magic.

Therefore, make sure that users can zoom and do not disable zoom, and make sure that the design provides full functionality and readability even when zooming.

Now and then I see websites that set user-scalable=no and maximum-scale=1.0 to prevent users from zooming in. I guess the main reason is that companies are afraid that zooming in will break their design. They don't think about the people who depend on the ability to zoom in to perceive their content properly, or at all.

This applies not only to websites, but also to mobile browsers. It's a good thing that Safari, for example, completely ignores this meta viewport property.

<meta name="viewport" content="user-scalable=yes" />

or

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />

are the best way to use this property. The code allows users to use pinch-to-zoom to magnify the screen to a maximum level of 200% by setting maximum-scale to 2.0. 200% is the minimum acceptable zoom level.

Zoom only text

The page should be functional when only the text is magnified to 200% of its initial size. Check out WCAG2.1 success criterion on resizing text.

It explicitly is saying text because in most browsers you can choose between full-page zoom and text-only zoom. I will show an example below of Firefox (on Mac OS) since I am most familiar with this browser.

Choose View > Zoom > Zoom Text Only from the main menu.

With full-page zoom, everything magnifies proportionally. With text-only zoom, only the text magnifies, without expanding the layout elements, tables, images, videos, or any other part of the design.

Full-page zoom usually has no impact on the design or layout if it is responsive. Text-only zoom can have dramatic effects on the design and layout.

Default state

Zoom in 200%

Text-only zoom in 200%

You can avoid these negative effects by using relative units such as em instead of px, avoiding overflow: hidden, and not setting a fixed height so that the content always adjusts to the height (or set div height relative to font height with em).

Be careful and test your site thoroughly so that components do not overlap.

Remember that some people use custom CSS stylesheets for better readability, such as people with dyslexia.

Make sure that no content or functionality is lost when the text is adjusted to the following values, and note that not all of these requirements apply to all languages (e.g. Chinese):

• Line height (line spacing) to at least 1.5 times the font size
• spacing after paragraphs to at least 2 times the font size
• letter spacing (tracking) to at least 0.12 times the font size
• Word spacing to at least 0.16 times the font size

Reflow - prevent scrolling

Pages need to adapt to the current width when zoomed in up to 400%, so that the content is still displayed in only one column and scrolling behavior is avoided.
This is best achieved using CSS media queries for responsive design. For more details check out WCAG's success criterion on reflow.

Of course, this rule does not apply to e.g. large graphics, images or data tables, where it is not possible to turn the page without losing the content.

Mobile Specific Best Practices

• fill the entire width with the main content (just a little bit of padding or margin on the sides is enough)
• one-column layout (linear layout) for better user experience and readability (automatically logical reading order)
• do not use float on images or other similar objects
• prevent horizontal scrolling by adjusting the width of the content to fit the device's viewport
• don't use fixed or maximum width, which prevents text from reflow (use % or no width)
• allow orientation

Best Practices For Images

Use SVG instead of PNG or JPG to avoid losing sharpness and clarity when zooming in (up to 500%).

Conclusion

A good responsive design with functional breakpoints on all devices is of great advantage and very helpful for people with visual impairments.
So make sure you use the right breakpoints and test your design in zoomed in state for text and images.

---

Thanks for your reading and time. I really appreciate it!

Comments

[Eddie]

This is a great article! Thank you for sharing, Julia! I love the perspective of responsive design for accessibility. So many people focus on responsive design simply as avoiding a mobile app or similar things.

The accessibility angle is so important and powerful. This includes the special callouts that people may miss about accessibility like using SVG instead of PNG/JPG. I personally haven't thought about the browser zooming feature and the benefits of SVG there!

[Julia 👩🏻‍💻 GDE]

Thank you so much for your comment Eddie :)

[Favour Felix]

The user-scalable meta tag is new information to me. Thanks for sharing!