SIA-R93!important line height in style attribute is wide enough

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

Description

This rule checks that the style attribute is not used to prevent adjusting line-height by using !important, except if it's at least 1.5 times the font size.

Applicability

This rule applies to every element in the HTML namespace with a visible text node child and whose text includes a soft wrap break, when all the following are true for the line-height property of the element:

The property can be declared on an ancestor of the test target.

Expectation

  1. The used value of the line-height property of the target element is at least 1.5 times the computed value of its font-size property.

Assumptions

This rule makes the following assumption:

  • There is no mechanism available on the page to adjust line-height.

  • The font size is constant for all text node children of the element. If font-size changes (e.g., through use of the ::first-line pseudo-element) then the required line height would also change throughout the element.

  • The target text nodes children express something in a human language written in a script that that uses the line-height 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. If accessibility support does not include assistive technologies that override line-height through author origin, this rule should not be used.

Implementation details

The implementation of this rule in Alfa has the following additional choices:

  • When the computed value of the line-height property is normal, a used value of 1.2 is chosen, hence below the required threshold. Most user agents have a used value below 1.5 in such a case.

  • The presence of soft wrap break is not checked. This may create falgse positives, when line-height is applied to a single line of text.

Examples

The max-width property in the examples ensures the presence of a soft wrap break

Passed

This <p> element has a used line-height of twice the font size.

<p style="line-height: 2em !important; max-width: 200px;">
    The quick brown fox jumps over the lazy dog.
</p>

The <div> element is inapplicable since it does not have any text node children. The <p> element has a computed line-height of 15px, 1.5 times its computed font-size of 10px

<div style="font-size: 16px; line-height: 15px !important">
	<p style="font-size: 10px; max-width: 100px;">
        The quick brown fox jumps over the lazy dog.
	</p>
</div>

Failed

This <p> element has a used line-height equal to the font size, which is below the required minimum.

<p style="line-height: 1em !important; max-width: 200px;">
    The quick brown fox jumps over the lazy dog.
</p>

Inapplicable

The <div> element has no text node children.

<div style="letter-spacing: 0.1em !important;"></div>

This <p> element does not have an important computed line-height.

<p style="line-height: 1.2em; max-width: 200px;">
    The quick brown fox jumps over the lazy dog.
</p>

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/78fd32/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).