(Accessibility) Multiple apps missing <h1> tag or content for <h1> tag or have nesting defects

barlowm commented 4 years ago

Dashboard page The initial panel with the dashboard name (sample data sets) is an H3, where others are H2s, creating a nesting mis-match. Screenshot at the bottom of the description.

Discover page

<discover-app class="app-container">
<h1 class="euiScreenReaderOnly"></h1>

[x] Dashboard
[x] Discover
[x] Canvas page - No <h1> Tag at all
[x] Machine Learning page - No <h1> Tag at all
[ ] Metrics page - No <h1> Tag at all
[ ] Logs page - No <h1> Tag at all
[ ] APM page - HAS <h1> Tag but heading nesting is not maintained (<h1> followed by an <h3>)
[x] Uptime page - HAS <h1> Tag but heading nesting is not maintained (<h1> followed by an <h3>)
[ ] SIEM page - No <h1> Tag at all
[ ] Dev Tools - HAS <h1> Tag but heading nesting is not maintained (<h1> followed by an <h2> followed by an <h4>)

Kibana Version: 7.6.2

OS: Windows 7

Browser: Chrome

Screen reader: [if relevant] N/A

Relevant WCAG Criteria: [#.#.# WCAG Criterion - Level A/AA/AAA](link to https://www.w3.org/WAI/WCAG21/quickref/) 2.4.6 - Headings and Labels - Level AA Headings and labels describe topic or purpose.

Screenshots

1Copenut commented 2 years ago

This seems correlated with https://github.com/elastic/kibana/issues/42379. I'm in favor of setting focus on the H1 of a page view when we swap URLs using client-side routing, so screen readers announce the change properly. I'll do some more research, but I think these are related items.