- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Thu, 06 Oct 2016 12:48:53 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: Momdo Nakamura
Submitter's Email: xmomdo@gmail.com
Technique ID: UNKNOWN
Short Name: Failure of Success Criterion 1.4.4 when visually rendered texts are not resizable at least to 200 percent on devices with touch screens
Technique Category: Common Failures
Success Criterion Reference: UNKNOWN
Applicability:
(X)HTML and CSS
Description:
The objective of this failure condition is to address an issue that users can neither magnify nor reduce rendered visual contents, including texts, on devices with touch interface. The issue is often observed on smartphones, tablet computers and PCs with touch pads, which supports so-called "pinch zoom". The following conditions cause this issue:
Specifies certain value on <meta name="viewport">
Specifies certain descriptor in @viewport CSS rule
Example 1 Head: Pinch-out is explicitly inhibited using the meta element.
Example 1 Description:
<meta name="viewport" content="user-scalable=no">
Example 2 Head: Failure example 2
Example 2 Description:
<meta name="viewport" content="maximum-scale=1.5">
Resource 1 Title: CSS Device Adaptation Module Level 1
Resource 1 URI: https://www.w3.org/TR/css-device-adapt-1/
Resource 2 Title: Using the viewport meta tag to control layout on mobile browsers
Resource 2 URI: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Test Procedure:
1. Open the web page with a user agent on a device with a touch screen.
2. Try to "pinch zoom" to 200 %.
3. Check that the text contents has been magnified by 200 %.
Expected Result:
Check #3 is true.
Additional Notes:
Failure example 3
Pinch-out is explicitly inhibited by @viewport CSS rule.
@viewport {
user-zoom: fixed;
}
Failure example 4
Zoom scale is limited by @viewport CSS rule and the contents cannot be enlarged to 200 %.
@viewport {
max-zoom: 1.5;
}
Resources
Title 3:@viewport
URI 3: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/@viewport
No guidelines reference was submitted!
No UA issues were submitted!
No related techniques were submitted!
No test file 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!
------------------------------------------------
<technique id="UNKNOWN">
<short-name>Failure of Success Criterion 1.4.4 when visually rendered texts are not resizable at least to 200 percent on devices with touch screens</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>
<applicability>
(X)HTML and CSS
</applicability>
<ua_issues>
</ua_issues>
<description>
The objective of this failure condition is to address an issue that users can neither magnify nor reduce rendered visual contents, including texts, on devices with touch interface. The issue is often observed on smartphones, tablet computers and PCs with touch pads, which supports so-called "pinch zoom". The following conditions cause this issue:
Specifies certain value on <meta name="viewport">
Specifies certain descriptor in @viewport CSS rule
</description>
<examples>
<ex_head_1>
Pinch-out is explicitly inhibited using the meta element.
</ex_head_1>
<ex_desc_1>
<meta name="viewport" content="user-scalable=no">
</ex_desc_1>
<ex_head_2>
Failure example 2
</ex_head_2>
<ex_desc_2>
<meta name="viewport" content="maximum-scale=1.5">
</ex_desc_2>
</examples>
<resources>
<resources_title1>
CSS Device Adaptation Module Level 1
</resources_title1>
<resource_uri1>
https://www.w3.org/TR/css-device-adapt-1/
</resource_uri1>
<resources_title2>
Using the viewport meta tag to control layout on mobile browsers
</resources_title2>
<resource_uri2>
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
</resource_uri2>
</resources>
<related_techniques>
</related_techniques>
<tests>
<procedure>
1. Open the web page with a user agent on a device with a touch screen.
2. Try to "pinch zoom" to 200 %.
3. Check that the text contents has been magnified by 200 %.
</procedure>
<expected_result>
Check #3 is true.
</expected_result>
<test_file_1>
</test_file_1>
<pass_fail_1>
</pass_fail_1>
<test_file_2>
</test_file_2>
<pass_fail_2>
</pass_fail_2>
</tests>
</technique>
Additional Notes:
Failure example 3
Pinch-out is explicitly inhibited by @viewport CSS rule.
@viewport {
user-zoom: fixed;
}
Failure example 4
Zoom scale is limited by @viewport CSS rule and the contents cannot be enlarged to 200 %.
@viewport {
max-zoom: 1.5;
}
Resources
Title 3:@viewport
URI 3: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/@viewport
Received on Thursday, 6 October 2016 12:49:27 UTC