Skip to content

zoom-text-no-overflow-clipping-59br37.md

Latest commit

 

History

History
executable file
·
291 lines (225 loc) · 11.7 KB

zoom-text-no-overflow-clipping-59br37.md

File metadata and controls

executable file
·
291 lines (225 loc) · 11.7 KB
id 59br37
name Zoomed text node is not clipped with CSS overflow
rule_type atomic
description This rule checks that text nodes are not unintentionally clipped by overflow, when a page is zoomed to 200% on 1280 by 1024 viewport;
accessibility_requirements
wcag20:1.4.4
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
input_aspects
DOM Tree
CSS Styling
acknowledgments
authors funding assets
Wilco Fiers
WAI-Tools
The Raven, poem by Edgar Allan Poe

Applicability

This rule applies to any text node for which all of the following is true when in a viewport size of 640 by 512:

Note: A viewport size of 640 by 512 is equivalent to a viewport size of 1280 by 1024 zoomed 200%.

Expectation 1

Each test target is not horizontally clipped by overflow of an ancestor in the flat tree when in a viewport size of 640 by 512, except if the clipping ancestor has a computed white-space of nowrap, and a computed text-overflow that is not clip

Expectation 2

Each test target is not vertically clipped by overflow of an ancestor in the flat tree when in a viewport size of 640 by 512, except if the clipping ancestor has a used line-height equal to or greater than the height of its bounding box, or in case of a computed overflow-y of clip, its content box.

Assumptions

If any of the following assumptions is true, failing this rule may not result in a failure of success criterion 1.4.4 Resize text:

  • There is no other mechanism for resizing text available on the page, that can be used to resize text to 200% without loss of information or functionality. This includes font resizing in the browser, or a javascript mechanism of resizing in the page.

  • Text nodes can not be horizontally or vertically clipped by overflow without loss of information, except for text nodes with an ancestor with aria-hidden set to true, or when specific styles have been applied to ensure text is clipped cleanly (text-overflow, line wrapping or hidden text).

  • While success criterion 1.4.4 Resize text does not explicitly mention which viewport size has to be resized up to 200%, it is assumed that a viewport size of 1280 by 1024 is applicable. A 1280 by 1024 viewport size is explicitly mentioned under success criterion 1.4.10 Reflow.

Accessibility Support

Some user agents treat the value of the aria-hidden attribute as case-sensitive.

Background

When the computed value of the line-height property is normal, the used value depends on font specific metrics. CSS specifications recommend that the used value is between 1.0 and 1.2 and major browsers are effectively using values close to 1.2.

Bibliography

Test Cases

Passed

Passed Example 1

This text node is fully visible at a viewport size of 640 by 512.

<div style="white-space: nowrap; overflow: hidden; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary,<br />
	Over many a quaint and curious volume of forgotten lore.<br />
	While I nodded, nearly napping, suddenly there came a tapping,<br />
	As of some one gently rapping, rapping at my chamber door.<br />
	“’Tis some visitor,” I muttered, “tapping at my chamber door.<br />
	Only this and nothing more.”
</div>

Passed Example 2

This text node is horizontally clipped using text-overflow: ellipsis at a viewport size of 640 by 512. This fulfills expectation 1. A link to a full version of the poem is also provided. The link to the full version is not required by this rule, but is necessary to satisfy [success criterion 1.4.4 Resize text][sc144].

<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>
<a href="/test-assets/59br37/poem.html">Full text of the poem</a>

Passed Example 3

This text node is restricted to a single line, by setting a line-height that is the same as the height. This fulfills expectation 2. A link to a full version of the poem is also provided. The link to the full version is not required by this rule, but is necessary to satisfy [success criterion 1.4.4 Resize text][sc144].

<style>
	.wordClip {
		overflow: hidden;
		word-wrap: break-word;
		height: 16px;
		line-height: 16px;
		font-size: 16px;
	}
</style>
<div class="wordClip">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>
<a href="/test-assets/59br37/poem.html">Full text of the poem</a>

Passed Example 4

This text node is not vertically clipped with overflow: hidden because it has a parent with overflow: auto at a viewport size of 640 by 512.

<div style="overflow: hidden; height: 2em; font-size: 16px;">
	<div style="overflow: auto; height: 2em;">
		Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
		lore. While I nodded, nearly napping, suddenly there came a tapping.
	</div>
</div>

Failed

Failed Example 1

This text node is vertically clipped because it has a fixed height that does not leave enough space for the content to wrap.

<div style="overflow: hidden; height: 1.5em; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>

Failed Example 2

This text node is vertically clipped because its height is relative to the viewport height, leaving insufficient space for the page to be zoomed to 200% at a viewport size of 1280 by 1024.

<div style="overflow: hidden; height: 16vh; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary,<br />
	Over many a quaint and curious volume of forgotten lore.<br />
	While I nodded, nearly napping, suddenly there came a tapping,<br />
	As of some one gently rapping, rapping at my chamber door.<br />
	“’Tis some visitor,” I muttered, “tapping at my chamber door.<br />
	Only this and nothing more.”
</div>

Failed Example 3

This text node is vertically clipped by style that is applied at a viewport size width of 640.

<style>
	@media screen and (max-width: 640px) {
		.myContainer {
			height: 1.5em;
			width: 50%;
			overflow: hidden;
			font-size: 16px;
		}
	}
</style>
<div class="myContainer">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my
	chamber door. “’Tis some visitor,” I muttered, “tapping at my chamber door. Only this and nothing more.”
</div>

Failed Example 4

This text node is vertically clipped at a viewport size of 640 by 512.

<div style="overflow-y: hidden; height: 10px; white-space: nowrap; text-overflow: ellipsis; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>

Failed Example 5

This text node is horizontally clipped at a viewport size of 640 by 512.

<style>
	.wordClip {
		overflow-x: hidden;
		white-space: nowrap;
		text-overflow: clip;
		width: 50px;
		height: 16px;
		line-height: 16px;
		font-size: 16px;
	}
</style>
<div class="wordClip">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>

Inapplicable

Inapplicable Example 1

This text node is not visible at a viewport size of 640 by 512.

<p style="display:none;">Last updated 2020/03/27 10:52pm</p>

Inapplicable Example 2

This text node has an SVG element as a parent.

<svg>
	<text x="0" y="15">I love SVG!</text>
</svg>

Inapplicable Example 3

This text node has no ancestor with overflow: hidden or clip.

<div style="overflow: auto; height: 1.5em; font-size: 16px;">
	Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten
	lore. While I nodded, nearly napping, suddenly there came a tapping.
</div>

Inapplicable Example 4

This text node has an ancestor with aria-hidden set to true.

<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" /> <span aria-hidden="true">(W3C Logo)</span>

Inapplicable Example 5

This text node with the text "Web Content Accessibility Guidelines 2.1" is fully hidden in a viewport size of 640 by 512.

<style>
	@media screen and (max-width: 640px) {
		.mobile-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			font-size: 16px;
		}
	}
</style>
<a href="/"> Next<span class="mobile-hidden">: Web Content Accessibility Guidelines 2.1</span> </a>