Site Health Info: Bad value heading for attribute role on element dt

[mukesh27]

In the WordPress Site Health Info page dt tag contains the attribute "role" with the value of "heading", Accordingly to HTML5 this is Error.

Code: <dt role="heading" aria-level="3">
Error: Bad value heading for attribute role on element dt.

According to ​w3c document dt tag use "listitem" role.

[mukesh27]

Patch.

[afercia]

Related: #42002.

[afercia]

Moving to 5.2 as per today's accessibility bug-scrub as this is something that should be addressed before releasing. Agreed to remove the <dl> and use markup from the ARIA Authoring Practices example: ​https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

[afercia]

46714.2.diff​ builds on the previous patch and addresses also #46715.

• removes the definition list and uses the markup from the ARIA Authoring Practices example
• removes redundant ARIA roles

There's a problem though. The ARIA role="region" and aria-labelledby make the accordion panels be announced as ARIA landmarks. Thus, when the panels are open (not hidden), there are a lot of landmarks which is undesirable and confusing for assistive technologies users. Screenshots:

Firefox + NVDA:

Safari + VoiceOver:

I'd like to discuss this issue with the accessibility team. Personally, I'd say these accordion panels shouldn't be perceived as landmarks.

Quoting from the ARIA Authoring Practices:
​https://www.w3.org/TR/wai-aria-practices-1.1/#accordion

Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.

• Avoid using the region role in circumstances that create landmark region proliferation, e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
• Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.

[afercia]

#46715 was marked as a duplicate.

[joedolson]

Agreed. These regions should not be landmark regions; that would result in an excessive profusion of landmarks, exactly as described in the ARIA authoring practices.

[afercia]

46714.3.diff​ removes role="region" and aria-labelledby to avoid landmarks proliferation.

[afercia]

In 45087:

Accessibility: Improve the Site Health accordions.

• removes the definition list and uses the markup from the ARIA Authoring Practices example
• removes incorrect ARIA roles
• avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.