可能损害可访问性的 CSS 实践

CSS 已经成为一种无所不能的语言。 最初作为向文本和其他设计元素添加基本样式的一种方式，现在功能更多。

我们可以用它来制作几乎任何可以想象到的布局。 过去需要 JavaScript 或浏览器插件的特殊效果和交互性现在得到原生支持。 该语言已经从一种基本工具变成了每个网站背后的基础技术之一。

但与任何强大的工具一样，CSS 也会产生意想不到的副作用。 可访问性是最受关注的领域之一。 有些实现确实弊大于利。

考虑到这一点，让我们看看一些可能会损害可访问性的 CSS 做法。 它们包括在开始编写代码之前需要仔细考虑的常见功能。 让我们开始吧！

使用content属性显示重要文本

CSS content属性提供了一种巧妙的方式来为元素添加视觉增强功能。 例如，您可以将它与伪元素结合使用，在一段文本或列表项之前添加一个图标。 它还可以显示图像或文本字符串。

但最后一个可能特别麻烦。 通过content属性添加的文本不包含在文档对象模型 (DOM) 中。 这意味着屏幕阅读器等辅助技术可能无法识别它。

这适用于纯装饰物品。 但是，如果文本为页面提供了重要的上下文，则可能会导致可访问性问题。 用户可能会错过重要信息。

因此，最好避免使用content属性来显示文本。 除非您确信它不会干扰用户理解页面的能力。

创建强烈闪烁的动画序列

动画是 CSS 取得重大发展的领域。 曾经属于第三方库领域的效果现在可以相对轻松地制作。 由于它们本身就受支持，因此它们可以利用硬件加速等功能来提高性能。

基本的过渡和变换可以创造奇迹，营造一种氛围并吸引用户的注意力。 并且还可以借助 JavaScript 构建令人难以置信的逼真效果。

但某些动画风格可能会产生负面影响。 对于一些用户来说，过多的移动可能会让人迷失方向——或者更糟。 强烈的闪光或频闪效应会导致癫痫发作。 这在网络上是可能的——就像在电影、电视节目和视频游戏中一样。

WCAG 2.0 提供了一些研究支持的指导，用于创建不会引发癫痫发作或其他不良反应的动画。 例如，建议将演示文稿设置为每秒闪烁不超过 3 次，同时保持较小的尺寸并避免使用红色。

值得庆幸的是，这并不限制我们用动作给用户留下深刻印象的能力。 仍有很多机会可以改进我们的工作。 但是必须仔细检查所使用的动画类型及其潜在影响。

交互元素上不直观的:hover或:focus状态

CSS 擅长样式化交互元素。 考虑一下超链接和表单字段等日常用品的可能性。 与默认外观相比，它们可以定制到无法识别的程度。

这一切都很好。 但考虑当用户与元素交互时会发生什么也很重要。 想象一下，单击一个不提供任何视觉提示的按钮来确认发生了什么。 或者使用键盘在不突出显示当前链接的菜单中切换。

它们可能很简单，但这些微交互有助于为用户提供上下文。 确认按钮点击或了解您的光标所关注的菜单项只是两个示例。 当访问者浏览网站时，每一个都会带来自信感。

交互元素的初始样式只是成功的一半。 为:hover和:focus伪类提供直观的样式来完善用户体验。

值得注意的是，这些风格应该很容易被察觉。 实际上，这意味着不仅仅使用颜色作为指标。 添加动画、轮廓或图标有助于确保没有人被遗漏。

将无障碍设计的基础知识视为理所当然

我们都去过那里。 项目截止日期即将到来，您需要完成任务。 在发布竞赛中，一些与辅助功能相关的项目可能会漏掉。

通常是无障碍设计的基础知识被抛在了后面。 那些设计师可能认为理所当然并假设的 CSS 实践已经达到标准。

主要示例包括基本要素，例如清晰的排版和可接受的颜色对比度。 如果不考虑和测试这些项目，网站可能不像您想象的那样易于访问。

这就是为什么值得花一些额外的时间来审查您网站样式的更广泛方面。 即使某个项目通过了“眼球”检查，也要加倍努力进行审核。 您可能会惊讶于您会发现多少细微改进的机会。

这是关于负责任地使用 CSS

因为 CSS 是如此强大，所以很容易被它所提供的可能性所吸引。 既然可以制作电影般的东西，为什么还要满足于基本动画呢？ 我们怎么能不喜欢使用它来生成内容的便利呢？

这一切都归结为同理心和责任感。 与任何工具一样，CSS 可以做很多事情。 但仅仅因为我们可以实现特定功能并不意味着它适合辅助功能。 我们生活在一个世界上，各行各业的人都会消费我们建造的东西。 我们的工作是确保他们能够毫无障碍地这样做。

好的一面是，避免上述做法是每个人都可以做到的。 在大多数情况下，这是一个考虑我们所做事情的潜在影响的问题。 从那里，测试为我们提供了进一步完善事物所需的数据。

CSS 的存在是为了使可访问性更容易。 这完全取决于我们如何选择使用它。