Introduction

Why Focus on Responsive design and Zoom?

One of the best things designers and developers can do to design for people with low vision is create responsive designs that adapt to small screens and that allow users to zoom in.

Users with low vision frequently need to magnify the content, and may use a combination of browser zoom plus a separate screen magnifier such as ZoomText or MAGic. This course explores some of the accessibility nuances of responsive designs and zoom features.

Summary

Even though responsive design was invented primarily for small screens and mobile devices, responsive design greatly benefits people with low vision who need to zoom in on content. Zooming in reduces the amount of screen real estate available, creating conditions essentially identical to the small screens of small mobile devices.

When the screen real estate is limited, it's best if the design can adapt by becoming simpler and "slimmer," fitting in a single column, rather than in two or more columns. Text should reflow to fit the smaller screen size, and horizontal scrolling should be eliminated, if possible. In short, the design should be optimized for viewing in mobile or zoom conditions.

Resources

Deque University

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Responsive Design

Checklist - Deque

Responsive Design

  • Forms SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Images SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Objects/plugins SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Tables SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Text SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • UI components SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Video elements SHOULD reflow to fill most of the width of the viewport, without causing any horizontal viewport overflow.
  • Features of the content MAY be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports.
  • Features of the interface SHOULD be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports.

Download Summary & Checklist

Tips & Tricks

  • When using default browser zoom on a desktop, just like it happens for re-sizing the viewport, media queries are triggered showing the tablet or mobile version.
  • This is often used by people with low vision so never assume the mobile version is only seen on a mobile.

Jump to:

Guidelines

Practice

WCAG Annotations

Try all the ways for using a responsive web app with Good/Bad site

Design Annotations

None documented

Zoom

Checklist - Deque

Text zoom:

  • The page SHOULD be functional when only the text is magnified to 200% of its initial size.
  • The page SHOULD be readable when only the text is magnified to 200% of its initial size.

Mobile zoom:

  • The page MUST allow users to zoom in on mobile devices.

Magnification visual quality:

  • Text SHOULD magnify losslessly, or with minimal visual degradation, to retain readability.
  • Icons and graphics SHOULD magnify losslessly, or with minimal visual degradation.

Download Summary & Checklist

Tips & Tricks

  • When using default browser zoom on a desktop, just like it happens for re-sizing the viewport, media queries are triggered showing the tablet or mobile version.
  • This is often used by people with low vision so never assume the mobile version is only seen on a mobile.
  • When people zoom in on parts of the page, with or without assistive technology, it's likely they are not aware of changes on other parts of the page. Design and code in a way to inform all users of these changes.

Touch / Click Target Size

Checklist - Deque

Touch / Click Target Size

  • The click/touch target size SHOULD be large enough to facilitate easy use with a finger, without risking activating an adjacent link or button.

Download Summary & Checklist

Tips & Tricks

None documented

Jump to:

Guidelines

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented