Стилизация контента на основе атрибутов данных HTML5

Я читал, что не рекомендуется стилизовать контент на основе атрибутов data-* HTML5.

Цитата с html5doctor.com:

Наличие/отсутствие определенного атрибута данных не должно использоваться в качестве зацепки CSS для любого стиля. Это будет означать, что данные, которые вы храните, имеют непосредственное значение для пользователя и должны быть размечены более семантическим и доступным способом.

Может ли кто-нибудь пролить свет на это утверждение или привести несколько примеров того, почему это может негативно повлиять на работу пользователя?

В качестве действительно простого примера, скажем, я использую data-attribute-error="404" для элементов, чтобы дать обратную связь скрипту, вместо того, чтобы также добавлять классы error-404, error-500 и т. д. для каждого элемента для некоторого дополнительного стиля, не мог бы я просто стилизовать их так :

.error { color: red; }
.error[data-attribute-error]:after { content: attr(data-attribute-error); }
.error[data-attribute-error=404] { color: grey; }
.error[data-attribute-error=404]:after { color: red; }
/* etc */

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

Кажется, было бы много интересных вещей, которые мы могли бы сделать с помощью CSS3 и пользовательских атрибутов для стилизации вещей на основе контента, сохраняя наши «настоящие» классы более общими для обработки чистого стиля, который не основан на содержании.

Является ли это просто общим правилом, которым можно пренебречь в определенных ситуациях, или это ужасный грех на стороне клиента?

Спасибо!


person Adam    schedule 15.03.2012    source источник


Ответы (1)


По сути, они предполагают, что если сообщение об ошибке, статус или номер достаточно важны для представления пользователям, то они должны быть представлены в доступной форме. В Руководстве WCAG 1.4.1 говорится:

Использование цвета. Цвет не используется в качестве единственного визуального средства передачи информации, указания на действие, побуждения к ответу или выделения визуального элемента. (Уровень А)

Следует также отметить, что содержимое, созданное с помощью CSS, недоступно для программ чтения с экрана и других вспомогательных технологий.

person robertc    schedule 16.03.2012