无障碍设施是首要任务

2025-06-07

无障碍设施是首要任务

Web 无障碍旨在为所有人（包括残障人士）提供访问 Web 内容和服务的有效途径，无论他们使用何种设备。在本文中，我们将探讨 Web 无障碍的重要性、当前存在的问题以及如何改进网站，使其更易于访问。

一些数据

根据世界卫生组织的数据，全球约有 15% 的人口患有某种形式的残疾- 残疾与健康

根据Deque Systems 委托开展的一项研究， 70% 的网页内容无法供盲人用户访问

必须意识到以下几点：不让您的网站内容和服务无障碍，就意味着失去成千上万的用户，也意味着成千上万的用户无法访问那些本应向所有人开放的服务（公共行政、医疗、新闻等）。
此外
，我们正处于一个危机时期，沟通和信息主要通过互联网进行。打造最佳体验，让每个人都能访问这些信息至关重要。

免责声明

这是一篇关于无障碍设计的介绍。需要注意的是，提升网站无障碍性有很多方法。我不可能列出所有与此主题相关的实践，但我会提供一些示例、快速入门指南、资源以及一些扩展的快速预览。

实践​

为非文本或非音频内容提供上下文信息

对于图像，您可能熟悉alt旨在提供文本替代的 HTML 属性，这对于无法看到图像本身的人非常有用。
对于
多媒体内容（例如音频或视频内容），提供文本转录或字幕等替代支持是解决可访问性问题的一种方法。

让你的内容易于理解

有些视觉呈现对某些人来说显而易见，但对另一些人来说却可能很麻烦，尤其是文字和颜色。在网站上显示文本时，需要考虑很多方面：字体大小、单词/字母的数量、文本位置、粗体和斜体的使用等等。

它们都会影响内容理解，尤其是对于患有阅读障碍（占人口的 5% 到 10%）和视力障碍的人来说。调整文本大小不仅对残障人士有帮助，也对希望在页面上显示更多内容的用户有帮助。修复网页可读性的一个快速方法是使用相对大小单位（rem或em），而不是绝对大小单位（px或pt）。

下面是放大和缩小网页时使用 PX 和 REM 单位的区别示例。

放大和缩小以查看 PX 和 REM 单位之间的差异

颜色也是如此。文本颜色和背景颜色之间的对比度对于色盲和有视觉障碍的人来说是一个值得关注的问题。

以下是文本与背景颜色对比度不佳的示例。为了自动测试网站的可访问性，我使用了Wave 评估工具扩展程序。以下是我在包含不良颜色对比度的网页上启用 Wave 后得到的结果。 为了解决这个问题，我个人喜欢使用Color a11y网站。在“颜色对对比度测试”部分，您可以粘贴这两种颜色并查看结果。 现在您可以修复颜色对比度问题了。在这个例子中，我将蓝色改为了深蓝色。 一些与阅读障碍和色觉障碍相关的有趣文章：按钮文本颜色和背景按钮颜色之间的颜色对比度差
色彩对比测试失败：浅蓝色背景和白色前景
成功色彩对比测试：深蓝色背景和白色前景

让您的网站可以通过键盘使用

尝试仅使用键盘来使用你的网站（包括各部分之间的导航、菜单导航、表单导航、行动号召等）。如果操作起来很麻烦，那么解决问题就很重要。

一些基本的例子

在下面的示例中，用户无法访问任何操作按钮。这是由于 HTML 语义无效造成的。这些按钮实际上是可点击的div，而且看起来像按钮：我们遇到了问题。

表格上的键盘导航不佳：无法访问按钮

在另一个例子中，用户可以访问按钮，但导航顺序不太方便。要访问操作按钮，用户必须先跳过所有表格行。
表格上的键盘导航很差：导航顺序不被尊重

键盘导航顺序必须合乎逻辑且直观。Tab 键顺序应遵循页面的视觉流程：从左到右，从上到下——首先是页眉，然后是主导航，然后是页面导航（如果有），最后是页脚。
为了验证网站的键盘导航顺序，我喜欢使用Accessibility Insights for Web扩展程序。然后，我启用“Tabs Stops”切换按钮并开始导航。这将允许跟踪导航顺序并将其绘制在屏幕上。
使用 Accessibility Insights for Web 跟踪键盘导航

有很多技巧可以修复使用键盘导航的问题，例如：

  • 使用语义 HTML 而不是div仅仅
  • 尊重标题层次结构（h1至h6）
  • 确保交互元素具有可见的焦点样式（不要删除焦点轮廓！）
  • 删除不可见的可聚焦元素

屏幕阅读器

审核网站可访问性状态的另一种方法是像视力障碍的用户一样操作。例如，启动屏幕阅读器，闭上眼睛，在使用键盘导航时聆听语音。

在此示例中，我使用了 Mac OSX 原生的屏幕阅读器Voice Over。图中，我多次按下 Tab 键，以便选中每行末尾的操作按钮。但出现了一个问题：当屏幕阅读器聚焦到某个操作按钮上时，它会显示“按钮”。

表格列表上的屏幕阅读器：没有标签的按钮

你可能已经想到了，这些信息对用户没什么帮助。这是因为我使用了以下 HTML 结构： 

<button>
  <SvgIcon />
</button>
Enter fullscreen mode Exit fullscreen mode

那么，屏幕阅读器应该说什么呢？我没有提供任何有意义的信息。
解决这个问题的一个简单方法是使用aria-labelHTML 属性：

<button aria-label="Edit John Doe">
  <SvgIcon />
</button>
Enter fullscreen mode Exit fullscreen mode

让我们看看它与屏幕阅读器的表现如何

表格列表上的屏幕阅读器：带有 aria-label 的按钮

现在，屏幕阅读器显示“编辑 John Doe”和“删除 John Doe”。
我强烈建议你查看a11y 项目清单。这里有一些指南可供参考，让你的网站更容易访问。

一些有用的工具

文章来源：https://dev.to/hichamelbsi/accessibility-is-a-priority-3jbf
Devto 翻译
PREV
Ethers.js 备忘单
NEXT
如何更改 Git 仓库的根文件夹