Testing for responsive design

Yes, zooming of content/text is related to accessibility. There are many disabilities related to vision where users have the problem of vision/seeing, one of them is where they are not 100% blind, for aging people, hard to read is one of the common problems. Hence, they zoom in to read the content. As per WCAG, we should support 400% zooming.

IMPACT:

Users with low vision, unavailability of reading glasses, aged people

WCAG CHECKLIST FOR ZOOM TEXT:

• Zoom the web page to 200% to ensure the content is readable/legible [exception: maps, images, videos, data tables]
  ☐ Yes ☐ No
• Zoom the web page to 200% to ensure the text/content is not overlapping with each other
  ☐ Yes ☐ No
• Zoom the web page to 200% to ensure there is no horizontal scroll bar so that the web application is displayed across a single column instead of multiple columns and hence not confusing the customer with web navigation
  ☐ Yes ☐ No
• Zoom the web page to 200% to ensure no text is cut throughout the website
  ☐ Yes ☐ No
• Zoom the web page to 400% & set view-port to 1280 px, to ensure the content is readable/legible [exception: maps, images, videos, data tables]
  ☐ Yes ☐ No
• Zoom the web page to 400% & set view-port to 1280 px, to ensure the text/content is not overlapping with each other
  ☐ Yes ☐ No
• Zoom the web page to 400% & set view-port to 1280 px, to ensure there is no horizontal scroll bar so that the web application is displayed across a single column instead of multiple columns and hence not confusing the customer with web navigation
  ☐ Yes ☐ No
• Zoom the web page to 400% & set view-port to 1280 px, to ensure no text is cut throughout the website
  ☐ Yes ☐ No
• Reset the zoom to 100% and resize the browser window and try to navigate using keyboard throughout the application and ensure consistent logical navigation without keyboard traps
  ☐ Yes ☐ No
• When the web-page/browser is resized manually, the content & images has to adjust/resize automatically to render in the given screen size/resolution without any horizontal scroll bar, no overlapping text, no text is cut
  ☐ Yes ☐ No
• Text is actual text and resizes and reflows as per zoom level set (e.g. not images of text)
  ☐ Yes ☐ No
• Font sizes of the text content increase when you zoom in on the page without loss of content or functionality
  ☐ Yes ☐ No
• Text does not become pixelated when zooming in on the page
  ☐ Yes ☐ No
• Items do not become jumbled when zooming in on the page
  ☐ Yes ☐ No
• Change the font-size to Huge in Chrome → Settings → Search for ‘Font Size’ → Click on Customize fonts → Change Font size to Huge (chrome://settings/fonts?search=font+size) → Now, load a web page to see if the content adjust accordingly
  ☐ Yes ☐ No
• Use Magnifier at 200% or 300% on the website and navigate to check if the content is readable/legible
  ☐ Yes ☐ No
• When the page is zoomed to 400%, the scrollable content should be clearly visible without any hindrance from static headers (hamburger menus etc)
  ☐ Yes ☐ No
• Making sure the website layout still works from Portrait to Landscape
  ☐ Yes ☐ No
• Make sure the website application works in all themes mode i.e., light theme, dark theme etc
  ☐ Yes ☐ No

Note: To set the viewport to 1280 pixel, open chrome developer tools and resize the browser window to see the view port size getting changed OR visit What’s My Viewport to set the viewport size

TOOLS:

• Magnifier

Document these issues when zoom testing:

• Overlapping, unreadable content
• Horizontal scrolling