Skip to content

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:

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:

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

Accessibility Requirements Mapping

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:

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

An outcome is 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 three following types:

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such “interim” results can be expressed with the incomplete outcome.

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 QualWeb Report
Back to Top