Day 6 - Accessibility Testing - WCAG Success Criteria - Text Zoom

What I Accomplished Today...
Today, I wanted to understand WCAG Success Criteria – Resize Text

What I Learned Today...
Not everyone uses your site at the default size as it was designed. 

Many people with visual impairments use zoom in order to see the content. It is important to check that website still works even when it's zoomed in.

This is part of the WCAG success criterion: 1.4.4 Resize Text.

Technical Skills Required: Zero

Testing Steps:
  • Open a website on your desktop browser. (Ex: Chrome) 
  • Zoom your browser website page to 200% (or) In browser's settings - Appearance - Page Zoom: 200%
  • See what happens to the content and layout of the webpage.

Observe & Take notes:
  • Is all the content still present on the page and is it still in an order that makes sense?
  • Does any of the content overlap or appears far apart?
  • Do navigation bars or menus get replaced with mobile-style Hamburger menus?
  • Does the page adapt to the new viewing dimensions? Does the content start to stack vertically instead of using a lot of space horizontally?
  • Do you have to scroll horizontally to read everything? Is it impacting your browser experience?
  • This is an important one: Is everything still working? Links, buttons, forms, and menus still function with the content zoomed?
  • Test with Screen Reader, as people with low vision, will combine with assistive technologies to read the content after zoom in.
  • Can able to access the website with Key-board only?

Common Errors:
  1. The website Layout does not look properly
  2. Website Content is lost/does not display properly
  3. Images and content overlap.
  4. Text in form controls does not zoom in to 200%.

This rule checks that the meta element retains the user agent's ability to zoom.

Check Developer Tools - Elements Tab:
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=2.0, user-scalable=yes">

This viewport meta element allows users to scale content up to 200%
because it has a maximum-scale set to 2.0 and does not prevent user scaling because it has a user-scalable set to yes.

Popular Posts

JMeter Producing Error: Windows RegCreateKeyEx(...) returned error code 5

Understanding about Contract Testing