meta viewport does not prevent zoom

  • Rule Typeatomic
  • Rule ID: b4f0c3
  • Last modified: Sep 24, 2019
  • Accessibility Requirements Mapping
    • 1.4.4 Resize text (Level: AA)
      • Learn More about 1.4.4 (Resize text)
      • Required for conformance to WCAG 2.0 and above on level AA and above.
      • Outcome mapping:
        • Any failed outcomes: not satisfied.
        • All passed outcomes: further testing needed.
        • An inapplicable outcome: further testing needed.
  • Input Aspects

Description

This rule checks that the meta element retains the user agent ability to zoom.

Applicability

The rule applies to each meta element with a name attribute whose value is a case-insensitive match for viewport and has a content attribute.

Expectation

For each test target, the content attribute, whose value is mapped to a list of property/value pairs in a user-agent specific manner, does not:

  • specify the property user-scalable with a value of no; nor
  • specify the property maximum-scale with a value of less than 2

Assumptions

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

The meta name="viewport" element does not define the maximum-scale and user-scalable values.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="width=device-width" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Passed Example 2

The meta name="viewport" element defines the user-scalable=yes so the user can still zoom in.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="user-scalable=yes" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Passed Example 3

The meta name="viewport" element defines the maximum-scale=6.0 which allows the user to zoom.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="maximum-scale=6.0" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Passed Example 4

The meta name="viewport" element has an empty content attribute.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Failed

Failed Example 1

The meta name="viewport" element defines the user-scalable=no so the user can't zoom in.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="user-scalable=no" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Failed Example 2

The meta name="viewport" element defines the user-scalable=yes, but prevents maximum-scale to 1.5.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content="user-scalable=yes, initial-scale=0.8, maximum-scale=1.5" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Failed Example 3

The meta name="viewport" element sets the maximum-scale=1.0 so the user can't zoom in.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content=" maximum-scale=1.0" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Failed Example 4

The meta name="viewport" element sets the maximum-scale=yes which translates to 1.0, so the user can't zoom in.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content=" maximum-scale=yes" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Failed Example 5

The meta name="viewport" element sets the maximum-scale=-1 which is dropped because it is a negative value.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" content=" maximum-scale=-1" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Inapplicable

Inapplicable Example 1

The meta name="viewport" element is not present within the page.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta http-equiv="refresh" content="10; URL='https://github.com'" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Inapplicable Example 2

The meta name="viewport" element does not have content attribute.

<html>
	<head>
		<title>Simple page showing random text</title>
		<meta name="viewport" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Glossary

Outcome

key: outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Visible

key: visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

Examples

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and help implementers of ACT rules understand it.

This span element is visible (by default, elements are visible).

<span>Now you can see me!</span>

This span element is not visible because of the CSS visibility property.

<span style="visibility: hidden">I'm the invisible man</span>

This span element is not visible because of the CSS display property.

<span style="display: none">I'm the invisible man</span>

This span element is not visible because it is positioned off-screen

<span style="position: absolute; top: -9999px; left: -9999px;">Incredible how you can</span>

This span element is not visible because it contains only whitespace and line breaks.

<span>
	<br />
	&nbsp;
</span>

This span element is not visible because it has the exact same color as its background.

<span style="color: #00F; background: #00F;">See right through me</span>

Useful Links


Implementations

Tool NameCreated ByReport
AlfaSiteimproveView Report

Acknowledgements

Table of Contents