SIA-R79Preformatted text represents either code or a figure

Accessibility requirements

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

Description

This rule checks that preformatted text is used either to represent computer code or inside a figure

Applicability

This rule applies to every <pre> element that is rendered.

Expectations

1. The target element either is visible or at least one of its inclusive ancestors has an aria-hidden state set to true.

2. Either the target element is a descendant of a <figure> element, or every visible text node descendant of the test target is also the descendant of an element which:

   • is a descendant of the target element; and

   • is either a <code>, <kbd> or <samp> element.

   <pre> elements that fail the first expectation are only exposed to assistive technologies, not to sighted users. This effectively defeat the purpose of using preformatted content in the first place.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This visible <pre> element is part of a <figure>:

<figure aria-label="Shrug emoji in ASCII art">
    <pre aria-hidden="true">¯\_(ツ)_/¯</pre>
</figure>

This visible <pre> element has all its descendant text nodes included in a <code> element:

<pre>
    <code>
        console.log("Hello world");
    </code>
</pre>

This visible <pre> element has all its descendant text nodes included in <samp> and <kbd> elements:

<pre>
    <samp>You are in a room with a door and a desk.</samp>
    <kbd>Open door</kbd>
    <samp>The door is locked.
    You are in a room with a door and a desk.</samp>
</pre>

Failed

This <pre> element is only exposed to assistive technologies:

<figure><pre style="position: absolute; left: -9999px">¯\_(ツ)_/¯</pre></figure>

This <pre> element neither is the descendant of a <figure> element, nor has its text nodes included in the correct elements:

<pre>¯\_(ツ)_/¯</pre>

Inapplicable

This <pre> element is not rendered:

<figure hidden><pre>¯\_(ツ)_/¯</pre></figure>

This page contains no <pre> element:

<p>Hello world</p>