Data Table with Checkbox column example needs accessibility improvements

Copied from https://github.com/carbon-design-system/design-system-website/issues/286

@carmacleod

The Data Table with Checkbox column example needs a few improvements (some for accessibility, some are just invalid markup):

1. Download, Edit, and Settings buttons

• the <svg> element does not support the alt attribute, so for these 3 buttons, the alt="xxx" should just be deleted.
• the svg’s <title> is redundant with the aria-label and it is being read twice by some screen readers, so instead of aria-label, please use aria-labelledby to point to the id of the svg’s title element. Alternatively, you can delete the title element completely and use a custom tooltip instead of using title as the tooltip. If you do the latter (custom tooltips look nicer) then please use aria-labelledby to point to the id of the element containing the custom tooltip’s text.

1. Similar to the above, the Overflow buttons could use a tooltip to explain the “kebab icon” to users who can’t guess what it is for. 😃

• either with svg’s title element, and use aria-labelledby to point to the title element’s id
• or using a custom tooltip, and use aria-labelledby to point to the element containing the text
• (other overflow menu issues covered in #666)

1. The table header elements need scope="col" so that screen readers know that they are column headers, and not row headers, i.e.: <th scope="col">

2. The checkbox column

• has 2 different DAP violations for each checkbox: – Each form control must have associated label. (g41) – Provide descriptive text in label elements. (g1055)

• need to work with the DAP folks to figure out what the most accessible (and valid) markup is for form controls inside a data table

[GabrieleBarboni]

Still needed

[GabrieleBarboni]

still needed