Viewport Meta Element Check

Description

The “Viewport Meta Element Check” evaluates whether the <meta name="viewport"> element does not disable user scaling (i.e., pinch-to-zoom).

Example outcome

I noticed that the meta element does not prevent users from zooming.

Impact

• Visual Impairments: Individuals with visual impairments cannot zoom text or interface elements for better legibility.
• Motor Impairments: Small tap targets remain small, increasing interaction difficulty for users with motor impairments.
• Cognitive Disabilities: Inability to enlarge content may lead to confusion or reading fatigue.
• Elderly: Elder people will face reduced reading comfort due to small, fixed-sized content.

Fixes

To address <meta> elements that prevent users from zooming:

1. Locate the <meta> element.
2. Replace it with an incluse viewport setting (e.g., <meta name="viewport" content="width=device-width, initial-scale=1.0">).
3. Avoid using the user-scalable=no and the maximum-scale=1.0 attributes in the viewport tag.

Resources

• WCAG 2.2: Understanding Success Criteria 1.4.4
• ACT Rules: Meta viewport allows for zoom
• WebAIM: Accessible CSS