Carbon: Data Table with Checkbox column example needs accessibility improvements

[alisonjoseph]

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)

2. 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">

3. 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

[joshblack]

Do we want to bring in the React version as the example? I believe it could help out with a couple of these as-is.

[carmacleod]

For point 4, the DAP folks say that the best way to label a checkbox in a table is to use aria-labelledby to point to the checkbox's column header's id.

They also say that an empty label element, such as <label for="some-id"></label> is not valid.

So just delete the label element for each checkbox input, and instead use aria-labelledby="table-name-checkbox-column-header" to point to the <th scope="col" id="table-name-checkbox-column-header">.

[zvonimirfras]

First of the DAP issues _"Each form control must have an associated label."_ can be fixed by providing aria-label on the input. That's the approach we're taking on angular side until something better comes along.

[alon24]

@carmacleod - your solution did not work for me because when using carbon the label is incharge of painting the checkbox box, and so when deleting it, I loose the checkbox.
anyway for the carbon team to fix this?

I am now going to just ignore this in the project, since I do not see a solution here for this.
Also I do not want to start painting the checkbox myself (because I use carbon), as you suggested in
http://w3c.github.io/aria-practices/examples/checkbox/checkbox-1/checkbox-1.html

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[GabrieleBarboni]

still needed

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[carmacleod]

ping

[GabrieleBarboni]

Still needed