APM Accessibility

[aphelionz]

This is the meta issues to track the work to make APM UI accessible and specific issues found in APM UI.

• [Accessibility] APM should self-announce and [Accessibility] APM should self-announce and auto-focus search field #28143
• [Accessibility] Request and Errors don't seem to be rendered as proper ARIA tablists [Accessibility] Request and Errors don't seem to be rendered as proper ARIA tablists #28144
• [Accessibility] Graphs need "This graph is not yet accessible" message in screenreader [Accessibility] Graphs need "This graph is not yet accessible" message in screenreader #28145
• [Accessibility] Integrations tab should announce that it's a popup [Accessibility] Integrations tab should announce that it's a popup #28146
• [Accessibility] Enable Error reports does not announce that it's in a drawer interface [Accessibility] Enable Error reports does not announce that it's in a drawer interface #28147
• [Accessibility] Enable error "Actions" checkboxes not labeled properly [Accessibility] Enable error "Actions" checkboxes not labeled properly #28148

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@alvarolobato Are you intending that we fix all the accessibility issues above? This issue was placed in Implementation ready.

[jasonrhodes]

@rayafratkina Can you help us understand what the various "announce" / "self-announce" tasks are in this list? I'm not familiar with what that means and don't see anything in WCAG when I looked...

TIA!

[rayafratkina]

Glad to help!
Self-announce refers to automatically reading out the app header when user opens the app to orient them to the screen they are on.
Announce is about having correct screen-readable labels when user tabs to an element of the page.
In case of Graph (#28145) the convention we have adopted is to announce when there is a component on the page that is not announced in detail by the screen reader.

[jasonrhodes]

Self-announce refers to automatically reading out the app header when user opens the app to orient them to the screen they are on.

@rayafratkina thanks for the help! How exactly is this done? It's not clear what we would need to do to make this announcement happen?

[rayafratkina]

If it does not make sense to have a heading in that place, the best practice is to add aria labels. See https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html
aria-label will be read by the screen reader to announce the element.

[jasonrhodes]

@rayafratkina I'm sorry, I still don't understand! For instance, one of the recommendations here is "APM should self-announce" ... you described self-announce to mean this: "Self-announce refers to automatically reading out the app header when user opens the app to orient them to the screen they are on." That sounds like something the screen reader does, so it sounds like there's no action to take on our part? If that's true, can I close those announce recommendations as long as there is a heading on every page (all APM pages have a heading)?

[sorenlouv]

@jasonrhodes I think we just have to make sure, that the query bar input contains the necessary aria labels, so the screen reader can announce that on enter/focus.

[formgeist]

@formgeist will reach out to the Kibana team that was responsible for the audit in the first place, to understand what needs happen in these cases.

[botelastic]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.