[ML] (Accessibility) - Machine Learning - Overview page Multiple issues with Tables

[barlowm]

Multiple issues with Tables on Overview Page
(See also: #50992 )

Multiple tables on the page have similar captions (1.3.1 Info and Relationships - Level A)

Table captions are used to identify the purpose of a table so that users navigating directly through any tables on a page with assistive technology can identify the specific table they are looking at.

Anomaly Detection Table

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

Caption could/should be: Anomaly Detection Table of 4 items

Analytics Table

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

Caption could/should be: Analytics Table of 2 items

Both tables are also missing the scope attribute to associate header cells and data cells in tables
(1.3.1 Info and Relationships - Level A). (See: Using Scope Attributes). The tables have the scope="col" in the table header, but are not using the scope="row" in the individual table rows, which can assist users in navigating and identifying individual cells with the row and column they are examining with assistive technology. The tables are using the role="columnheader" which is also unnecessary:

role="columnheader"

A header cell that is the structural equivalent of the HTML element with a column scope. Unlike a plain cell, the columnheader role establishes a relationship between it and all cells in the corresponding column.

ARIA Roles

Additionally the ARIA status role is not appropriate for the caption element. It is intended for ARIA live regions such as a widget where the content is changed dynamically.

By the same token the aria-relevant="text" and aria-live="polite"should not be included either. Elements with the role status have an implicit aria-live value of polite and an implicit aria-atomic value of true.

Widget: alert, alertdialog, application, dialog, group, log, marquee, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, progressbar, separator, slider, spinbutton, status, tab, tablist, tabpanel, timer, toolbar, tooltip, tree, treegrid, treeitem

Kibana Version:
7.5.0 BC2

OS:
Windows

Browser:
Chrome

Screen reader: [if relevant]
N/A

Relevant WCAG Criteria: WCAG Quick Reference

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
Using role=status to present status messages

WAI-ARIA - Status Role

WAI-ARIA - Best Practice - Status

Widget: alert, alertdialog, application, dialog, group, log, marquee, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, progressbar, separator, slider, spinbutton, status, tab, tablist, tabpanel, timer, toolbar, tooltip, tree, treegrid, treeitem

[elasticmachine]

Pinging @elastic/ml-ui (:ml)