SIA-R75Font sizes are not too small

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that font sizes are larger than 9 pixels.

Applicability

This rule applies to every element in the HTML namespace with visible textual content and a cascaded font-size property.

Expectations

  1. For each parent of a non-whitespace only text node descendant of the target element, at least one of the following conditions is true:

Assumptions

This rule makes the following assumption:

  • No mechanism is available to change the font size of the text.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This paragraph of text has a font-size larger than 9 pixels and therefore passes the rule:

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

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec diam
    ullamcorper, cursus nulla non, congue purus. Cras vehicula risus lacus, ac
    placerat diam vestibulum a. Maecenas lobortis enim interdum nisl vehicula
    eleifend. Sed et velit nulla.
</p>

This paragraph of text has a computed font-size of 16 pixels and passes the rule. The <div> element matches the large enough condition; the <p> element matches both the independent and large enough conditions.

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

<p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec diam
        ullamcorper, cursus nulla non, congue purus. Cras vehicula risus lacus, ac
        placerat diam vestibulum a. Maecenas lobortis enim interdum nisl vehicula
        eleifend. Sed et velit nulla.
    </div>
</p>

Failed

This paragraph of text has a font-size smaller than 9 pixels and therefore fails the rule:

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

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec diam
    ullamcorper, cursus nulla non, congue purus. Cras vehicula risus lacus, ac
    placerat diam vestibulum a. Maecenas lobortis enim interdum nisl vehicula
    eleifend. Sed et velit nulla.
</p>

This paragraph of text has a computed font-size of 2 pixels and fails the rule. The <div> element fails the rule; the <p> element passes the rule because it matches the independent condition.

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

<p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec diam
        ullamcorper, cursus nulla non, congue purus. Cras vehicula risus lacus, ac
        placerat diam vestibulum a. Maecenas lobortis enim interdum nisl vehicula
        eleifend. Sed et velit nulla.
    </div>
</p>

This paragraph of text has a text node whose computed font-size is 16 pixels, the "Hello" node, and one whose computed font-size is 2 pixels, the "World" node, and therefore fails the rule. The <span> element passes the rule.

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

<p>
    <span> Hello </span>
    World
</p>

This <span> element fails the rule. The <p> element passes the rule. It has two text nodes; the first one has a parent (the <span> element) whose specified font-size is not cascaded from the <p> element, and therefore matches the (independent) condition; the second one has a parent (the <p> elements itself) whose computed font-size is 16px and therefore matches the (large enough) condition.

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

<p>
    <span> Hello </span>
    World
</p>

Inapplicable

This paragraph of text is hidden and is therefore inapplicable:

<p hidden>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec diam
    ullamcorper, cursus nulla non, congue purus. Cras vehicula risus lacus, ac
    placerat diam vestibulum a. Maecenas lobortis enim interdum nisl vehicula
    eleifend. Sed et velit nulla.
</p>