Important word spacing in style attributes is wide enough
Description
This rule checks that the style
attribute is not used to prevent adjusting word-spacing
by using !important
, except if it’s at least 0.16
times the font size.
Applicability
This rule applies to any HTML element with one or more visible text node children, when all the following are true for the word-spacing
property of the element:
Expectation
For each test target, the computed value of its word-spacing
property is at least 0.16 times the computed value of its font-size
property.
Assumptions
-
There is no mechanism available on the page to adjust
word-spacing
. If there is such a mechanism, it is possible to fail this rule while Success Criterion 1.4.12 Text Spacing is still satisfied. -
The font size is constant for all text in the element. If
font-size
changes (e.g., through use of the::first-line
pseudo-element) then the required word spacing would also change throughout the element. This is untested by the current rule. -
This rule assumes that WCAG’s meaning for the “Word spacing style property” is the value of the CSS
word-spacing
property rather than the actual space between words. The value of the CSS property is added to whichever spacing already exist (for example, the size of the space character). Thus, the actual space between words is larger than the value of theword-spacing
property. If Success Criterion 1.4.12 Text Spacing is concerned by the actual space between words, then this rule may fail (with theword-spacing
property being too small) while the Success Criterion is still satisfied (with the actual space being enough). -
This rule assumes that when inter-words space is changed because of justification, the
word-spacing
property is not changed (the change occurs on the width of the space character between the words). Therefore, whether a text is justified or not doesn’t change the result of this rule. Note that justifying text is a failure of Success Criterion 1.4.8 Visual Presentation. -
At least one text node child of the element express something in a human language written in a script that uses the
word-spacing
property.
Accessibility Support
While some assistive technologies are able to set user origin or user agent origin styles, others, such as browser extensions, are only able to set styles with the author origin. Such assistive technologies cannot create styles “winning” the cascade sort over a style
attribute with an important declaration.
Background
Styles declared in a style
attribute have higher cascade specificity than any selector; therefore, they “win” the cascade sort over any other style from author origin, i.e. it cannot be overridden by any of these. On the other hand, if such a style is declared in a style sheet, it can still “lose” the cascade sort to declarations with higher specificity or simply coming from a later style sheet (such as ones injected by assistive technologies). This rule ensures that the element is not in the first case and that the style can be overridden by users, unless it is already at least the minimum required threshold. Important styles that are declared with the user or user agent can win the cascade sort over styles with the author origin.
CSS specifications define each declaration as being either important (if it has the !important
annotation) or normal. Given that normal
is also a keyword for some properties, and that !important
is wider known than this distinction, this rule rather uses “important”/”not important” to avoid confusion.
Bibliography
- Understanding Success Criterion 1.4.12: Text Spacing
- CSS Text Module Level 3 - Spacing
- CSS Visual formatting model details
About test cases
Test cases descriptions abusively refer to the CSS properties of text nodes, meaning the one of their parent.
Accessibility Requirements Mapping
1.4.12 Text Spacing (Level AA)
- Learn more about 1.4.12 Text Spacing
- Required for conformance to WCAG 2.1 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
- Any
Input Aspects
The following aspects are required in using this rule.
Test Cases
Passed
Passed Example 1
This p
element has a computed word-spacing
of 0.2 times the font size.
<p style="word-spacing: 0.2em !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Passed Example 2
This p
element has a computed word-spacing
of 4px
, which is exactly 0.16 times the computed font-size
.
<style>
p {
font-size: 25px;
}
</style>
<p style="word-spacing: 4px !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Passed Example 3
This p
element has two declared values for its word-spacing
property. The latest wins the cascade sort. It has a value of 0.2em
, which is wide enough.
<p style="word-spacing: 0.1em !important; word-spacing: 0.2em !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Passed Example 4
This p
element has two declared values for its word-spacing
property. The one which is important wins the cascade sort. It has a value of 0.2em
, which is wide enough.
<p style="word-spacing: 0.2em !important; word-spacing: 0.1em">
The toy brought back fond memories of being lost in the rain forest.
</p>
Passed Example 5
This p
element has a computed word-spacing
of 2px
, 0.2 times its computed font-size
of 10px
; the div
element has no visible text node children.
<div style="font-size: 16px; word-spacing: 2px !important">
<p style="font-size: 10px;">
The toy brought back fond memories of being lost in the rain forest.
</p>
</div>
Passed Example 6
This p
element has a computed word-spacing
of 0.2 times its font-size
; the div
element has no visible text node children.
<div style="word-spacing: 0.1em !important">
<p style="word-spacing: 0.2em !important;">
The toy brought back fond memories of being lost in the rain forest.
</p>
</div>
Failed
Failed Example 1
This p
element has a computed word-spacing
of only 0.1 times the font-size
, which is below the required minimum.
<p style="word-spacing: 0.1em !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Failed Example 2
This p
element has a computed word-spacing
of 2px
which is only 0.1 times the font-size
(20px
), thus below the required minimum.
<style>
p {
font-size: 20px;
}
</style>
<p style="word-spacing: 2px !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Failed Example 3
This p
element has a computed word-spacing
of 0.
<p style="word-spacing: normal !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Failed Example 4
This p
element has a computed word-spacing
of 0.
<p style="word-spacing: initial !important">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable
Inapplicable Example 1
There is no HTML element.
<svg xmlns="http://www.w3.org/2000/svg">
<text y="20" style="word-spacing: 0.1em">ACT rules</text>
</svg>
Inapplicable Example 2
There is no text node.
<div style="word-spacing: 0.1em !important;"></div>
Inapplicable Example 3
There is no visible text node because of display: none
.
<p style="display: none; word-spacing: 0.1em !important;">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable Example 4
There is no visible text node because it is positioned off-screen.
<p style="position: absolute; top: -999em; word-spacing: 0.1em !important;">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable Example 5
This p
element’s word-spacing
property is not declared in a style
attribute.
<p style="width: 60%">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable Example 6
The specified value of the word-spacing
property of this p
element is declared in the style sheet, not in the style
attribute (it wins the cascade sort because it is important).
<style>
p {
word-spacing: 0.1em !important;
}
</style>
<p style="word-spacing: 0.2em">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable Example 7
This p
element does not have an important computed word-spacing
.
<p style="word-spacing: 0.1em">
The toy brought back fond memories of being lost in the rain forest.
</p>
Inapplicable Example 8
The computed value of the word-spacing
property of this span
element is the inherited value, that is the computed value of the p
element and therefore not important; the p
element has no visible text node children.
<p style="word-spacing: 0.1em">
<span style="word-spacing: inherit !important;">
The toy brought back fond memories of being lost in the rain forest.
</span>
</p>
Inapplicable Example 9
The computed value of the word-spacing
property of this span
element is the inherited value, that is the computed value of the p
element and therefore not important; the p
element has no visible text node children.
<p style="word-spacing: 0.1em">
<span style="word-spacing: unset !important;">
The toy brought back fond memories of being lost in the rain forest.
</span>
</p>
Glossary
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:
- 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
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.
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.
For more details, see examples of visible.
Rule Versions
-
Latest version, 20 December 2023
(compare)
- Update the rule's description
- Ignore style attributes which do not actually impact text
- Add assumption on text nodes being human language
-
Previous version, 23 June 2022
(compare)
- Simplify accessibility support paragraph
- Previous version, 28 January 2022
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.