Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Accessibility) Kibana Stack Monitoring - Tables need better information #42400

Open
barlowm opened this issue Jul 31, 2019 · 2 comments
Open
Labels
loe:small Small Level of Effort Project:Accessibility Team:Monitoring Stack Monitoring team WCAG A

Comments

@barlowm
Copy link
Collaborator

barlowm commented Jul 31, 2019

Steps to reproduce (assumes NVDA or JAWS Screen Reader or similar)

NVDA Screen Reader is a free Screen Reader which can be downloaded from the NV Access Website
Deque has a page of shortcuts for help on using NVDA as well as a Quick Reference Guide for using NVDA

Steps to reproduce

  1. Navigate to the Kibana Stack Monitoring page
  2. Navigate to the "Recent Log Entries" table (Click in the "Logs" component, then press the "T" key to go to the next table)
    The first table on the page is the "Recent Log Entries" but table navigation to the first table does not tell you what table you're in.
    NVDA Reads: "Table with 11 rows and 6 columns. Below is a table of 10 items"

The caption should be more descriptive. Identifying it as a "table of N items" does not describe the purpose of the table (which would be read when navigating directly through the list of tables e.g. "Recent Log Entries showing the most...").

<caption role="status" aria-relevant="text" aria-live="polite"
class="euiScreenReaderOnly">Below is a table of 10 items.</caption>

A better caption would be:

<caption role="status" aria-relevant="text" aria-live="polite"
class="euiScreenReaderOnly">Recent Log Entries for this cluster</caption>
  1. Navigate through the table with the keyboard using the table caret navigation controls (T, DownArrow, Ctrl-Down/RightArrow, Ctrl-Left/RightArrow)
    Switching between columns and rows, the screen reader will announce the column header (e.g. "Level", "Type", "Message"), but not the row (other than the row number "Row 3")
    The screen reader does not read the "timestamp" which would tell the reader what row they are looking at.

Add

scope="row"

to the first <TH> tag of each <TR> tag in the table (currently the rows of the table do not have <TH> for the first cell of the row. This will cause the screen reader to read the data in the first cell of the row before reading the contents of the selected cell.

Meta Issue
Accessibility Audit for Kibana 7.0

Kibana Version:
7.2

OS:
Tested on Windows 7. But issue exists in all OS's

Browser:
Tested in Chrome. But issue exists in all Browsers

Screen reader: [if relevant]
NVDA

Relevant WCAG Criteria: WCAG Criterion
1.3.1 Info and Relationships - Level A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text

Relevant ARIA spec: WAI-ARIA Authoring Practices 1.1
N/A

Tables Concepts

Blocked by elastic/eui#2336

@elasticmachine
Copy link
Contributor

Pinging @elastic/stack-monitoring

@myasonik
Copy link
Contributor

myasonik commented Oct 1, 2020

EUI supports rowHeader and tableCaption props to fix this issue

@myasonik myasonik added the loe:small Small Level of Effort label Oct 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
loe:small Small Level of Effort Project:Accessibility Team:Monitoring Stack Monitoring team WCAG A
Projects
None yet
Development

No branches or pull requests

5 participants