超越“块链接”的解决方案，提升屏幕阅读器用户体验

2024-01-13 05:50:39

在设计页面时，为了提升用户点击体验，会有扩大元素的可点击区域的需求——即我们看见的元素很小，但实际可响应的区域却是大的。比如，用一个标签包裹一大块内容，以达到点击这块区域的任何部分都会跳转，这就是我们所谓的“块链接”。功能上当然没问题，但却没有考虑屏幕阅读器使用者的体验。

屏幕阅读器是一种辅助技术，帮助有视力障碍的人士阅读和浏览数字内容。当屏幕阅读器遇到块链接时，它会一次读出整个块的内容，而不会区分可点击的区域和不可点击的区域。这对于视力障碍人士来说是非常混乱和令人沮丧的。

那么，有没有一种更好的方法来实现块链接的功能，同时兼顾屏幕阅读器用户体验呢？

当然有。我们可以使用一些ARIA属性来实现。

ARIA（Accessible Rich Internet Applications）是一套由W3C制定的技术规范，旨在帮助残障人士访问和使用网络内容。ARIA属性可以为网页元素提供额外的信息，帮助屏幕阅读器和其他辅助技术更好地理解这些元素。

在实现块链接时，我们可以使用以下ARIA属性：

aria-label：该属性可以为元素提供一个简短的。屏幕阅读器会读出这个，以帮助用户理解元素的功能。
aria-labelledby：该属性可以为元素指定一个ID，该ID对应于页面上另一个元素的ID。屏幕阅读器会读出被引用的元素的内容，以帮助用户理解元素的功能。
aria-describedby：该属性可以为元素指定一个ID，该ID对应于页面上另一个元素的ID。屏幕阅读器会读出被引用的元素的内容，以帮助用户理解元素的功能。

例如，我们可以使用以下代码来实现一个块链接：

<div role="link" aria-label="关于我们" tabindex="0">
  <div>关于我们</div>
</div>

这段代码中，我们使用了一个

元素来实现块链接。我们为该元素设置了 role="link" 属性，表示这是一个链接。我们还为该元素设置了 aria-label 属性，该属性的值为“关于我们”。这意味着屏幕阅读器会读出“关于我们”这个词，以帮助用户理解该元素的功能。

我们还为该元素设置了 tabindex="0" 属性。这意味着该元素可以被键盘访问。这意味着视力障碍人士可以使用键盘来导航到该元素，并点击它。

我们还可以使用CSS来样式化块链接。例如，我们可以使用以下CSS代码来使块链接看起来像一个按钮：

div[role="link"] {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}