diff --git a/.github/ISSUE_TEMPLATE/rules-issue-template.md b/.github/ISSUE_TEMPLATE/rules-issue-template.md index 54d7c5fd887..d3cab5eed18 100644 --- a/.github/ISSUE_TEMPLATE/rules-issue-template.md +++ b/.github/ISSUE_TEMPLATE/rules-issue-template.md @@ -4,10 +4,7 @@ about: issues related with ACT Rules title: '' labels: '' assignees: '' - ---- - -Please describe the issue with references and relevant examples where necessary. +---Please describe the issue with references and relevant examples where necessary. --- or --- diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index 5fe2885729f..1bc759851fb 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -136,7 +136,7 @@ - ozplayer - GitHub -# Test case anamolies +# Test case anomalies - brewitt-taylor - level2-frame1 - level1-frame2 @@ -146,6 +146,9 @@ - Sumei - Tuttle - lnik # intentional misspelling +- ngizmo +- nspecification +- thelabel # Attributes (repeated words with casing as retext-spell has no config to ignore casing) - href @@ -175,6 +178,9 @@ - x1 - y1 +# HTML character references +- nbsp + # DOM Events - auxclick - compostionend @@ -241,6 +247,12 @@ - disambiguated - superclass - grey +- substring +- initialisms +- sublist +- tokenize +- tokenized +- subsequence # Parts of Unicode - 000A @@ -250,6 +262,8 @@ - 4E00 - 9FFF - 4E00–9FFF +- 00A0 +- KD # JSON attributes/ metadata/ methods - testcases diff --git a/__tests__/spelling.js b/__tests__/spelling.js index 1d0a166ff9d..f4d1cf28659 100755 --- a/__tests__/spelling.js +++ b/__tests__/spelling.js @@ -109,7 +109,9 @@ function getCuratedMarkdownBody(body, options = {}) { * @returns {String[]} */ function getSpellIgnored() { - const ignoreConfigured = yaml.safeLoad(fs.readFileSync('./__tests__/spelling-ignore.yml', 'utf8'), {schema: yaml.FAILSAFE_SCHEMA}) //added schema due to entries starting with a non-zero digit + const ignoreConfigured = yaml.safeLoad(fs.readFileSync('./__tests__/spelling-ignore.yml', 'utf8'), { + schema: yaml.FAILSAFE_SCHEMA, + }) //added schema due to entries starting with a non-zero digit /* Building spelling exception in the shape FOOxxx where xxx is a number. diff --git a/_rules/aria-state-or-property-permitted-5c01ea.md b/_rules/aria-state-or-property-permitted-5c01ea.md index 64d99e42be6..902092df079 100755 --- a/_rules/aria-state-or-property-permitted-5c01ea.md +++ b/_rules/aria-state-or-property-permitted-5c01ea.md @@ -181,8 +181,13 @@ This `div` element has an [explicit role][] of `switch`; the `aria-required` [pr ```html
Notifications - - + + diff --git a/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md b/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md index 9eee0be6ca1..94fd7098c7d 100755 --- a/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md +++ b/_rules/focusable-no-keyboard-trap-standard-nav-a1b64e.md @@ -88,43 +88,43 @@ use [standard keyboard navigation](#standard-keyboard-navigation) using the Esca ```html
Main page content with some link
``` diff --git a/_rules/scrollable-element-keyboard-accessible-0ssw9k.md b/_rules/scrollable-element-keyboard-accessible-0ssw9k.md index 87b9e0c65ad..a92154aa247 100755 --- a/_rules/scrollable-element-keyboard-accessible-0ssw9k.md +++ b/_rules/scrollable-element-keyboard-accessible-0ssw9k.md @@ -40,8 +40,9 @@ This rule applies to any [HTML element][] that has [visible][] [children][] in t ## Expectation -For each target element, at least one of the following is true: -- the element is included in [sequential focus navigation][]; or +For each target element, at least one of the following is true: + +- the element is included in [sequential focus navigation][]; or - the element has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][]; or - the element is [inert][]. @@ -119,7 +120,7 @@ This [scrollable][] `section` element is [inert][] because of the modal dialog, ```html
@@ -144,11 +145,11 @@ This [scrollable][] `section` element is [inert][] because of the modal dialog, ``` diff --git a/_rules/visible-label-in-accessible-name-2ee8b8.md b/_rules/visible-label-in-accessible-name-2ee8b8.md index ac679646e82..837d7257852 100755 --- a/_rules/visible-label-in-accessible-name-2ee8b8.md +++ b/_rules/visible-label-in-accessible-name-2ee8b8.md @@ -24,6 +24,7 @@ acknowledgments: authors: - Anne Thyme Nørregaard - Bryn Anderson + - Dan Tripp - Jey Nandakumar funding: - WAI-Tools @@ -39,7 +40,7 @@ This rule applies to any element for which all the following is true: ## Expectation -For each target element, all [text nodes][] in the [visible text content][] [match characters][] and are contained within the [accessible name][] of this target element, except for characters in the [text nodes][] used to express [non-text content][]. Leading and trailing [whitespace][] and difference in case sensitivity should be ignored. +For the target element, the [visible inner text][] is contained within the [accessible name][] according to the [label in name algorithm][]. ## Background @@ -49,6 +50,16 @@ The understanding document of [2.5.3 Label in Name][understand253] use the term ### Assumptions +This rule assumes that the [visible inner text][] is equal to the [label][https://www.w3.org/wai/wcag21/understanding/label-in-name#dfn-label], even though "label" is not precisely defined at this point in history. + +This rule assumes that the visible label isn't rearranged with CSS so that it appears to the user in a different order than it appears in the DOM. + +This rule assumes that the visible label doesn't use CSS to add whitespace where none exists in the DOM. + +This rule assumes that for any word which appears in both the accessible name and the visible label, the same spelling and hyphenation is used in both places. For example: if "non-negative" is used in the accessible name and "nonnegative" is used in the visible label, that would violate this assumption. Similarly, if "color" is used in the accessible name and "colour" is used in the visible label, that would also violate this assumption. + +This rule - specifically, the [label in name algorithm][] that this rule relies on - assumes that the algorithm's treatment of parentheses is appropriate in the given human language. "Parentheses" are also known as "round brackets". The algorithm's treatment of parentheses is to remove them and all characters within them. This assumption can be reworded as: content within parentheses can be ignored. This assumption is almost always true in English. It is known to be often false in other languages, such as German (where parentheses indicate dual states) and Arabic (where parentheses are often used as quotation marks). Violations of this assumption will, in real-world scenarios, more often result in a false negative for this rule rather than a false positive. + This rule assumes that all resources needed for rendering the page are properly loaded. Checking if resources are missing is out of the scope of rules. Missing resources may be rendered as text (for example, missing `img` are rendered as their `alt` attribute). ### Accessibility Support @@ -66,7 +77,7 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b #### Passed Example 1 -This link has [visible][] text that matches the [accessible name][]. +This link has [visible inner text][] that is equal to the [accessible name][]. ```html ACT rules @@ -74,23 +85,23 @@ This link has [visible][] text that matches the [accessible name][]. #### Passed Example 2 -This link has [visible][] text that, ignoring trailing whitespace, matches the [accessible name][]. +This link has [visible inner text][] that, ignoring whitespace, is equal to the [accessible name][]. ```html -ACT rules +ACT rules ``` #### Passed Example 3 -This link has [visible][] text that, ignoring case, matches the [accessible name][]. +This link has [visible inner text][] that, ignoring case, is equal to the [accessible name][]. ```html -ACT rules +ACT rules ``` #### Passed Example 4 -This button has [visible][] text that is contained within the [accessible name][]. +This button has [visible inner text][] that is contained within the [accessible name][] according to the [label in name algorithm][]. ```html @@ -98,7 +109,7 @@ This button has [visible][] text that is contained within the [accessible name][ #### Passed Example 5 -This button has [visible][] text that does not need to be contained within the [accessible name][], because the "x" text node is [non-text content][]. Note: this would need to meet SC 1.1.1 Non text content. +This button has [visible inner text][] that does not need to be contained within the [accessible name][], because the "x" text node is [non-text content][]. Note: this would need to meet SC 1.1.1 Non text content. ```html @@ -118,11 +129,119 @@ This `button` element has the text "search" rendered as an magnifying glass icon ``` +#### Passed Example 7 + +This button has [visible inner text][] that, according to the [label in name algorithm][], is contained within the [accessible name][]. This example shows why the [label in name algorithm][] uses the [visible inner text][] and not the [visible text content][]: the

tags insert whitespace into the result in the former but not the latter. + +```html + +``` + +#### Passed Example 8 + +Similar to the previous example. + +```html +

Some article
+

by John Doe

 +``` + +#### Passed Example 9 + +The [visible inner text][] of this link is "ACT" (with no spaces) because of the explicit styles of `display: inline` on the `p` elements and the absence of whitespace between the `p` elements. The cases of `display: inline` and `display: block` are handled by the definition of [visible inner text of an element][]. This example shows that the definition agrees with the visual rendering done by the browser. + +```html + +

A

+

C

+

T

+ +``` + +#### Passed Example 10 + +The [visible inner text][] is "Download specification". The words "the" and "gizmo" aren't part of it. + +```html +Download the gizmo specification +``` + +#### Passed Example 11 + +The [visible inner text][] is "Download specification", which includes a space character between the two words due to the second clause of the definition of [visible inner text of a text node][]. + +```html +Download specification +``` + +#### Passed Example 12 + +This example shows that the [visible inner text][] isn't always the same as the [innerText][https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute]. The visible inner text is "Download specification". The innerText is 'Download \ngizmo\nspecification'. This rule uses the visible inner text - not innerText. + +```html + +Download specification +``` + +#### Passed Example 13 + +This example shows that the [label in name algorithm][] handles many kinds of whitespace. + +```html +compose   
+ email +``` + +#### Passed Example 14 + +This example passes the rule because "YYYY-MM-DD" is in brackets. Text in brackets is removed by the [label in name algorithm][], because its not normally spoken by speech-input users. + +```html + +``` + +#### Passed Example 15 + +This passes for two reasons: 1) because the ellipsis ("…") is [non-text content][], and 2) because the ellipsis is neither a letter nor a digit and so is filtered out by the [label in name algorithm][]. + +```html + +``` + +#### Passed Example 16 + +This passes because the [label in name algorithm][] effectively ignores all punctuation and emoji, in both the visible inner text and the accessible name, as long as they don't break up words. + +```html + +``` + ### Failed #### Failed Example 1 -This link has [visible][] text that is different from the [accessible name][]. +This link has [visible inner text][] that is very different from the [accessible name][]. ```html ACT rules @@ -130,7 +249,7 @@ This link has [visible][] text that is different from the [accessible name][]. #### Failed Example 2 -This button has [visible][] text that is only partially contained within the [accessible name][]. +This button has [visible inner text][] that is only partially contained within the [accessible name][]. ```html @@ -138,33 +257,137 @@ This button has [visible][] text that is only partially contained within the [ac #### Failed Example 3 -This link has [visible][] text with mathematical symbols, that does not match the [accessible name][] because the mathematical symbols were written out in the accessible name. This is [explicitly mentioned in WCAG](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name#mathematical-expressions-and-formulae). +This button has [visible inner text][] that is fully contained within the [accessible name][] when viewed as a character-by-character substring. But that does not satisfy our [label in name algorithm][], which works on full words. So this fails the rule. ```html -Proof of 2×2=4 +Discover It ``` #### Failed Example 4 -This link has [visible][] text does not match the [accessible name][] because there is a hyphen in the accessible name. +This link's [accessible name][] contains two tokens (according to the[label in name algorithm][]) and the [visible inner text][] contains one token. So it fails the rule. ```html -nonstandard +justice ``` #### Failed Example 5 -This link has [visible][] text does not match the [accessible name][] because there are extra spaces in the accessible name. +This link has an [accessible name][] which contains a hyphen. The [label in name algorithm][] breaks up words on hyphens. So it turns "non-standard" into two tokens: "non" and "standard". So this fails the rule. + +```html +nonstandard +``` + +#### Failed Example 6 + +The rule has no special handling for acronyms or initialisms. + +```html +W C A G +``` + +#### Failed Example 7 + +The rule has no special handling for abbreviations. + +```html +University Ave. +``` + +#### Failed Example 8 + +This link has [visible inner text][] with mathematical symbols and is not contained within the [accessible name][] because the mathematical symbols are represented as English words (not digits) in the accessible name. This is [explicitly mentioned in WCAG](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name#mathematical-expressions-and-formulae). + +```html +Proof of 2×2=4 +``` + +#### Failed Example 9 + +Similar to the previous example. This rule has no special handling for converting mathematical symbols into words, or vice versa. + +```html + +``` + +#### Failed Example 10 + +This button's accessible name contains the same tokens that are in the visible label. But they aren't in the same order, so it fails the sublist check part of the [label in name algorithm][], and so it fails the rule. + +```html + +``` + +#### Failed Example 11 + +This button's accessible name contains the word "the" in the middle of it, which causes the sublist check of the [label in name algorithm][] (in particular: the "consecutive" requirement of that check) to fail. So it fails the rule. + +```html + +``` + +#### Failed Example 12 + +This link's accessible name contains the same digits that are in the visible label, and in the same order. But they have different spaces and punctuation between them, so they are considered separate tokens. So this fails the rule. ```html 123.456.7890 ``` +#### Failed Example 13 + +This rule has no special handling which tries to guess when number have the same semantic meaning. It operates on tokens only. + +```html +2021 +``` + +#### Failed Example 14 + +Similar to the previous example. + +```html +fibonacci: 0112358132134 +``` + +#### Failed Example 15 + +This rule has no special handling for converting digits into words, or vice versa. + +```html +two thousand twenty-one +``` + +#### Failed Example 16 + +(Same as above.) This rule has no special handling for converting digits into words, or vice versa. + +```html +2 0 2 3 +``` + +#### Failed Example 17 + +This rule has no special handling for digits that appear next to letters with no spaces in between. + +```html +1 +``` + +#### Failed Example 18 + +The definition of [visible inner text][] doesn't treat text any differently if it's excluded from the accessibility tree with aria-hidden. So this rule effectively ignores aria-hidden. So this element fails the rule. + +```html +Download specification +``` + ### Inapplicable #### Inapplicable Example 1 -This `nav` is not a widget, so the [visible][] text does not need to match the [accessible name][]. +This `nav` is not a widget, so the [visible inner text][] does not need to match the [accessible name][]. ```html @@ -172,7 +395,7 @@ This `nav` is not a widget, so the [visible][] text does not need to match the [ #### Inapplicable Example 2 -This email text field does not need to have its [visible][] text match the [accessible name][]. The content of a textfield shows its value instead of its label; it does not [support name from content][supports name from content]. The label is usually adjacent to the textfield instead. +This email text field does not need to have its [visible inner text][] match the [accessible name][]. The content of a textfield shows its value instead of its label; it does not [support name from content][supports name from content]. The label is usually adjacent to the textfield instead. ```html
E-mail
@@ -181,7 +404,7 @@ This email text field does not need to have its [visible][] text match the [acce #### Inapplicable Example 3 -This `div` element does not have a widget role, so the [visible][] text does not need to match the [accessible name][]. +This `div` element does not have a widget role, so the [visible inner text][] does not need to match the [accessible name][]. ```html
Next
@@ -189,7 +412,7 @@ This `div` element does not have a widget role, so the [visible][] text does not #### Inapplicable Example 4 -This link has no [visible text content][]. +This link has no [visible inner text][]. ```html @@ -198,14 +421,14 @@ This link has no [visible text content][]. ``` [accessible name]: #accessible-name 'Definition of accessible name' -[match characters]: #matching-characters 'Definition of matching characters' +[label in name algorithm]: #label-in-name-algorithm 'Definition of Label in Name Algorithm' [non-text content]: https://www.w3.org/TR/WCAG22/#dfn-non-text-content 'WCAG Definition of Non-text content' [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' [semantic role]: #semantic-role 'Definition of Semantic role' -[supports name from content]: https://www.w3.org/TR/wai-aria-1.2/#namefromcontent 'Definition of Supports name from contents' -[visible]: #visible 'Definition of visible' +[supports name from content]: https://www.w3.org/TR/wai-aria-1.2/#namefromcontent 'Definition of Supports name from content' +[understand253]: https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html +[visible inner text]: #visible-inner-text 'Definition of Visible inner text' +[visible inner text of a text node]: #visible-inner-text:for-text 'Definition of Visible inner text of a text node' +[visible inner text of an element]: #visible-inner-text:for-element 'Definition of Visible inner text of an element' [visible text content]: #visible-text-content 'Definition of Visible text content' -[whitespace]: #whitespace 'Definition of Whitespace' [widget role]: https://www.w3.org/TR/wai-aria-1.2/#widget_roles 'Definition of Widget role' -[text nodes]: https://dom.spec.whatwg.org/#text 'DOM text, 2020/08/18' -[understand253]: https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html diff --git a/package.json b/package.json index e9431728f27..dcf9a2bbddd 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,10 @@ "name": "Dagfinn Rømen", "url": "https://github.com/DagfinnRomen" }, + { + "name": "Dan Tripp", + "url": "https://github.com/dan-tripp-siteimprove" + }, { "name": "Daniël Strik", "url": "https://github.com/danistr" diff --git a/pages/glossary/label-in-name-algorithm.md b/pages/glossary/label-in-name-algorithm.md new file mode 100755 index 00000000000..747bcb99802 --- /dev/null +++ b/pages/glossary/label-in-name-algorithm.md @@ -0,0 +1,42 @@ +--- +title: Label in Name Algorithm +key: label-in-name-algorithm +unambiguous: true +objective: false +input_aspects: + - CSS styling + - DOM tree +--- + +To check whether an [element][] has its label contained in its name, follow this algorithm: + +Let 'label' be the [visible inner text][] of the target element. Let 'name' be the [accessible name][] of the target element. Both 'label' and 'name' are strings. + +Sub-algorithm to tokenize a string: + +- Do Unicode [case folding][] on the string then convert it to [normalization form KD][]. +- For each character that either a) represents non-text content, or b) isn't a letter or a digit: replace that character with a space character. + - For a) Judgment of "non-text" probably can't be fully automated. For example: "X" for "close" probably can be automated, but presumably there are more cases than this. + - For b) Use the Unicode classes Letter, Mark, and "Number, Decimal Digit [Nd]". (This will exclude hyphens, punctuation, emoji, and more.) +- Remove all characters that are within parentheses (AKA round brackets). + - Ignore square brackets and braces. +- Split the string into a list of strings, one string per word, according to the word segmentation rules for the inherited programmatic language. + - This 'split' operation must: + - Effectively remove leading and trailing [whitespace][]. + - If the input string contains nothing but [whitespace][] before this operation: return an empty list. + - In English and most other European languages, a greedy [whitespace][] regular expression will accomplish this. In languages such as Thai, Chinese, and Japanese, it won't. + - A consequence of using the ACT definition of [whitespace][] here is that all kinds of whitespace are covered. That includes the Unicode code point U+00A0 - the "No-Break Space" - which can be represented by the HTML named character reference ` `. + +Then do the check: is the tokenized 'label' a sublist of the tokenized 'name'? +- This 'sublist' check has these properties: + - It checks whether elements are consecutive or not. That is: it checks for a substring, in the computer science sense of the term. Not a subsequence. + - An empty list is a sublist of any list. + +If the answer is "yes" (that is: the tokenized 'label' is a sublist of the tokenized 'name'), then this algorithm returns "is contained". Otherwise, it returns "is not contained". + +[accessible name]: #accessible-name 'Definition of accessible name' +[case folding]: https://www.w3.org/TR/charmod-norm/#dfn-case-folding +[element]: https://dom.spec.whatwg.org/#element +[normalization form KD]: https://www.unicode.org/glossary/#normalization_form_kd +[visible inner text]: #visible-inner-text 'Definition of Visible inner text' +[whitespace][]: #whitespace 'Definition of whitespace' diff --git a/pages/glossary/large-scale-text.md b/pages/glossary/large-scale-text.md index 7efd8dd96dc..91f5660cc57 100755 --- a/pages/glossary/large-scale-text.md +++ b/pages/glossary/large-scale-text.md @@ -13,17 +13,17 @@ A text node is large scale text if at least one of the following is true: - the text node [computed][] [font-size][] is at least 18 [points][], or - the text node [computed][] [font-size][] is at least 14 [points][] and has a [computed][] [font weight][] of 700 or higher. - #### Background + In the domain of languages such as Chinese, Japanese, and Korean (CJK languages), encompassing the Unicode character range from 4E00 to 9FFF ([CJK Unified Ideographs](https://unicode.org/charts/PDF/U4E00.pdf)), it becomes crucial to acknowledge the intricate nuances in their typographic requirements. Despite sharing a common Unicode spectrum, each CJK language and its corresponding country may exhibit distinct typographic preferences and standards. Particularly noteworthy is the lack of uniformity in defining text sizes as either large or small within the following ranges: + - from 18 [points][] to 22 [points][] - from 14 [points][] to 18 [points][] with a [computed][] [font weight][] of 700 or higher. Whether CJK characters in these ranges should be considered as "large scale" depends on the language of the text, as well as the country for which the text is designed and whose requirements must be followed. Given that these pieces of information are not readily available, the ACT rules adhere to the large text definition outlined above. This definition is applicable across all languages under the rationale of "no false positives." - [computed]: https://www.w3.org/TR/css-cascade-3/#computed-value [font-size]: https://www.w3.org/TR/css-fonts-3/#propdef-font-size [points]: https://www.w3.org/TR/css-values/#pt diff --git a/pages/glossary/visible-inner-text.md b/pages/glossary/visible-inner-text.md new file mode 100755 index 00000000000..4a3c629a934 --- /dev/null +++ b/pages/glossary/visible-inner-text.md @@ -0,0 +1,47 @@ +--- +title: Visible Inner Text +key: visible-inner-text +unambiguous: true +objective: true +input_aspects: + - CSS styling + - DOM tree +--- + +(The "visible inner text" defined here is similar to, but not the same as, [visible text content][] and [innerText][https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute].) + +The visible inner text of a node depends on the kind of node. + +The visible inner text of a [text node][] is: +- if the [text node][] is [visible][], its visible inner text is its [data][] with whitespace normalized by replacing contiguous [whitespace][] with the string `" "` (a single ASCII space character); +- if the [text node][] is not [visible][], is [rendered][], and contains only [whitespace][], its visible inner text is the string `" "` (a single ASCII space character); +- otherwise, the visible inner text of the [text node][] is the empty string (`""`). + + +The visible inner text of an [element][] is: +- if the [element][] is not [rendered][], its visible inner text is the empty string (`""`); +- if the [element][] is [rendered][] and not [visible][] and has a [bounding box][] which has width greater than 0, its visible inner text is an ASCII space character (`" "`); +- if the [element][] is [rendered][] and not [visible][] and has a [bounding box][] which has width of 0, its visible inner text is the empty string (`""`); +- if the [element][] is a [`
`][
] element, its visible inner text is a newline character (`"\n"`); +- if the [computed][] [`display`][display] property of the [element][] has an [outer display type][] of `block`, or an [inner display type][] of `table-caption`, the visible inner text of the [element][] is the concatenation of a newline character (`"\n"`) plus the visible inner text of its children (in [tree order][] in the [flat tree][]) plus a newline character (`"\n"`); +- if the [computed][] [`display`][display] property of the [element][] has an [inner display type][] of `table-cell` or `table-row`, the visible inner text of the [element][] is the concatenation of an ASCII space character (`" "`) plus the visible inner text of its children (in [tree order][] in the [flat tree][]) plus an ASCII space character (`" "`); +- otherwise, the visible inner text of the [element][] is the concatenation of the visible inner text of its children (in [tree order][] in the [flat tree][]). + + +The visible inner text of any other node is the concatenation of the visible inner text of its children (in [tree order][] in the [flat tree][]). + +[bounding box]: https://www.w3.org/TR/css-ui-3/#valdef-box-sizing-border-box +[
]: https://html.spec.whatwg.org/#the-br-element +[computed]: https://drafts.csswg.org/css-cascade/#computed +[data]: https://dom.spec.whatwg.org/#concept-cd-data +[display]: https://drafts.csswg.org/css2/#propdef-display +[element]: https://dom.spec.whatwg.org/#element +[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree +[inner display type]: https://drafts.csswg.org/css-display/#inner-display-type +[outer display type]: https://drafts.csswg.org/css-display/#outer-display-type +[rendered]: https://html.spec.whatwg.org/#being-rendered +[text node]: https://dom.spec.whatwg.org/#text +[tree order]: https://dom.spec.whatwg.org/#concept-tree-order +[visible]: #visible +[visible text content]: #visible-text-content +[whitespace]: #whitespace diff --git a/pages/glossary/visible-text-content.md b/pages/glossary/visible-text-content.md index f39f0e0a150..c422e31173d 100755 --- a/pages/glossary/visible-text-content.md +++ b/pages/glossary/visible-text-content.md @@ -8,10 +8,12 @@ input_aspects: - DOM tree --- -The _visible text content_ of an [element][] is a set of all [visible][] [text nodes][] that are [descendants][] in the [flat tree][] of this element +The _visible text content_ of an [element][] is a set of all [visible][] [text nodes][] that are [descendants][] in the [flat tree][] of this element. (This is similar to, but not the same as, [visible inner text][].) + [descendants]: https://dom.spec.whatwg.org/#concept-tree-descendant 'DOM tree descendant, 2020/08/18' [element]: https://dom.spec.whatwg.org/#element 'DOM element, 2020/08/18' [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/08/18' [visible]: #visible +[visible inner text]: #visible-inner-text [text nodes]: https://dom.spec.whatwg.org/#text 'DOM text, 2020/08/18'