Description

Note: In the following screenshots, I'm using the HeadingsMap browser extension (available for Chrome and Firefox) to visually illustrate the headings in the page.

In the Site Editor > Design > Patterns, the available patterns are shown in a series of screen by type..

1
In these screens, the headings hierarchy is incorrect: it jumps from H1 level to H4:

That happens also in the 'My patterns' screen:

Additionally, all the H5 headings highlighted in the screenshot below are places within a container that user aria-hidden="true". As such, they're not perceivable by assistive technologies. In any case, the H5 heading level is incorrect:

These headings should either be perceivable (by removing aria-hidden="true"from the container) and use a correct level or not be heading. Everything is inside ARIA listbox / options and the options are labeled so I don't see the need to use a H5 in the first place. Why use a H5 and then hide it by teh means of aria-hidden?

However, I'd reconsider the listbox / options implementation as it introduces unnecessary complex interaction for screen reader users. This i sjust a list of objects, visually presented in a grid. I'd recommend to use a standard list.

To my understanding, this headings part comes from previous code that was moved / rearranged to add the Patterns management screens. I guess part of the incorrect headings hierarchy comes from pre-existing code but it would be great that all developers always check the headings levels are correct, as they're of fundamental importance for screen rearer users to efficiently navigate the content. ❤️ Cc @aaronrobertshaw

2
The visually hidden description of each pattern:

• For user patterns, it is not a real description of the pattern: it's more generic instructions / help text e.g. 'press Enter to do this, Delete, to do that etc.' It's the same text for all user patterns.
• It uses aria-describedby incorrectly. As explained in [Library] Add lock icon for theme patterns #51990 (comment) aria-describedby accepts an ID reference. Instead, in this case it is passed the description text:

Step-by-step reproduction instructions

• Go to Site Editor > Design > Patterns
• Use the HeadingsMap browser extension.
• Navigate the various screens.
• Observe the headings hierarchy is incorrect.
• In the dev tools Inspector, observe each pattern does have a visually hidden description. However, the aria-describedbby attribute on the listed pattern doesn't point to the ID of the hidden description. Instead, it incorrectly holds the description text.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes