Skip to content

Proposed Test Rule: Line height in style attributes is not !important

Applicability

This rule applies to any HTML element that is visible and for which the style attribute declares the line-height CSS property.

Expectation

For each test target, at least one of the following is true:

Assumptions

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. If accessibility support does not include assistive technologies that override line-height through author origin, this rule should not be used.

Background

When a style is declared in the style attribute with an important declaration, it “wins” 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 recommended threshold. Important styles that are declared with the user or user agent origin can win the cascade sort over styles with the author origin.

CSS specifications define each declaration as being either important (if is as the !important annotation) or normal. Given that normal is also a keyword for this property, and that !important is wider known that this distinction, this rule rather uses “important”/”not important” to avoid confusion.

Bibliography

Accessibility Requirements Mapping

Input Aspects

The following aspects are required in using this rule.

Test Cases

Passed

Passed Example 1

This p element has a not important computed line-height.

<p style="line-height: 1.2em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 2

This p element has a computed line-height of twice the font size, which is large enough.

<p style="line-height: 2em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 3

This p element has a computed line-height of 30px, which is large enough (the threshold is 30px).

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 30px !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 4

This p element has a computed line-height of 25.6px (160% of 16px) which is large enough.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 160% !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 5

This p element has a computed line-height of 1.6 which is large enough.

<p style="line-height: 1.6 !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 6

This p element has two declared values for its line-height property. The latest wins the cascade sort. It has a value of 2em, which is large enough.

<p style="line-height: 1em !important; line-height: 2em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 7

This p element has two declared values for its line-height property. The one which is important wins the cascade sort. It has a value of 2em, which is large enough.

<p style="line-height: 2em !important; line-height: 1em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 8

The cascaded value of the line-height 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). Thus, the p element matches the cascade condition.

<style>
	p {
		line-height: 1.2em !important;
	}
</style>

<p style="line-height: 2em">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Passed Example 9

The computed value of the line-height property of this p element is not important. The computed value of the line-height property of this span element is the inherited value, that is the computed value of its parent and therefore also not important.

<p style="line-height: 1.2em">
	<span style="line-height: inherit !important;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Passed Example 10

The computed value of the line-height property of this p element is not important. The computed value of the line-height property of this span element is the inherited value, that is the computed value of its parent and therefore also not important.

<p style="line-height: 1.2em">
	<span style="line-height: unset !important;">
		The toy brought back fond memories of being lost in the rain forest.
	</span>
</p>

Failed

Failed Example 1

This p element has a computed line-height equal to the font size, which is below the recommended minimum.

<p style="line-height: 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 line-height of 20px, which is below the recommended minimum given the specified font size is 20 pixels.

<style>
	p {
		font-size: 20px;
	}
</style>

<p style="line-height: 20px !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 3

This p element has a computed line-height of 19.2px (120% of 16px) which is below the recommended minimum.

<style>
	p {
		font-size: 16px;
	}
</style>

<p style="line-height: 120% !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 4

This p element has a computed line-height of 1.2 which is below the recommended minimum.

<p style="line-height: 1.2 !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 5

This p element has a computed line-height of normal which is below the recommended minimum (used value is generally around 1.2).

<p style="line-height: normal !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Failed Example 6

This p element has a computed line-height of normal which is below the recommended minimum (used value is generally around 1.2).

<p style="line-height: 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="line-height: 1.2em">ACT rules</text>
</svg>

Inapplicable Example 2

This p element is not visible because of display: none.

<p style="display: none; line-height: 1em !important">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 3

This p element is not visible because it is positioned off-screen.

<p style="position: absolute; top: -999em; line-height: 1em !important;">
	The toy brought back fond memories of being lost in the rain forest.
</p>

Inapplicable Example 4

The style attribute of this p element does not declare the line-height property.

<p style="width: 60%">
	The toy brought back fond memories of being lost in the rain forest.
</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:

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.

Content is defined in WCAG.

For more details, see examples of visible.

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 Consistency Complete Report
QualWeb Consistent Yes View Report
SortSite Consistent Yes View Report

Changelog

This is the first version of this ACT rule.

Back to Top