2012-03-15 4 views
1

Я читал, что это плохая практика для стильного контента на основе атрибутов данных HTML5.Стилирование контента на основе атрибутов данных 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 и настраиваемыми атрибутами для стиля вещей, основанных на контенте, чтобы наши «настоящие» классы стали более универсальными для обработки чистого стиля, не основанного на контенте.

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

Спасибо!

ответ

0

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

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

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

Смежные вопросы