[ML] Improve ML Accessibility

elasticmachine commented 7 years ago

Original comment by @peteharverson:

Complements the Kibana issue https://github.com/elastic/kibana/issues/11534

Issues that need to be resolved:

Global issues

[x] [Accessibility] Machine Learning Headers lacking proper aria navigation markup LINK REDACTED
[x] [Accessibility] Nothing is auto-focused when directly navigating to Machine Learning module LINK REDACTED
[x] ~~Remove unnecessary aria-label tags e.g. Job Management - Edit job - Add custom URL button, see https://github.com/elastic/kibana/issues/11838~~ (superseded by individual tasks below)
[x] ~~Add aria-label with content of tooltip to info icons and remove aria-hidden~~ The aria-hidden can stay since LINK REDACTED solved this: the tooltip content is now referenced via aria-describedby from the corresponding form fields
[x] Make time zoom in / zoom out icons keyboard accessible
[ ] Add anomaly score legend to all charts which display anomalies

Paginated table component

[x] Tab into table header sort icons, see: https://github.com/elastic/kibana/issues/11513 https://github.com/elastic/kibana/issues/11853
[x] Add alternative text to expand/collapse row buttons
[x] Use the aria-expanded attribute to identify the expanded/collapsed state of the 'expand/collapse row' icon
[x] Add alternative text to add / remove filter buttons
[x] Make links dropdown and options keyboard accessible (fixed in 6.4)
[x] Make pagination links keyboard accessible, see: https://github.com/elastic/kibana/issues/12247
[x] Associate page size label with form control (fixed in 6.4)
[x] Add aria-hidden="true" to severity icons
[x] Replace empty table <th> elements with <td>, see https://github.com/elastic/kibana/issues/12401
[x] Use scope attribute in <th> elements to associate them with the column they identify, see https://github.com/elastic/kibana/issues/12401

Job Management page

[x] Add Headings, see: https://github.com/elastic/kibana/issues/11519 https://github.com/elastic/kibana/pull/12211
[x] Make expanded row tabs tabbable, see: https://github.com/elastic/kibana/issues/11513 (fixed in 6.4)
[x] Mark up the expanded row tabs and their container as tabpanels, see: https://github.com/elastic/kibana/issues/11841 (fixed in 6.4)
[x] Make all clickable elements keyboard accessible (button, or use href, or kbnAccessibleClick) (fixed in 6.4)
[x] ~~Add aria-label to job filter input~~ (replaced with Search bar type=search in 6.4)
[x] ~~[Accessibility] Suggestion: Add table stats to job filter input's aria-label attribute https://github.com/elastic/kibana/issues/18434~~ (job filter replaced with Search bar type=search in 6.4)
[x] Add aria-label to all icons without text using content of tooltip (e.g. Job action buttons, Job Messages), see: https://github.com/elastic/kibana/issues/11520
[x] For icons with text add aria-hidden="true"
[ ] Start Datafeed modal - make start and end time links keyboard accessible (use buttons, or anchor with href)
[x] Edit job modal - make all form inputs elements keyboard accessible
[x] Edit job modal - make tabs keyboard accessible (fixed in 6.4)
[x] [Accessibility] Job Filter "Clear" button not accessible via keyboard navigation LINK REDACTED
[x] [Accessibility] Job Management List Table Sort / Filter icons not keyboard accessible LINK REDACTED
[x] [Accessibility] Job Management Listing Table Action buttons lacking proper labeling LINK REDACTED
[x] [Accessibility] Suggestion: Job Management List Table "expand/collapse" button could read table contextual stats #18435 (fixed in 6.5)
[x] [Accessibility] Machine Learning New Job: Info tooltips are not read by screen reader LINK REDACTED
[x] [Accessibility] Machine Learning Job Creation Needs Real Time Feedback #18437 (fixed in 6.5)

Create Job pages

[x] Add Headings, see: https://github.com/elastic/kibana/issues/11519
[x] Make wizard job type icons keyboard accessible
[x] Associate wizard job type labels with form controls, or remove <label> element, see: https://github.com/elastic/kibana/issues/11837
[ ] Add aria-labelledby attributes to 'select index' and 'select saved search filter fields' (Kibana directives paginated-selectable-list and saved-object-finder)
[x] Associate all form controls with labels, see https://github.com/elastic/kibana/issues/11837
[x] Add aria-invalid="true"to invalid form fields e.g. blank job name field, see: https://github.com/elastic/kibana/issues/11523
[x] The <ui-select> directive doesn't correctly support the aria-labelledby and aria-describedby attributes which were added in LINK REDACTED

Create Single Metric job

[x] Fix tab order of run search and Estimate Bucket span button
[x] Add aria-label to run search button (fixed in 6.4)
[x] Add focus indicator to Advanced expand arrow
[x] Make options in watch severity dropdown keyboard accessible
[ ] Avoid duplicate 'View Results' button which causes repetition for screen reader users
[ ] Add tooltips to results chart to display anomaly scores

Create Multi Metric job

[x] Add focus indicator to Advanced expand arrow
[x] Make options in watch severity dropdown keyboard accessible
[ ] Use alternative to (orphaned) <label> components in results area
[ ] Add tooltips to results charts to display anomaly scores

Advanced job wizard

[ ] Make tabs (Job Details, Analysis Configuration etc) keyboard accessible
[x] Add/edit detector modal - make function field, Help link, Add and Cancels buttons keyboard accessible
[x] Add detector modal - function and field select lists do not scroll as navigating down options with Arrow key
[x] Add detector modal - make 'delete' icon in function and field select inputs keyboard accessible
[x] Data Preview tab - make preview area keyboard accessible
- [ ] JSON editor used in Advanced job wizard needs to be the standard accessibly EuiCodeEditor used elsewhere

Job picker

[x] Make control keyboard accessible
[x] Fix tab order of Apply / Cancel buttons and 'Apply time range' checkbox
[x] Row checkbox could hold helpful info for screen readers #18436 (fixed in 6.5)

Anomalies table

[x] Make options in Interval and Severity dropdowns keyboard accessible
[x] Associate the interval and severity form controls with labels, see https://github.com/elastic/kibana/issues/11837
[x] Blank header for expand column in EUI anomalies table should be a <td> not a <th> (fixed in 6.4)

Anomaly Explorer

[x] Add Headings, see: https://github.com/elastic/kibana/issues/11519 https://github.com/elastic/kibana/pull/12211
[x] Make options in View by dropdown keyboard accessible
[ ] Make swimlane component and swimlane selection keyboard accessible
[x] Make 'View' links on anomaly charts keyboard accessible (fixed in 6.5)
[x] Associate the view by form control with a label, see https://github.com/elastic/kibana/issues/11837
[x] [Accessibility] Anomaly Explorer "job" dropdown requires proper aria-labeling LINK REDACTED
[x] [Accessibility] Anomaly Explorer "Job" Popup check all checkbox needs proper labeling LINK REDACTED

Single Metric Viewer

[x] Add Headings, see: https://github.com/elastic/kibana/issues/11519 https://github.com/elastic/kibana/pull/12211
[x] Add aria-label to 'refresh dashboard' button
[x] Make chart zoom interval links keyboard accessible
[ ] Make chart brush keyboard accessible
[x] Associate the detector, and entity form controls with labels, see https://github.com/elastic/kibana/issues/11837

Longer term issues

[ ] Add 'spy' panel to Create Single Metric job wizard chart (see #46155)
[ ] Add 'spy' panel to Create Multi Metric job wizard charts (see #46155)
[ ] Add 'spy' functionality to Anomaly Explorer swimlane (see #46155)
[ ] Add 'spy' functionality to Anomaly Explorer anomaly charts (see #46155)
[ ] For swimlane, consider additional / alternative indicator for score to color scale as colors of cells can be hard to distinguish depending on color vision impairment

Testing notes

Color contrast

For testing the plugin as a color vision impaired person would see it, use the Chrome colorblinding extension
For evaluating the content for accessibility issues, use the WAVE Chrome extension, see http://wave.webaim.org/extension/

For screen reader accessibility:

For testing on Windows - use the NVDA screen reader, https://www.nvaccess.org/
For a guide on testing with the NVDA screen reader see http://webaim.org/blog/testing-with-the-nvda-screen-reader/

6.3 issues

[x] New Job should not auto-focus Saves Searches Filter without giving proper screen reader context (fixed in 6.5 by disabling auto focus)
[x] Create New Job - Job Groups tags input not tabbable
[x] Info boxes on create new jobs label not accessible via keyboard nav (fixed in 6.4)
- [x] Validate Job modal gives no context as to the number or nature of errors
- [x] ~~Create new job tabs not navigable~~ (duplicate of issue under Job Management, fixed in 6.4)
- [x] ~~are input names like scroll_type intentional?~~ (scroll_size is one of the parameters used in the datafeed configuration for example)
- [x] single day / date range / time range tabs not accessible via screen reader (fixed in 6.5)
- [x] errors are not read by the screen reader (fixed in 6.6 by #26741)
- [x] Edit button on calendar creation (or any table) must read job name (fixed in 6.5)
- [x] Create calendar button is being announced as create dashboard button in screenreader
- [x] The values select box in data visualizer is missing form labels.
- [x] All field types drop down select in data visualizer is missing label

elasticmachine commented 7 years ago

Original comment by @cjcenizal:

Awesome work on this @peteharverson!

rayafratkina commented 6 years ago

@peteharverson added 6.3 issues from the audit to the description. Let me know if you have any questions.

rayafratkina commented 6 years ago

Shortcut to see WCAG A issues related to ML: https://github.com/elastic/kibana/issues?q=label%3A%22WCAG+A%22+label%3A%3Aml+is%3Aopen

peteharverson commented 6 years ago

Reviewed issue, checking off items which are done for 6.4.0. I will aim to add notes on which version each was fixed in over the next few days.

elastic / kibana