后端开发教程 - Java、Spring Boot 实战 - msg200.com
3 个 CSS 技巧来发现可访问性问题
我最近读了 Devon Campbell 的一篇很棒的文章，它再次提醒我构建一个同时可访问的优秀网站是多么重要！
这让我想分享一些我时不时添加到项目中的 CSS 代码。这是一种快速简便的方法，可以查看我的标记中是否存在可访问性问题。我可以想象，我们大多数人并没有花足够的时间来改进他们的 Web 项目的可访问性——但如果我能清晰地可视化那些难以访问的元素（例如，对于依赖屏幕阅读器的用户来说），我就会更有动力去修复所有可访问性缺陷。
1. 缺少 HTML 语言属性
根据 W3C 的说法，在标签上使用lang属性<html>被认为是最佳实践（这也是现在仍然使用标签的唯一原因，<html>因为它是可选的）。他们指出，这“对于可访问性和搜索等应用非常重要”。因此，如果您有很多静态 HTML 页面，那么在 CSS 中添加以下代码可能会很有帮助，无论页面是否设置了语言属性，都可以使用红色顶部边框进行显示：
html:not([lang]),
html[lang=""] {
border-top: 20px solid red;
}
请注意，这里还有一个xml:lang可以考虑的属性。
2. 缺少图片替代文本
这是许多网站上一个主要的可访问性问题。<img />除非有文字描述，否则屏幕阅读器无法猜测其内容。以下 CSS 代码用于突出显示所有带有红色边框且没有属性或alt属性为空的图像：
img:not([alt]),
img[alt=""] {
border: 5px dashed red;
}
请注意，属性为空的图像元素alt通常用于与内容无关、纯装饰性的图像。如果您使用此类图像，请随意修改上述 CSS。
3. 画布缺少角色和 aria 标签
该<canvas>元素如今已被广泛用于各种用途。例如，您可以使用Chart.js在其上绘制甜甜圈图，模拟可撕裂的布料或演示重力。与图像一样，如果没有适当的描述，屏幕阅读器就无法理解其中的含义。如果您还不了解：W3C 发布了一项技术规范，规定了如何提高网页的可访问性 - WAI-ARIA（Web 无障碍倡议 - 可访问的富互联网应用程序）。其中指定了许多aria-属性，例如，对于画布，其属性role和aria-label将适用，例如：
<canvas role="img" aria-label="A doughnut chart showing A 51%, B 32% and C 17%"></canvas>
因此，当画布元素缺少这两个属性时，它们可以用红色边框标记，如下所示：
canvas:not([role]),
canvas:not([aria-label]),
canvas[role=""],
canvas[aria-label=""] {
border: 5px dashed red;
}
亲自尝试一下
您可以在下面的 Pen 中尝试上述 CSS 规则：
注意，Codepen 中不会出现顶部的红色边框，因为该属性是自动设置的。你可以在这个 fiddlelang中看到效果。
总结
因此，只需一点 CSS，您就可以快速发现标记中的问题，这些问题使得您的网站对于有限制的人来说不太可用。
这些 CSS 规则仅作为视觉辅助工具，用于检测与可访问性相关的缺失属性。当然，您可以而且应该使用 IDE 或外部工具来检查网站的可访问性！
并且（这应该是显而易见的，但我宁愿再说一遍）：请仅在开发中使用这些 CSS 规则！
偷偷地把它插入到朋友或同事的项目中也很有趣😄这绝对是吸引他们注意可访问性的一种方式！为了方便起见，我为你简化了上面的示例：
html:not([lang]),html[lang=""] { border-top: 20px solid red; }
img:not([alt]),img[alt=""] { border: 5px dashed red; }
canvas:not([role]),canvas:not([aria-label]),canvas[role=""],canvas[aria-label=""] { border: 5px dashed red; }
别客气！如果您还有其他关于 CSS 可视化无障碍问题的建议，欢迎在评论区留言！
发布日期：2019年11月5日
文章来源：https://dev.to/devmount/3-css-tricks-to-uncover-accessibility-issues-4fo8