Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit meta-viewport

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

Impact:

Critical

WCAG-Konformität:

AA
WCAG 1.4.4

Issue type:

failure

Meta viewport allows for zoom

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

Applicability

This rule applies to each content attribute for which all of the following are true:

the attribute is defined on a meta element with a name attribute value of viewport; and
the attribute value has at least one of the maximum-scale or user-scalable keys.

For the purpose of this rule, the attribute value of the content attribute is a list of key/value pairs.

Expectation 1

For each test target's attribute value, at least one of the following is true:

user-scalable is not defined; or
user-scalable is yes, device-width or device-height; or
user-scalable is a number which is not between -1 and 1 (excluded).

Note: This is equivalent to applying the translations into a @viewport descriptors and not obtaining a value of fixed for the user-zoom descriptor from the translation for user-scalable.

Expectation 2

For each test target's attribute value, at least one of the following is true:

maximum-scale is not defined; or
maximum-scale is device-width or device-height; or
maximum-scale is a negative number; or
maximum-scale is a number which is 2 or more.

Note: This is equivalent to applying the translations into a @viewport descriptors and not obtaining a value smaller than 2 for the max-zoom descriptor from the translation for maximum-scale.

Background

Assumptions

Pages for which any of the following is true may satisfy Success Criteria 1.4.4 Resize text and 1.4.10 Reflow, even if the rule results in a failed outcome.

The page has no visible content; or
There is another mechanism available to resize the text content; or
The content does not need to reflow in order to fit in an area of 320 by 256 CSS pixels.

Accessibility Support

Desktop browsers ignore the viewport meta element, and most modern mobile browsers either ignore it by default or have an accessibility option which will allow zooming. This rule is not relevant for desktop browsers, nor for most modern mobile browsers. Only users with older mobile browsers can experience issues tested by this rule.

The exact way the content attribute should be parsed (notably, for error handling) is not fully specified. CSS specification includes a non-normative parsing algorithm. Different user agents may behave differently in some cases.

Bibliography

Test Cases

Passed

Passed Example 1

This viewport meta element does not prevent user scaling because it has user-scalable set to yes.

<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 2

This viewport meta element does not prevent user scaling because it has user-scalable set to 5.

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

Passed Example 3

This viewport meta element allows users to scale content up to 200% because it has maximum-scale set to 2.0.

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

Passed Example 4

This viewport meta element does not prevent user scaling because it has maximum-scale set to -1, 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>

Passed Example 5

This viewport meta element does not prevent user scaling because it has maximum-scale set to device-width.

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

Failed

Failed Example 1

This viewport meta element prevents user scaling because it has user-scalable set to no.

<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

This viewport meta element prevents user scaling because it has user-scalable set to 0.5.

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

Failed Example 3

This viewport meta element prevents user scaling because it has user-scalable set to invalid.

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

Failed Example 4

This viewport meta element prevents users to scale content up to 200% because it has maximum-scale set 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 5

This viewport meta element prevents users to scale content up to 200% because it has maximum-scale set to yes.

<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 6

This viewport meta element prevents users to scale content up to 200% because it has maximum-scale set to yes.

<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 7

This viewport meta element prevents users to scale content up to 200% because it has maximum-scale set to invalid.

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

Inapplicable

Inapplicable Example 1

There is no viewport meta element.

<html>
	<head>
		<title>Lorem ipsum</title>
		<meta charset="UTF-8" />
	</head>
	<body>
		<p>
			Lorem ipsum
		</p>
	</body>
</html>

Inapplicable Example 2

This viewport meta element does not have a content attribute.

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

Inapplicable Example 3

This viewport meta element does not specify the maximum-scale nor 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>

Inapplicable Example 4

This viewport meta element does not prevent user scaling because it does not specify the maximum-scale nor user-scalable values.

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

Autoren: Jean-Yves Moyen

Vorherige Autoren: Audrey Maniez, Jey Nandakumar

Finanzierung: WAI-Tools