software

实践中的可访问性

发布: (2025年12月30日 GMT+8 09:38)
6 min read
原文: Dev.to

Source: Dev.to

数字无障碍远不止遵守技术规范。
它涉及让人们参与进来，确保自主性，并使所有人都能公平地浏览、交互和消费内容。

在本文中，我分享了关于前端开发中无障碍的实用概念——从语义化 HTML 到有意识地使用ARIA以及必备工具。

开发者在构建可访问界面方面扮演着关键角色。
我们有责任确保数字产品能够被所有人使用，包括视觉、运动、听觉或认知障碍的用户。

📌 可访问性涉及

  • 代码的最佳实践
  • 使用诸如 WCAG 和 ARIA 等标准
  • 从开发初期就关注

在巴西，数字可访问性是一项法律保障的权利。
在代码中包容，就是在世界中包容。

🛠️ ARIA (Accessible Rich Internet Applications)

W3C 规范，提供属性以使动态组件更易访问。
它使辅助技术能够了解：

  • 元素的 角色
  • 它的 状态
  • 它的 属性

对于拥有大量自定义组件的现代界面至关重要。

Documentação oficial

📚 信息呈现原则

原则示例
可感知 – 信息应以所有人都能感知的方式呈现。为图像添加替代文本。
可操作 – 界面应可供任何用户使用。允许通过键盘完成全部导航。
可理解 – 内容应易于理解。表单提供清晰的说明和简明的信息。
健壮 – 代码应兼容辅助技术。正确使用语义化 HTML 和 ARIA。

🔧 分析工具

axe DevTools

  1. 在 Chrome 或 Firefox 上安装扩展。
  2. 打开 DevTools。
  3. 前往 axe DevTools 选项卡。
  4. 点击 Scan。
  5. 分析问题和建议。

NVDA (NV Access)

  • 用于测试盲人用户体验的必备工具。
  • 小贴士：按 INSERT + S 切换朗读模式。
  • 官方网站：

Source: …

🏷️ HTML 语义化（避免对所有内容使用 和）

Tag描述
“表示页面或章节的页眉（标志、标题、导航）。可以有多个，只要每个都有不同的语境。
“主要或次要的导航块。仅用于表示站点或某个章节导航的链接集合。
“包含页面的主要内容。应唯一且不包括重复的内容（如菜单、页脚）。
“将相关内容在更大的主题内进行分组。应有一个描述其目的的标题。
“补充或次要内容（侧边栏、广告、附加信息）。
“页面或章节的页脚（机构信息、版权、辅助链接）。
“可以独立存在的内容，脱离页面使用（帖子、卡片、新闻、产品）。

标题层级（→）

  • 有助于 屏幕阅读器的导航、内容的理解 与 视觉/语义的组织。
  • 除非必要，切勿跳过层级。

📄 语义结构示例

可用课程

前端课程

Angular 与可访问性

学习使用 Angular 创建可访问的应用程序。

React 与 WCAG 实践

将可访问性最佳实践应用于 React。

后端课程

可访问的 REST API

如何在考虑可访问性的前提下记录和构建 API。


---

## 🖼️ `alt` 在图像中

属性 **`alt`** 为无法看到图像的人描述图像。

```html
[Image: Pizza de pepperoni com queijo derretido e bordas crocantes]

📢 ARIA 使用示例

可访问名称（当没有可见文本时）


  ✕

✔ 屏幕阅读器能够正确朗读。

使用现有元素的标签（优于 aria-label）


## 用户资料

  ...


### 额外描述（帮助或错误）

```html
  Insira um e‑mail válido

📢 屏幕阅读器：“编辑字段，请输入有效的电子邮件”。

仅对屏幕阅读器隐藏内容

★

✔ 用于装饰性图标。

为元素定义语义功能


  - ...

指示打开/关闭状态


  Menu

  ...

✔ 指示打开/关闭状态。

已选项


  Opção 1

禁用按钮（仍可获得焦点）


  Enviar

⚠️ 仍可获得焦点——在可能时也使用 disabled 进行处理。

📌 结论

可访问性不是“额外的”；它是 开发的组成部分。
通过采用 语义化 HTML、正确使用 ARIA 并使用 测试工具，我们确保我们的数字产品真正具有包容性。

在代码中包含，就是在世界中包含。

模拟盲人用户的体验

👉 简单而强大的练习
打开你自己的实现 没有无障碍设置。

  1. 启动 NVDA
  2. 闭上眼睛
  3. 尝试仅使用键盘和屏幕阅读器进行导航

无障碍不是视觉细节，而是完整的体验。

非常感谢！

LinkedIn – Gabriel Luiz

Back to Blog

相关文章

阅读更多 »