[ML] Improve ML Accessibility

[elasticmachine]

Original comment by @peteharverson:

Complements the Kibana issue #11534

Issues that need to be resolved:

Global issues

• [Accessibility] Machine Learning Headers lacking proper aria navigation markup LINK REDACTED
• [Accessibility] Nothing is auto-focused when directly navigating to Machine Learning module LINK REDACTED
• Remove unnecessary aria-label tags e.g. Job Management - Edit job - Add custom URL button, see Accessibility: Remove unnecessary ARIA #11838 (superseded by individual tasks below)
• 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
• Make time zoom in / zoom out icons keyboard accessible
• Add anomaly score legend to all charts which display anomalies

Paginated table component

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

Job Management page

• Add Headings, see: Accessibility: Headings #11519 11851 a11y discover field chooser headers (rebased version) #12211
• Make expanded row tabs tabbable, see: Accessibility: Interactive elements #11513 (fixed in 6.4)
• Mark up the expanded row tabs and their container as tabpanels, see: Accessibility: Tabs #11841 (fixed in 6.4)
• Make all clickable elements keyboard accessible (button, or use href, or kbnAccessibleClick) (fixed in 6.4)
• Add aria-label to job filter input (replaced with Search bar type=search in 6.4)
• [Accessibility] Suggestion: Add table stats to job filter input's aria-label attribute [ML] [Accessibility] Suggestion: Add table stats to job filter input's aria-label attribute #18434 (job filter replaced with Search bar type=search in 6.4)
• Add aria-label to all icons without text using content of tooltip (e.g. Job action buttons, Job Messages), see: Accessibility: Alternative text #11520
• 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)
• Edit job modal - make all form inputs elements keyboard accessible
• Edit job modal - make tabs keyboard accessible (fixed in 6.4)
• [Accessibility] Job Filter "Clear" button not accessible via keyboard navigation LINK REDACTED
• [Accessibility] Job Management List Table Sort / Filter icons not keyboard accessible LINK REDACTED
• [Accessibility] Job Management Listing Table Action buttons lacking proper labeling LINK REDACTED
• [Accessibility] Suggestion: Job Management List Table "expand/collapse" button could read table contextual stats [ML] [Accessibility] Suggestion: Job Management List Table "expand/collapse" button could read table contextual stats #18435 (fixed in 6.5)
• [Accessibility] Machine Learning New Job: Info tooltips are not read by screen reader LINK REDACTED
• [Accessibility] Machine Learning Job Creation Needs Real Time Feedback [ML] [Accessibility] Machine Learning Job Creation Needs Real Time Feedback #18437 (fixed in 6.5)

Create Job pages

• Add Headings, see: Accessibility: Headings #11519
• Make wizard job type icons keyboard accessible
• Associate wizard job type labels with form controls, or remove <label> element, see: Accessibility: Associate form fields with labels #11837
• Add aria-labelledby attributes to 'select index' and 'select saved search filter fields' (Kibana directives paginated-selectable-list and saved-object-finder)
• Associate all form controls with labels, see Accessibility: Associate form fields with labels #11837
• Add aria-invalid="true"to invalid form fields e.g. blank job name field, see: Accessibility: Input states #11523
• 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

• Fix tab order of run search and Estimate Bucket span button
• Add aria-label to run search button (fixed in 6.4)
• Add focus indicator to Advanced expand arrow
• 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

• Add focus indicator to Advanced expand arrow
• 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
• Add/edit detector modal - make function field, Help link, Add and Cancels buttons keyboard accessible
• Add detector modal - function and field select lists do not scroll as navigating down options with Arrow key
• Add detector modal - make 'delete' icon in function and field select inputs keyboard accessible
• 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

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

Anomalies table

• Make options in Interval and Severity dropdowns keyboard accessible
• Associate the interval and severity form controls with labels, see Accessibility: Associate form fields with labels #11837
• Blank header for expand column in EUI anomalies table should be a <td> not a <th> (fixed in 6.4)

Anomaly Explorer

• Add Headings, see: Accessibility: Headings #11519 11851 a11y discover field chooser headers (rebased version) #12211
• Make options in View by dropdown keyboard accessible
• Make swimlane component and swimlane selection keyboard accessible
• Make 'View' links on anomaly charts keyboard accessible (fixed in 6.5)
• Associate the view by form control with a label, see Accessibility: Associate form fields with labels #11837
• [Accessibility] Anomaly Explorer "job" dropdown requires proper aria-labeling LINK REDACTED
• [Accessibility] Anomaly Explorer "Job" Popup check all checkbox needs proper labeling LINK REDACTED

Single Metric Viewer

• Add Headings, see: Accessibility: Headings #11519 11851 a11y discover field chooser headers (rebased version) #12211
• Add aria-label to 'refresh dashboard' button
• Make chart zoom interval links keyboard accessible
• Make chart brush keyboard accessible
• Associate the detector, and entity form controls with labels, see Accessibility: Associate form fields with labels #11837

Longer term issues

• Add 'spy' panel to Create Single Metric job wizard chart (see [ML] Add support for "Inspect" flyout for ML UIs #46155)
• Add 'spy' panel to Create Multi Metric job wizard charts (see [ML] Add support for "Inspect" flyout for ML UIs #46155)
• Add 'spy' functionality to Anomaly Explorer swimlane (see [ML] Add support for "Inspect" flyout for ML UIs #46155)
• Add 'spy' functionality to Anomaly Explorer anomaly charts (see [ML] Add support for "Inspect" flyout for ML UIs #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

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

[elasticmachine]

Original comment by @cjcenizal:

Awesome work on this @peteharverson!

[rayafratkina]

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

[rayafratkina]

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]

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.