Tables, coloured cells and WCAG

[juliemercier]

I posted this in the wrong section about a year ago and now finally found the time to post here. To see the discussion, please see : https://github.com/wet-boew/wet-boew/issues/7590

The coloured cells section of the tables page does not meet WCAG 1.41. Use of color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) . Additional information needs to be added to coloured table cells to indicate the meaning of the colour to screen reader users . I want to use the

to represent protected data (in a protected environment) and need to add Protected B data in the cell preceding the protected data value. Perhaps a reminder not to use the coloured cells without an indicator for screen readers could be included in the documentation? Would a visual element need to be added for colour-blind users? If a colour-blind user cannot distinguish between the red background and a green background, then would there not need to be another visual cue or very specific text to differentiate one from the other?

The style guide could state: In order to meet WCAG 1.4.1 Use of color when using coloured cells, remember to provide screen reader users and colour-blind users with additional cues as to the meaning of the colour.

[nschonni]

The section link in the other issue doesn't work anymore, is http://wet-boew.github.io/wet-boew-styleguide/v4/design/tables-en.html#colours what you're talking about? I don't think there is an issue with the Zebra ones, since they convey no meaning

[nschonni]

Ah, the only link makes more sense since it think it was taken directly from the Bootstrap 3 docs https://getbootstrap.com/docs/3.3/css/#tables-contextual-classes. They have added the following warning to that section now though

Conveying meaning to assistive technologies Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.