Ensure <meta name="viewport"> does not disable text scaling and zooming

The <meta name="viewport"> element should be configured to allow users to zoom and scale content, which is essential for accessibility, particularly for individuals with low vision.

About This Rule

This guideline ensures that users can zoom and scale web content, enhancing accessibility for individuals with low vision. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (AA): 1.4.4 Resize Text
• WCAG 2.0 (AA): 1.4.4 Resize Text
• WCAG 2.2 (AA): 1.4.4 Resize Text
• EN 301 549

Why It Matters

Disabling zooming or limiting scaling can hinder users with visual impairments from adjusting content to a comfortable size, adversely affecting readability and navigation. Allowing users to control the zoom level ensures that web content is accessible to a broader audience. :contentReference[oaicite:0]{index=0}

How to Fix

To ensure accessibility:

• Allow User Scaling: Remove the user-scalable="no" parameter from the <meta name="viewport"> element to permit user zooming.
  

  <!-- Remove this -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  
  <!-- Use this instead -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

• Set Appropriate Maximum Scale: Ensure that the maximum-scale parameter, if specified, is not less than 2 to allow sufficient zooming capability.
  

  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
        

Examples

Incorrect

Disabling user scaling:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Correct

Allowing user scaling with appropriate maximum scale:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">

More Information

• H76: Using meta refresh to create an instant client-side redirect
• F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page