辅助功能 按钮和链接

原因

按钮和链接是特定类型的交互组件。它们各自与辅助技术的交互方式不同。正确使用每个组件有助于使用辅助技术的用户与组件进行交互。

内容

方法

在简介中，我们看到视觉设计并不能决定我们应该使用哪个 HTML 元素。一个看起来像按钮但行为像链接的链接是 <a>。

“按钮”注册成为司机和下面的链接都编码为 <a>。那么，我们什么时候应该使用 <button> 呢？

让我们仔细看看Uber 网站。标题的第一部分有五个元素——一个徽标、一个下拉菜单和三个链接。其中一个被编码为 <button>。

点击公司会打开一个下拉菜单。这是一个在当前页面上执行操作的交互。在此处使用 <button> 是正确的做法。底层的链接，例如关于我们、我们的产品等等，都使用 <a> 元素正确编码。

箭头表示这是一个带有下拉菜单的按钮，在打开时会改变方向。这是一个很好的额外的视觉提示。

这样做的一个好处是，语义 HTML 为屏幕阅读器提供了上下文，屏幕阅读器会大声朗读页面的内容。您将在模块 7 中关于辅助技术的屏幕阅读器中了解更多信息。

在这种情况下，<div> 是错误的。为什么？

• 按钮默认具有更合适的样式。
• 屏幕阅读器将其识别为按钮。
• 它是可聚焦的。
• 它是可点击的。

链接和按钮都可供依赖键盘导航的人使用；它可以用鼠标和键盘点击，并且可以使用键盘上的 Tab 键在它们之间切换。

现在您知道何时使用 <button> 以及何时使用 <a> 了。您还应该注意什么？

正确的链接

链接将用户从一个页面带到另一个页面，或者有时带到页面的另一部分。要使链接可访问，请记住

• 使用 href 属性指定链接目标。
• 在 href 属性中使用正确的 URL。URL 可以是绝对的或相对的。https://uber.com/about 是一个绝对 URL。/about 是一个相对 URL。
• 不要使用其他元素（如 <span> 或 <div>）模拟链接。
• 在当前窗口中打开链接。不建议在新窗口中打开链接。

Uber 示例中的关于我们链接的编码如下，稍作简化

这是一个正确且健康的链接。