Zoom and Responsive Design for Mobile

Web Accessibility 101: Zoom and Responsive Design for Mobile

While the responsive design was created mostly for mobile devices and small screens, it also helps people with vision issues by way of the zoom feature that comes with it. Zooming in on content minimizes screen real estate usage, producing settings resembling a small mobile device screen.

When there is limited screen real estate, the design should be made adaptable by getting more straightforward and basic – everything should be squeezed into one column as opposed to two. Wording should be reflowed to accommodate the size of a smaller screen, while complete removal of horizontal scrolling is encouraged. Ultimately, the design should accommodate views in zoom or mobile modes where feasible.

Responsive design checklist

• Forms should reflow so that a large portion of the viewport’s width doesn’t trigger overflow of the horizontal viewport.
• Tables should reflow to fill up a large portion of the viewport’s width without triggering overflow of the horizontal viewport.
• Pictures should reflow to take up a significant portion of the viewport’s width without it triggering an overflow of the horizontal viewport.
• Text should reflow to so that a large portion of the viewport’s width is filled without triggering overflow of the horizontal viewport.
• UI components should reflow so that a large portion of the viewport’s width is filled without triggering any overflow of the horizontal viewport.
• Video components should reflow so that a large portion of the viewport’s width is filled without triggering any overflow of the horizontal viewport.
• Content aspects can be minimized in size, simplified, or removed upon magnification or on small viewports.
• Interface aspects should be minimized in size, simplified, or removed when seen on small viewports or magnified.

Zoom

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.

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.