WCAG 1.4.4: Resize Text

How to

• No loss of content or functionality when zooming

  When zooming, text shouldn’t be cut off or overlapped in a way that makes it unreadable, and functions shouldn’t disappear.

  Allow containers to grow, making text wrap correctly (e.g., with text-wrap), and ensure that the same content remains available in all views (desktop, tablet, mobile).

  On zooming websites usually switch to tablet or mobile view. Sometimes content or functions are missing in these views. This is a problem for people who can no longer access these functions after zooming. All content and functions must remain available in these views as well, even if their layout changes (Exmaple: main menu gets hidden behind a hamburger icon).

  Technique(s):

  • G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
  

• Provide zoom controls

  A website can offer its own controls to enlarge text or the entire page up to 200%. This is helpful for users who are less tech-savvy.

  The same rules apply here: content must not be lost or overlap, and the controls themselves must be accessible.

  Make sure the control actually zooms the text to a full 200% and not just 150% or 180%.

  Technique(s):

  • G178: Providing controls on the web page that allow users to incrementally change the size of all text on the page up to 200 percent