Proposed Zoomed text node is not clipped with CSS overflow

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;

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:

The text node is visible; and
The text node has an HTML element as a parent in the flat tree; and
The text node has an ancestor in the flat tree with a computed overflow-x or overflow-y of hidden or clip; and
The text node does not have an ancestor in the flat tree with an aria-hidden attribute value of true.

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.

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.

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.

Bibliography

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 later on level AA and higher.
- Outcome mapping:
  - Any failed outcomes: success criterion is not satisfied
  - All passed outcomes: success criterion needs further testing
  - An inapplicable outcome: success criterion needs further testing

Input Aspects

The following aspects are required in using this rule.

Test Cases

This HTML file is used in several examples:

File /test-assets/59br37/poem.html:

<!DOCTYPE html>
<html>
	<h1>The Raven</h1>
	<p>By Edgar Allan Poe</p>
	<p>
		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.”
	</p>
	<p>
		Ah, distinctly I remember it was in the bleak December;<br />
		And each separate dying ember wrought its ghost upon the floor.<br />
		Eagerly I wished the morrow;—vainly I had sought to borrow<br />
		From my books surcease of sorrow—sorrow for the lost Lenore—<br />
		For the rare and radiant maiden whom the angels name Lenore—<br />
		Nameless here for evermore.
	</p>
	<p>
		And the silken, sad, uncertain rustling of each purple curtain<br />
		Thrilled me—filled me with fantastic terrors never felt before;<br />
		So that now, to still the beating of my heart, I stood repeating<br />
		“’Tis some visitor entreating entrance at my chamber door—<br />
		Some late visitor entreating entrance at my chamber door;—<br />
		This it is and nothing more.”
	</p>
	<p>
		Presently my soul grew stronger; hesitating then no longer,<br />
		“Sir,” said I, “or Madam, truly your forgiveness I implore;<br />
		But the fact is I was napping, and so gently you came rapping,<br />
		And so faintly you came tapping, tapping at my chamber door,<br />
		That I scarce was sure I heard you”—here I opened wide the door;—<br />
		Darkness there and nothing more.
	</p>
	<p>
		Deep into that darkness peering, long I stood there wondering, fearing,<br />
		Doubting, dreaming dreams no mortal ever dared to dream before;<br />
		But the silence was unbroken, and the stillness gave no token,<br />
		And the only word there spoken was the whispered word, “Lenore?”<br />
		This I whispered, and an echo murmured back the word, “Lenore!”—<br />
		Merely this and nothing more.
	</p>
	<p>
		Back into the chamber turning, all my soul within me burning,<br />
		Soon again I heard a tapping somewhat louder than before.<br />
		“Surely,” said I, “surely that is something at my window lattice;<br />
		Let me see, then, what thereat is, and this mystery explore—<br />
		Let my heart be still a moment and this mystery explore;—<br />
		’Tis the wind and nothing more!”
	</p>
	<p>
		Open here I flung the shutter, when, with many a flirt and flutter,<br />
		In there stepped a stately Raven of the saintly days of yore;<br />
		Not the least obeisance made he; not a minute stopped or stayed he;<br />
		But, with mien of lord or lady, perched above my chamber door—<br />
		Perched upon a bust of Pallas just above my chamber door—<br />
		Perched, and sat, and nothing more.
	</p>
	<p>
		Then this ebony bird beguiling my sad fancy into smiling,<br />
		By the grave and stern decorum of the countenance it wore,<br />
		“Though thy crest be shorn and shaven, thou,” I said, “art sure no craven,<br />
		Ghastly grim and ancient Raven wandering from the Nightly shore—<br />
		Tell me what thy lordly name is on the Night’s Plutonian shore!”<br />
		Quoth the Raven “Nevermore.”
	</p>
	<p>
		Much I marvelled this ungainly fowl to hear discourse so plainly,<br />
		Though its answer little meaning—little relevancy bore;<br />
		For we cannot help agreeing that no living human being<br />
		Ever yet was blessed with seeing bird above his chamber door—<br />
		Bird or beast upon the sculptured bust above his chamber door,<br />
		With such name as “Nevermore.”
	</p>
	<p>
		But the Raven, sitting lonely on the placid bust, spoke only<br />
		That one word, as if his soul in that one word he did outpour.<br />
		Nothing farther then he uttered—not a feather then he fluttered—<br />
		Till I scarcely more than muttered “Other friends have flown before—<br />
		On the morrow he will leave me, as my Hopes have flown before.”<br />
		Then the bird said “Nevermore.”
	</p>
	<p>
		Startled at the stillness broken by reply so aptly spoken,<br />
		“Doubtless,” said I, “what it utters is its only stock and store<br />
		Caught from some unhappy master whom unmerciful Disaster<br />
		Followed fast and followed faster till his songs one burden bore—<br />
		Till the dirges of his Hope that melancholy burden bore<br />
		Of ‘Never—nevermore’.”
	</p>
	<p>
		But the Raven still beguiling all my fancy into smiling,<br />
		Straight I wheeled a cushioned seat in front of bird, and bust and door;<br />
		Then, upon the velvet sinking, I betook myself to linking<br />
		Fancy unto fancy, thinking what this ominous bird of yore—<br />
		What this grim, ungainly, ghastly, gaunt, and ominous bird of yore<br />
		Meant in croaking “Nevermore.”
	</p>
	<p>
		This I sat engaged in guessing, but no syllable expressing<br />
		To the fowl whose fiery eyes now burned into my bosom’s core;<br />
		This and more I sat divining, with my head at ease reclining<br />
		On the cushion’s velvet lining that the lamp-light gloated o’er,<br />
		But whose velvet-violet lining with the lamp-light gloating o’er,<br />
		She shall press, ah, nevermore!
	</p>
	<p>
		Then, methought, the air grew denser, perfumed from an unseen censer<br />
		Swung by Seraphim whose foot-falls tinkled on the tufted floor.<br />
		“Wretch,” I cried, “thy God hath lent thee—by these angels he hath sent thee<br />
		Respite—respite and nepenthe from thy memories of Lenore;<br />
		Quaff, oh quaff this kind nepenthe and forget this lost Lenore!”<br />
		Quoth the Raven “Nevermore.”
	</p>
	<p>
		“Prophet!” said I, “thing of evil!—prophet still, if bird or devil!—<br />
		Whether Tempter sent, or whether tempest tossed thee here ashore,<br />
		Desolate yet all undaunted, on this desert land enchanted—<br />
		On this home by Horror haunted—tell me truly, I implore—<br />
		Is there—is there balm in Gilead?—tell me—tell me, I implore!”<br />
		Quoth the Raven “Nevermore.”
	</p>
	<p>
		“Prophet!” said I, “thing of evil!—prophet still, if bird or devil!<br />
		By that Heaven that bends above us—by that God we both adore—<br />
		Tell this soul with sorrow laden if, within the distant Aidenn,<br />
		It shall clasp a sainted maiden whom the angels name Lenore—<br />
		Clasp a rare and radiant maiden whom the angels name Lenore.”<br />
		Quoth the Raven “Nevermore.”
	</p>
	<p>
		“Be that word our sign of parting, bird or fiend!” I shrieked, upstarting—<br />
		“Get thee back into the tempest and the Night’s Plutonian shore!<br />
		Leave no black plume as a token of that lie thy soul hath spoken!<br />
		Leave my loneliness unbroken!—quit the bust above my door!<br />
		Take thy beak from out my heart, and take thy form from off my door!”<br />
		Quoth the Raven “Nevermore.”
	</p>
	<p>
		And the Raven, never flitting, still is sitting, still is sitting<br />
		On the pallid bust of Pallas just above my chamber door;<br />
		And his eyes have all the seeming of a demon’s that is dreaming,<br />
		And the lamp-light o’er him streaming throws his shadow on the floor;<br />
		And my soul from out that shadow that lies floating on the floor<br />
		Shall be lifted—nevermore!
	</p>
</html>

Passed

Passed Example 1

Open in a new tab

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

Open in a new tab

This text node is horizontally clipped using text-overflow: ellipsis at a viewport size of 640 by 512. A link to a full version of the poem is also provided.

<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

Open in a new tab

This text node is restricted to a single line, by setting a line-height that is the same as the height. A link to a full version of the poem is also provided.

<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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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

Open in a new tab

This text node has an SVG element as a parent.

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

Inapplicable Example 3

Open in a new tab

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

Open in a new tab

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

Open in a new tab

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>

Glossary

Attribute value

The attribute value of a content attribute set on an HTML element is the value that the attribute gets after being parsed and computed according to specifications. It may differ from the value that is actually written in the HTML code due to trimming whitespace or non-digits characters, default values, or case-insensitivity.

Some notable case of attribute value, among others:

For enumerated attributes, the attribute value is either the state of the attribute, or the keyword that maps to it; even for the default states. Thus <input type="image" /> has an attribute value of either Image Button (the state) or image (the keyword mapping to it), both formulations having the same meaning; similarly, “an input element with a type attribute value of Text” can be either <input type="text" />, <input /> (missing value default), or <input type="invalid" /> (invalid value default).
For boolean attributes, the attribute value is true when the attribute is present and false otherwise. Thus <button disabled>, <button disabled="disabled"> and <button disabled=""> all have a disabled attribute value of true.
For attributes whose value is used in a case-insensitive context, the attribute value is the lowercase version of the value written in the HTML code.
For attributes that accept numbers, the attribute value is the result of parsing the value written in the HTML code according to the rules for parsing this kind of number.
For attributes that accept sets of tokens, whether space separated or comma separated, the attribute value is the set of tokens obtained after parsing the set and, depending on the case, converting its items to lowercase (if the set is used in a case-insensitive context).
For aria-* attributes, the attribute value is computed as indicated in the WAI-ARIA specification and the HTML Accessibility API Mappings.

This list is not exhaustive, and only serves as an illustration for some of the most common cases.

The attribute value of an IDL attribute is the value returned on getting it. Note that when an IDL attribute reflects a content attribute, they have the same attribute value.

Horizontally Clipped by Overflow

A node is Horizontally Clipped by Overflow if it has an ancestor in the flat tree with a computed overflow-x of hidden or clip, where changing the overflow-x of all such ancestors to visible would cause more of the node to become visible.

Namespaced Element

An element with a specific namespaceURI value from HTML namespaces. For example an “SVG element” is any element with the “SVG namespace”, which is http://www.w3.org/2000/svg.

Namespaced elements are not limited to elements described in a specification. They also include custom elements. Elements such as a and title have a different namespace depending on where they are used. For example a title in an HTML page usually has the HTML namespace. When used in an svg element, a title element has the SVG namespace instead.

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 five 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
cantTell: Whether the rule is applicable, or not all expectations were met could not be fully determined by the tester.
Untested: The tester has not attempted to evaluate the test subject.

Note: A rule has one passed or failed outcome for every test target. When a tester evaluates a test target it can also be reported as cantTell if the rule cannot be tested in its entirety. For example, when applicability was automated, but the expectations have to be evaluated manually.

When there are no test targets the rule has one inapplicable outcome. If the tester is unable to determine whether there are test targets there will be one cantTell outcome. And when no evaluation has occurred the test target has one untested outcome. This means that each test subject always has one or more outcomes.

Outcomes used in ACT Rules can be expressed using the outcome property of the [EARL10-Schema][].

Vertically Clipped by Overflow

A node is Vertically Clipped by Overflow if it has an ancestor in the flat tree with a computed overflow-y of hidden or clip, where changing the overflow-y of all such ancestors to visible would cause more of the node to become visible.

viewport size

The viewport size is the width and height at which a page is rendered. The viewport size is equal to the innerWidth and innerHeight of the window of the top-level browsing context.

Note: The viewport size is not to be confused with the “resolution” of the operating system. Often a browser will be a single window in the operating system, with a width and height different from the resolution of the operating system. Often browsers also include additional user interface components, such as a URL bar, tab bar, and a bookmarks bar. None of these are included in the viewport size. In full screen mode the viewport size might be the same as the resolution of the operating system.

Note: The viewport size includes, if rendered, all scrollbars.

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.

For more details, see examples of visible.

Rule Versions

This is the first version of this ACT rule.

Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date.

Implementation	Type	Consistency	Report
QualWeb 3.0.0	Automated tool	Partial

Description

Applicability

Expectation 1

Expectation 2

Background

Assumptions

Accessibility Support

Bibliography

Accessibility Requirements Mapping

Input Aspects

Test Cases

Passed

Passed Example 1

Passed Example 2

Passed Example 3

Passed Example 4

Failed

Failed Example 1

Failed Example 2

Failed Example 3

Failed Example 4

Failed Example 5

Inapplicable

Inapplicable Example 1

Inapplicable Example 2

Inapplicable Example 3

Inapplicable Example 4

Inapplicable Example 5

Glossary

Attribute value

Horizontally Clipped by Overflow

Namespaced Element

Outcome

Vertically Clipped by Overflow

viewport size

Visible

Rule Versions

Implementations

Useful Links