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:
- Locate the
<meta>element. - Replace it with an incluse viewport setting (e.g.,
<meta name="viewport" content="width=device-width, initial-scale=1.0">). - Avoid using the
user-scalable=noand themaximum-scale=1.0attributes in the viewport tag.