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) Manage Users - Tables need better information #43018

Closed
barlowm opened this issue Aug 9, 2019 · 6 comments · Fixed by #82713
Closed

(Accessibility) Manage Users - Tables need better information #43018

barlowm opened this issue Aug 9, 2019 · 6 comments · Fixed by #82713
Assignees
Labels
Feature:Users/Roles/API Keys good first issue low hanging fruit loe:small Small Level of Effort Project:Accessibility Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! WCAG A

Comments

@barlowm
Copy link
Collaborator

barlowm commented Aug 9, 2019

Also see Issue #42505, #42400

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. Enable NVDA Screen Reader

  2. Log in to Kibana

  3. Navigate to the Management / Security / Users page

  4. Using the keyboard only navigate to the one table on the page (press the "T" key to go to the table)
    NVDA Reads: "Table with 3 rows and 6 columns. Below is a table of 3 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).

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

A better caption would be:

<caption role="status" aria-relevant="text" aria-live="polite" 
class="euiScreenReaderOnly">List of users (3)</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. "Full Name", "User Name", "Email Address"), but not the row (other than the row number "Row 3")
    The screen reader does not read the "Space" which would tell the reader what row they are looking at.

Convert the "Full Name" <TD> to a <TH> for each table row and add

scope="row"

to the <TH> 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.

Browser:
Tested in Chrome.

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

@rayafratkina rayafratkina added the Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! label Jan 10, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-security (Team:Security)

@legrego
Copy link
Member

legrego commented Jan 10, 2020

@elastic/eui-design I didn't find anything looking through the docs -- does EUI provide a way for consumers to tell the table components what the items are?

For example, instead of Below is a table of 3 items., can we have it announce Below is a table of 3 users.?

@kobelb
Copy link
Contributor

kobelb commented Jan 13, 2020

This is blocked by elastic/eui#2336. @rayafratkina has requested that we address this issue for 7.6, is there any chance we can resolve #2336 within this time-frame?

@snide
Copy link
Contributor

snide commented Jan 14, 2020

This will need to wait till 7.7. We've targeted the EUI work during the next week, but it won't get addressed by tomorrow.

@kobelb
Copy link
Contributor

kobelb commented Jan 14, 2020

Cool, thanks @snide !

@myasonik
Copy link
Contributor

myasonik commented Oct 1, 2020

EUI now supports rowHeader and tableCaption props

@myasonik myasonik added the loe:small Small Level of Effort label Oct 1, 2020
@legrego legrego added the good first issue low hanging fruit label Oct 1, 2020
@legrego legrego self-assigned this Nov 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Users/Roles/API Keys good first issue low hanging fruit loe:small Small Level of Effort Project:Accessibility Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! WCAG A
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants