Как сделать доступной информацию о цвете в таблицах HTML?

Question

Как лучше всего сделать информацию, обычно отображаемую в качестве цвета фона ячейки, доступной (для программ чтения с экрана и т.п.)?

Это пример моей таблицы (с именами и номерами, измененными для защиты невиновный):

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 inte rnet говорит , то есть неправильно .

Answer 1

Краткий ответ

Если цвет несет реальную информацию, например, сообщает, удалось ли это (зеленый) или не удалось (красный), лучше всего написать это обычным текстом рядом со значением. В качестве альтернативы вы можете использовать значок с правильной разметкой.

Более длинный ответ

Общее правило, изложенное в WCAG: не передает информацию только с помощью цветов , что в основном означает вы должны добавить что-то еще, кроме цветов, чтобы каждый мог получить информацию.

Вы можете добавить что угодно, например текст или значок. Это нормально, если есть другой способ получить информацию, кроме цвета.

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

Или, альтернативно, используйте aria-label с этими дополнительными предупреждениями:

1. aria-label гарантированно будет учтена, только если элемент является интерактивным. По умолчанию ячейка таблицы не является интерактивной.
2. Атрибут aria-label полностью заменяет содержимое ячейки. Таким образом, вы должны писать <td aria-label="123, success">123</td>, а не <td aria-label="success">123</td>, потому что в этом более позднем случае пользователь программы чтения с экрана не получит значение.

Однако оба на самом деле плохие идеи и не полностью соответствуют изложенному выше правилу WCAG. Например, люди с дальтонизмом могут видеть экран и поэтому не нуждаются в программе чтения с экрана, но не могут различать красный и зеленый. Таким образом, данные не будут доступны для них.

Фиксированная шкала

ЕСЛИ ваши цвета express некоторая шкала, т.е. зеленый - хорошо, желтый - приемлемо, красный - плохой, и если цвет зависит от фиксированных значений, например, зеленый выше 60, желтый от 40 до 60 и красный ниже 40, то на самом деле цвет не несет никакой новой информации. Это просто визуальная индикация, позволяющая быстро увидеть, что хорошо, а что плохо. ЕСЛИ вы удалите цвета, вы определенно потеряете легкость, но информация все еще будет присутствовать в самом значении. "или" плохо "в каждой ячейке, поскольку, пока вы помните масштаб, само значение говорит вам, хорошо оно или плохо.

Конечно, вы объясните ясно и простым текстом значение цветов , возможно, над или под таблицей и сделайте информацию видимой для всех пользователей.