You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This rule applies to each `content` attribute on a `meta` element with a `name`[attribute value][] of `viewport`for which at least one of the following is true:
29
+
This rule applies to each `content` attribute for which all of the following are true:
28
30
29
-
- the `content`[attribute value][] has the `user-scalable` property; or
30
-
- the `content`[attribute value][] has the `maximum-scale` property.
31
+
- the attribute is defined on a `meta` element with a `name`[attribute value][] of `viewport`; and
32
+
- the [attribute value][] has at least one of the `maximum-scale` or `user-scalable` keys.
33
+
34
+
For the purpose of this rule, the [attribute value][] of the `content` attribute is a list of key/value pairs.
31
35
32
36
## Expectation 1
33
37
34
-
For each test target, the [attribute value][] does not have a `user-scalable` property with a value of `no`.
38
+
For each test target's [attribute value][], at least one of the following is true:
39
+
40
+
-`user-scalable` is not defined; or
41
+
-`user-scalable` is `yes`, `device-width` or `device-height`; or
42
+
-`user-scalable` is a number which is not between -1 and 1 (excluded).
43
+
44
+
**Note:** This is equivalent to applying the [translations into a `@viewport` descriptors][descriptor translation] and not obtaining a value of `fixed` for the `user-zoom` descriptor from [the translation for `user-scalable`](https://www.w3.org/TR/css-device-adapt-1/#user-scalable).
35
45
36
46
## Expectation 2
37
47
38
-
For each test target, the [attribute value][] does not have a `maximum-scale` property with a value less than 2.
48
+
For each test target's [attribute value][], at least one of the following is true:
49
+
50
+
-`maximum-scale` is not defined; or
51
+
-`maximum-scale` is `device-width` or `device-height`; or
52
+
-`maximum-scale` is a negative number; or
53
+
-`maximum-scale` is a number which is 2 or more.
54
+
55
+
**Note:** This is equivalent to applying the [translations into a `@viewport` descriptors][descriptor translation] and not obtaining a value smaller than 2 for the `max-zoom` descriptor from [the translation for `maximum-scale`](https://www.w3.org/TR/css-device-adapt-1/#min-scale-max-scale).
39
56
40
57
## Assumptions
41
58
42
-
Pages for which any of the following is true may satisfy success criteria Success Criteria [1.4.4 Resize text][sc144] and [1.4.10 Reflow][sc1410], even if the rule results in a failed outcome.
59
+
Pages for which any of the following is true may satisfy Success Criteria [1.4.4 Resize text][sc144] and [1.4.10 Reflow][sc1410], even if the rule results in a failed outcome.
43
60
44
61
- The [page][] has no [visible][][content][]; or
45
62
- There is another [mechanism](https://www.w3.org/TR/WCAG21/#dfn-mechanism) available to resize the text content; or
@@ -49,6 +66,8 @@ Pages for which any of the following is true may satisfy success criteria Succes
49
66
50
67
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.
51
68
69
+
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](https://www.w3.org/TR/css-device-adapt-1/#parsing-algorithm). Different user agents may behave differently in some cases.
70
+
52
71
## Background
53
72
54
73
### Bibliography
@@ -83,6 +102,24 @@ This viewport `meta` element does not prevent user scaling because it has `user-
83
102
84
103
#### Passed Example 2
85
104
105
+
This viewport `meta` element does not prevent user scaling because it has `user-scalable` set to `5`.
106
+
107
+
```html
108
+
<html>
109
+
<head>
110
+
<title>Simple page showing random text</title>
111
+
<metaname="viewport"content="user-scalable=5" />
112
+
</head>
113
+
<body>
114
+
<p>
115
+
Lorem ipsum
116
+
</p>
117
+
</body>
118
+
</html>
119
+
```
120
+
121
+
#### Passed Example 3
122
+
86
123
This viewport `meta` element allows users to scale content up to 200% because it has `maximum-scale` set to 2.0.
87
124
88
125
```html
@@ -99,9 +136,9 @@ This viewport `meta` element allows users to scale content up to 200% because it
99
136
</html>
100
137
```
101
138
102
-
#### Passed Example 3
139
+
#### Passed Example 4
103
140
104
-
This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1 which results in this value being dropped.
141
+
This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1, a negative value.
105
142
106
143
```html
107
144
<html>
@@ -117,6 +154,24 @@ This viewport `meta` element does not prevent user scaling because it has `maxim
117
154
</html>
118
155
```
119
156
157
+
#### Passed Example 5
158
+
159
+
This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to `device-width`.
[descriptor translation]: https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport'Translations of the content attribute into @viewport descriptors'
270
381
[meta]: https://html.spec.whatwg.org/#the-meta-element'The meta element'
382
+
[maximum-scale]: https://www.w3.org/TR/css-device-adapt-1/#min-scale-max-scale'The initial-scale, minimum-scale, and maximum-scale properties'
0 commit comments