Skip to content

(Accessibility) - Discover Tab Navigation/Contrast #37547

@barlowm

Description

@barlowm

Steps to reproduce WebAIM Contrast Checker

Tab through the page and observe where the focus is.
In tabbing through the page the indicator as to where the current focus is on tab 7 from Search (the "apm-" control receives focus) is almost invisible.

APMFocus

The next press of the tab key has no focus indicator that I can find. There IS a faint outline around "apm-" but this does not meet contrast requirements 002B48/003E68 - gives a contrast ratio of 1.29.
apmfocuscontrast
#9E9EFF/003e68 would give a CR of 4.65 which would pass contrast requirements. Though a #ffffff/003e68 would be better.

Continued tab key navigation highlights the "add" button but the focus is nearly invisible once again.

AddBtnFocus

AddContrast1
AddContrast2

Meta Issue

Accessibility: Make Discover Accessible for 7.0

Kibana Version:

7.0

Relevant WCAG Criteria:

1.4.3 - Contrast (Minimum) - Level AA

Recommendation:

Adjust foreground/background colors to have a minimum of 4.50 contrast

References:

Guideline 1.4 – Distinguishable

1.4.3 - Contrast (Minimum) Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Techniques:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions