(Accessibility) Skip links to main content

[barlowm]

Actual Result:

No skip to main content (from page loading it required over 100 tab key presses to get to the main content to start working with the controls on the chart.)

Steps to reproduce:

When the Discover page loads, use the keyboard to navigate to the main content of the page:

Expected Result:

A "skip to main content" link should be added as the first link on the page (See "Skip Navigation" links in WebAIM for possible techniques) that allows the user to navigate to the main content of the page without having to tab through all the navigation elements on the page.

Meta Issue:

Accessibility Audit for Kibana 7.0

Accessibility: Make Discover Accessible for 7.0

Kibana Version:

7.0, 7.2

Relevant WCAG Criteria:

WCAG Criterion - 2.4.1Bypass Blocks - Level A

[elasticmachine]

Pinging @elastic/kibana-core-ui (Team:Core UI)

[myasonik]

This problem is much broader than Discover (every page on Kibana) so swapping this to a Core UI problem

[myasonik]

This issue also blocks one of the tests added in #57821/#58122 (in test/accessibility/apps/dashboard.ts)

[ryankeairns]

I attempted to implement this in Kibana using the new EuiSkipLink and ran into issues with using anchor tags in our hash-driven URLs. When the router sees an href that begins with a # it trims everything back to the root and essentially routes the skip link back to the home page. I missed this in my initial prototype as I was only testing things out on the home page... so things appeared to work :/

There are a couple (or more) changes that will need to be in place for this to work:

• The component destinationId prop is too restrictive. The consumer will likely need to build and pass a URL to the EuiSkipLink component.
• Further, Kibana will need to be able to properly route requests containing anchor tags. I'm not exactly clear on the solution, but I suspect we may need to add a library for such purposes or roll a custom solution for handling anchor links in URLs.

That second point is a blocker and sounds potentially difficult. Before this proceeds any further, we would need to commit some engineering brainpower. Core UI has limited eng resources at this time, so we'll have to revisit this topic once the team is further built out.

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[kertal]

dear @ryankeairns , could you validate if this issue is still valid or can be closed?

[jughosta]

Probably addressed via #150461

[ryankeairns]

Ah yes, fantastic enhancement!