1

我读过基于 HTML5 data-* 属性对内容进行样式设置是不好的做法。

引自 html5doctor.com：

特定数据属性的存在/不存在不应用作任何样式的 CSS 挂钩。这样做会表明您正在存储的数据对用户具有直接的重要性，并且应该以更具语义和可访问性的方式进行标记。

有人可以对此声明进行更多说明或举例说明为什么这可能会对用户体验产生负面影响吗？

作为一个非常基本的示例，假设我正在使用data-attribute-error="404"on 元素向脚本提供反馈，而不必在每个元素上添加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 和自定义属性来做很多很酷的事情，以根据内容设置样式，让我们的“真实”类更通用，以处理不基于内容的纯样式。

这只是在某些情况下可以忽略的一般准则，还是可怕的客户端罪过？

谢谢！

4

1 回答 1

0

基本上，他们的建议是，如果错误消息、状态或数字足够重要以呈现给用户，那么它应该以可访问的方式呈现。 WCAG 指南 1.4.1说：

颜色的使用：颜色不被用作传达信息、指示动作、提示响应或区分视觉元素的唯一视觉手段。（甲级）

另一件需要注意的是，由 CSS 创建的内容不适用于屏幕阅读器和其他辅助技术。

于 2012-03-16T00:47:57.697 回答