SIA-R116`<summary>` element has non-empty accessible name

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

This rule checks that each <summary> element has a non-empty accessible name.

This rule applies to every <summary> element in the HTML namespace for which all the following are true:

The element has an accessible name that is not empty, nor just the name of the ::marker pseudo-element.

There is a difference in how user agents expose ::marker pseudo-element (the triangle indicating the control's expand state). As a result, some user agents include it in the accessible name of the <summary> element but other don't.

Some user agents expose the <summary> element with a button role, which deviates from its implicit ARIA semantics described in ARIA in HTML. Because some browsers do not give <summary> elements a button role, the presence of an accessible name must be treated separately for button role and <summary> elements.

This rule is only applicable to <summary> elements that the browser will use as controls for a <details> element.

This rule is not applicable to <summary> elements with an explicit semantic role. Most of the time these likely do require an accessible name; this is covered by other rules.

This <summary> element has an accessible name because of its text content.

<details>
    <summary>Opening times</summary>
    <p>This is a website. We are available 24/7.</p>
</details>

<details>
    <summary aria-label="Opening times"></summary>
    <p>This is a website. We are available 24/7.</p>
</details>

This <summary> element has no accessible name, or an accessible name with just the ::marker pseudo-element, because it has no content nor attribute that can provide it.

<details>
    <summary></summary>
    <p>This is a website. We are available 24/7.</p>
</details>

This <summary> element has an explicit role of none. However, it is focusable (by default) which causes Presentational Roles Conflict Resolution. It fails because it has an empty accessible name.

<details>
    <summary role="none"></summary>
    <p>This is a website. We are available 24/7.</p>
</details>

<summary></summary>

<details>
    <div>
        <summary></summary>
    </div>
    <p>This is a website. We are available 24/7.</p>
</details>

This <summary> element has an explicit semantic role of button. These are tested by another rule. Note that while this example does not fail WCAG, under ARIA in HTML it is not allowed to override the role of a summary for its parent details.

<details>
    <summary role="button">Opening hours</summary>
    <p>This is a website. We are available 24/7.</p>
</details>