(Accessibility) Kibna Logs - Remove this column button does not announce the column

[barlowm]

Labels or instructions are provided when content requires user input.

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. Launch NVDA Screen Reader
2. Open the Logs page in the browser.
3. Click the "Configuration" button
4. Click the "Log Columns" tab
5. Navigate over each "trashcan" icon listening to the screenreader

Without additional information the screenreader user can not identify which column they are about to delete.

Recommend
Adding some additional information tpo the aria-label to identify the column:

<button class="euiButtonIcon euiButtonIcon--danger" 
type="button" 
aria-label="Remove this column"  <--- Remove 
data-test-subj="removeLogColumnButton" 
title="Remove this column"
>

Note that title is preferred over aria-label in these cases as the title provides a tooltip, aria-label does not.

Change To:

<button class="euiButtonIcon euiButtonIcon--danger" 
type="button" 
title="Remove this column: Timestamp"  <--- Add additional information
data-test-subj="removeLogColumnButton">

This way the screenreader user knows which column will be deleted.

Also the title is superflous and screen reader announces both aria-label and title

Since columns for "Fields have the same basic name plus the field. Both the column type (e.g. Field) and the field name should be included.

<button class="euiButtonIcon euiButtonIcon--danger" 
type="button" 
aria-label="Remove this column"  <--- Remove
data-test-subj="removeLogColumnButton" 
title="Remove this column"
>

Change To:

<button class="euiButtonIcon euiButtonIcon--danger" 
type="button" 
title="Remove this column: Field - extension" <--- Add additional information
data-test-subj="removeLogColumnButton" >

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
3.3.2 Labels or Instructions - Level A

Relevant ARIA spec: WAI-ARIA Authoring Practices 1.1
ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
ARIA6: Using aria-label to provide labels for objects
What is the difference between aria-label and title attributes?

[elasticmachine]

Pinging @elastic/infra-logs-ui

[Zacqary]

Announcing both the title and aria-label attributes seems to be a bug in NVDA; standard recommends using aria-label and title in conjunction with each other, and some screen readers don't even announce the title. Testing this on Mac VoiceOver announces just aria-label, for example.

Not sure how to proceed in light of that, but I'll try implementing the change to aria-label and keeping the title attribute as recommended by the standard, and we can decide.

[Zacqary]

Sorry I missed the recommendation that we just replace aria-label with title, should have read more carefully.