How do I make color information in HTML tables accessible?

user_5194374 0
Viewed 325

What is the best practice for making information normally displayed as the background color of a cell accessible (for screen readers and such)?

This is an example of my table (with names and numbers changed to protect the innocent):

table with green, red, and yellow cells

The table contains temperatures. Yellow and red backgrounds indicate the results of screenings. My real table is very large and making it information-dense is a high priority, so I don't want to just put the results of the screening in the cell as text as it would make my columns much wider. Ideally, I would put an alt-text of some sort on the yellow and red cells with something like "positive test result" or "failed screening". Is there a way to do this in an HTML table?

I thought maybe title would be the right attribute here, but the internet says that is wrong.

accessibility html
1 Answers

Short answer

If the color brings a real information, like telling if it succeeded (green) or failed (red), the best is to write it plain text next to the value. Alternatively, you can use an icon with proper markup.

Longer answer

The general rule as stated in WCAG is don't convey information only with colors, basicly meaning you must add something else other than just colors to allow everyone to get the information.

You can add anything you like, i.e. text or icon. It's fine as long as there is another way than just color to get the information.

You may be tempted to write the information in plain text but make it visible only for screen reader users, as follows:

<td>123<span class="sr_only"> Success</span></td>
<td>-45<span class="sr_only">Failed</span></td>

Or alternatively, use aria-label with these additional warnings:

  1. aria-label is guaranteed to be taken into account only if the element is interactive. By default a table cell isn't interactive.
  2. The aria-label attribute entirely replaces the content of the cell. So you must write <td aria-label="123, success">123</td> and not <td aria-label="success">123</td> because in that later case the screen reader user won't get the value.

However, both are in fact bad ideas, and don't fully conform to the WCAG rule stated above. For example, color blind people can see the screen and so don't need a screen reader, but may not be able to make the difference between red and green. Thus the data wouldn't be accessible to them.

The fixed scale case

IF your colors express some scale, i.e. green is good, yellow is acceptable and red is bad, and if the color depends on fixed values, i.e. green above 60, yellow between 40 and 60 and red below 40, then in fact the color doesn't bring any new information. It is just a visual indication so that you can quickly see what is good and what is bad. IF you remove the colors, you certainly lose some ease, but the information is still there in the value itself.

IN this case, it can quickly become uselessly noisy to add a text saying "good", "acceptable" or "bad" in each cell, since as long as you remember the scale, the value itself tells you if it's good or bad.

OF course you will explain clearly and in plain text the meaning of the colors, probably above or below the table, and make the information visible for all users.

user_19712160
Related