Global Accessibility Awareness Day, tools, hints, and guidelines, May 18, 2023

庆祝全球无障碍意识日

作者头像Schalk Neethling阅读时间:6分钟

互联网是一个全球性的社区,无障碍性就是要确保每个人都能参与其中。为了庆祝全球无障碍意识日 (GAAD),我们分享了一些提示,帮助您使您的网站对所有人更易访问。

检查网页内容无障碍指南 (WCAG)

确保您的内容在网络上可访问的标准成功标准和指南是网页内容无障碍指南。虽然理解并了解如何实施所有这些指南可能令人生畏,但还是有帮助的。以下三种方法可以访问、阅读和理解这些指南。

既然您已经了解了真相来源,让我们深入研究一些支持文档和工具。

检查 MDN Web Docs 上的“无障碍问题”部分

MDN Web Docs 上的多个页面包含一个部分,该部分描述了与您正在阅读的主题相关的无障碍问题。当您遇到这些部分时,务必花点时间阅读、理解并在需要时采取行动。让我们来看几个例子。

在 HTML multiple 属性 的参考页面上,“无障碍问题”部分重点介绍了一些使用该属性时需要牢记的关键细节,以便屏幕阅读器用户清楚地知道会发生什么。

tabindex 属性经常被误解和误用。属性的错误使用可能会破坏用户期望,甚至破坏使用键盘导航页面或表单的用户体验。此外,如果使用非交互式元素创作交互式元素,则它们将隐藏在无障碍树中。因此,务必阅读属性页面上的tabindex 属性无障碍问题部分。

如之前一篇关于地标角色的博客文章中所述,如果 HTML 已经有满足您需求的元素或属性,请使用它,而不是使用 ARIA 角色来操作不合适的元素。

CSS opacity 属性是另一个需要谨慎使用的属性,尤其是在涉及文本元素时。MDN Web Docs 网站上还有很多此类属性。请务必阅读这些内容,并在有任何不清楚的地方在 Discord 上寻求帮助。此外,MDN Web Docs 上的无障碍模块是进一步熟悉该主题的好方法。

检查网页的颜色对比度

低对比度仍然是网页上最大的问题之一,如最新的 WebAIM 百万报告中所述。这是WebAIM 的第五份年度报告,其中他们对全球前一百万个网站的主页进行了无障碍评估。自 2022 年以来,情况有所改善,但改善幅度不大。那么,您如何帮助改善这些统计数据呢?

有很多选择。首先,务必确保团队中的每个人都了解网页内容无障碍指南 (WCAG),特别是成功标准 1.4.3。MDN Web Docs 上还有一个页面更详细地介绍了颜色对比度

如果您的设计师使用 Figma 设计网站的页面、组件和布局,他们应该安装并使用颜色对比度插件。这样做将为您提供良好的开端,并在项目的未来阶段节省大量时间。如果设计工具没有插件或对测试颜色对比度的原生支持,则 Paciello 集团的开源颜色对比度分析器 (CCA) 工具是一个非常棒的工具,可以在 Windows 和 macOS 上的任何应用程序中使用。

当您在浏览器中测试网站时,您还有更多选择

如果没有内置的颜色对比度测试支持,则使用前面提到的 CCA 工具是您的首选。

观看 YouTube 上的颜色对比度审计

如果您想了解更多信息,请观看YouTube 上演示这些颜色对比度工具的视频

使用无障碍审计工具超越颜色对比度

网页无障碍性远不止颜色对比度。例如,为非纯装饰性图像添加替代文本。确保您的页面可供仅使用键盘的用户访问。在使用 ARIA 属性时,务必正确使用。如果不正确使用,它们可能会弊大于利。根据您网站或 Web 应用程序的复杂程度,您还可以做更多的事情来确保无障碍性。值得庆幸的是,一些自动化工具可以帮助我们识别和修复自动化可以检测到的常见问题。

第一个是来自 Google Chrome 团队的Lighthouse。Lighthouse 可以通过多种方式使用,例如从命令行、在Nodejs 中、作为持续集成管道的一部分或在您的浏览器(特别是基于 Chromium 的浏览器)中。标准的 Lighthouse 运行将测试的内容远不止无障碍性,但您可以禁用其他测试。

注意:务必了解,虽然自动化工具很有用,但使用屏幕阅读器进行测试或与真实用户互动是真正确保体验对所有想要使用您的网站或应用程序的人员都具有包容性的唯一方法。

默认情况下,Lighthouse 将启用所有审核

Screenshot of the Lighthouse tools in Chrome with all the different audit categories under the categories heading checked.

要仅运行无障碍审核,请确保取消选中所有其他类别

Screenshot of the Lighthouse tools in Chrome with only the accessibility audit checked under the categories heading.

除了 Lighthouse 之外,还可以使用浏览器扩展,或者在 Lighthouse 不是标准开发者功能的浏览器中填补空白。其中最广泛使用的是来自 Deque Labs 的Axe。其他一些流行的工具包括来自 WebAIM 的WAVE,以及其他视觉模拟器,例如NoCoffee 浏览器扩展、Firefox 中内置的视觉模拟器Safari 中的审计工具

观看 YouTube 上的自动化工具演示

如果您想了解更多信息,请观看YouTube 上演示这些自动化工具基础知识的视频

努力为所有人提供平等的访问

网络是连接人们的强大工具,但我们每个人在网络上构建内容都负有责任,确保我们创建的内容不会排除任何人。虽然有些人可能会争辩说,遇到挑战的人只占其网站或应用程序用户的一小部分,但我们希望您考虑一下无障碍坡道效应。这种效应的简短描述是,为特定人群提供的便利设施通常最终会使整个社会受益。

顾名思义,这个想法源于在大多数街道上,尤其是在大城市中发现的无障碍坡道。虽然最初是在二战后引入的,目的是为了适应从战争中返回后发现城市街道无法通行退伍军人轮椅使用者,但它现在已成为世界许多地方的普遍现象。这也不是偶然发生的,而是需要很多人挺身而出,为他们的平等获取权利而斗争。

每次有人需要将装满货物的推车推上路缘,或者父母想带着婴儿车过马路,或者有人想在火车站或机场拖着沉重的行李而无需将其抬上路缘时;他们都在体验着无障碍坡道效应。

因此,不仅这样做是正确的,而且您的公司还可以避免法律诉讼,这既昂贵又会损害品牌形象。最终,您今天做出的便利设施和投入的资源可能会在明天惠及更广泛的社会群体,甚至可能惠及您自己。

总结

我们很高兴与您一起庆祝全球无障碍意识日,我们希望您能加入我们,共同开展这项重要工作。我们知道,想到您的网站可能存在哪些无障碍方面的问题可能会令人望而生畏,但我们也知道,通过采取一些小措施并使用本文中分享的工具和指南,您将走上正确的道路。

关注 MDN 最新资讯

订阅 MDN 电子邮件简报,不错过任何关于最新 Web 开发趋势、技巧和最佳实践的更新。