Component Library

Zoom 400% / Reflow / Responsive Design

Issue Description

Zooming content or viewing in mobile layouts is not responsive, requires horizontal scrolling at 400% magnification.

Recommendation

Ensure that web content responds to the needs of the users and the devices they're using. Layouts should change based on the size and capabilities of the device. Browser zoom should be responsive up to 200%.

Ensure that, when enlarged, text doesn't become illegible when zoomed because it overlaps with adjacent text or truncated altogether.

  • A <user-scalable="no"> attribute on the page's <meta name="viewport"> element, disabling zooming.

When enlarging content in the browser to 200%, content should be responsive and not overlap other page elements.

  • The document must not use the user-scalable="no" parameter in the <meta name="viewport"> element because it disables text scaling and zooming which is essential to users with low vision.

https://www.levelaccess.com/what-does-responsive-web-design-have-to-do-with-accessibility/