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 https://whatismyviewport.com/ to set the viewport size

TOOLS:

• Magnifier

Document these issues when zoom testing:

• Overlapping, unreadable content
• Horizontal scrolling