辅助功能链接

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

Austin Gil 已启动了一个关于“正确使用 HTML 表单”的五部分系列的 第一个,并从语义开始。 它在与“我们使用 JavaScript 构建前端”的群体对话。 第一段代码是 Ajax 表单提交的示例,其中提交的数据是通过 JavaScript API FormData 收集的。

为什么这如此重要? 好吧,没有 <form> 标签,就没有 FormData。 为什么还要使用表单(除了 Enter 键提交之外)

“但是 Austin,我正在构建一个 SPA。 因此,如果用户看到表单,就意味着必须启用 JavaScript。” 你是正确的。 尽管如此,如果这是一个重要的表单,您可能需要考虑支持无 JS 环境。 您可能有一天想要实现 SSR。

服务器端渲染 (SSR) 将变得越来越容易,因为它带来的益处越来越明显。 Google 告诉我们,客户端渲染的页面在索引和更改后重新索引时,需要排队数周。 更不用说 SSR 的加载速度几乎肯定会快得多。


Oscar Braunert 的 包含式输入 是一篇很好的后续阅读,因为它从表单 HTML 开始,它非常接近正确,但痛苦的是正确。(提示:它缺少标签/输入连接)。 然后他深入探讨了一些有趣的模式,例如如何以无障碍的方式标记必填字段和错误字段。 像

<div class="form-group">
  <label for="password">
    Password
    <span class="required" aria-hidden="true">*</span>
    <span class="sr-only">required</span>
  </label>
  <input 
    type="password"
    id="password"
    name="password"
    aria-describedby="desc_pw"
  >
  <p class="aside" id="desc_pw">Your password needs to have at least eight characters.</p>
</div>

Amber Wilson 深入探讨了 无障碍 HTML 元素,并避免使用任何 ARIA。

您可能知道 ARIA 角色通常与 HTML 元素一起使用。 我在这里没有写过关于它们的信息,因为看到没有 ARIA 的 HTML 仍然可以无障碍访问是件好事。

<dl> 致敬。


Sarah Higley 确实角色和关系 中讨论了 ARIA,但她警告我们必须从一开始就非常小心

[…] 一位正在成长的无障碍从业者可能会发现自己正在尝试使用更严肃的角色,如 menulistbox,甚至 treegrid。 这些是诱人的、强大的模式,允许您创建仅使用普通 HTML 不支持的体验。 不幸的是,它们也很脆弱;即使在使用这些角色时犯的小错误也会让用户体验非常糟糕。

在为时已晚之前,与您的孩子谈谈 ARIA。

理想情况下,根本不要使用 ARIA。 但是,如果无障碍性被破坏到无法在 DOM 级别修复的程度,Sarah 会提供一些技巧。 例如,其中一个使用 role="presentation" 本质上删除元素的默认角色(当它妨碍时)。


说到 ARIA 以及仅在必要时使用它,您可以使用 ARIA 做的一件事是标记控件。 Adrian Roselli 对 如何最好地做到这一点 有自己的想法

以下是我为控件分配 无障碍名称 时遵循的优先级

1. 原生 HTML 技术
2. aria-labelledby 指向现有的可见文本
3. 仍然在页面中的可见隐藏内容
4. aria-label