yari icon indicating copy to clipboard operation
yari copied to clipboard

Baseline box: <h2> in <summary> might be a problem

Open simevidas opened this issue 1 year ago • 2 comments

Summary

The new Baseline <details> element has a heading in its summary.

<summary>
    <!-- other content -->
    <h2>
        Baseline: <span>Widely supported</span>
    </h2>
    <!-- other content -->
</summary>

This heading is ignored by screen readers because the entire <summary> content is read out as a single text summary. See the Warning box on this page:

https://developer.mozilla.org/docs/Web/HTML/Element/summary#summaries_as_headings

Should the heading be there? What purpose does it have? Does this cause problems for users? Should the heading be replaced by a <span>?

URL

https://developer.mozilla.org/docs/Web/CSS/@layer

Reproduction steps

  1. Open the linked page and inspect the Baseline box in devtools DOM inspector

Expected behavior

Maybe there shouldn’t be a heading in summary.

Actual behavior

There is a heading in summary.

Device

Desktop

Browser

Safari

Browser version

Stable

Operating system

Mac OS

Screenshot

Screenshot 2023-05-12 at 14 00 23

Anything else?

No response

Validations

simevidas avatar May 12 '23 12:05 simevidas