resize-2x-zoom

Ensures that webpages can be zoomed up to 200 percent without losing content, layout, or design integrity.

Description

Users with low vision can access content better when zoomed in. If webpage elements overlap, truncate, or move out of the viewport when zoomed in, it becomes difficult to access the webpage.

Modern browsers can handle zoom-in function without distorting content. However, you need to create your webpages using technologies supported by these browsers to benefit from this.

The resize-2x-zoom rule checks whether overlap, truncation, or removal of content from viewport occurs at 200% zoom.

Example

Consider the following screenshot of a simple website:

Here, all the elements appear correctly when not zoomed in.

Now, check the following screenshot in which the website is zoomed in by 200 percent.

Following are some of the violations of the resize-2x-zoom rule in the above example:

• The ‘Get To Know Us’ button is overlapped by the title ‘Skincare Shop’.
• The text ‘A sample homepage of a skincare product website’ is truncated.
• Some design elements are moved out of the viewport.

To avoid such issues, you can use responsive designs on your websites and test them on multiple browsers.

How to fix?

• Fix any text truncation till 200% zoom.
• Fix any text and image overlap till 200%.
• Fix any overlap of text input elements with other elements till 200% zoom.
• Fix any part of the content that goes beyond the viewport till 200 % zoom.
• Use content authoring technologies that are supported by commonly-available browsers.

Reference

• WCAG 1.4.4: Resize Text
• G142: Using a technology that has commonly-available user agents that support zoom