html - 可以使用 WAI-ARIA 链接角色将任何元素变成超链接吗？

Question

我正在创建一个链接到各种不同文章的导航列表。在过去，我将导航列表定义为包含单个 ul 元素的 nav 元素，该元素包含多个 li 元素，所有元素都有自己的 a 元素。

我想知道，是否可以使用 WAI-ARIA link role 属性来避免 a 元素？

当然，li 元素不允许使用 href 属性，因此以下内容不会被转换为浏览器可以理解的任何内容:

<nav role=listbox>
  <ul>
    <li role=link href=#foo>
      Foo
    </li>
  </ul>
</nav>

WAI-ARIA 推荐 describes the link role作为:

An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.

接着是:

If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application author is responsible for managing navigation.

当然，我可以添加一个简单的 JavaScript 点击处理程序，但这会阻止浏览器确认链接指向的位置。例如，在 Chrome、Edge 和 Firefox 中，当链接被激活时，屏幕左下方会出现一个灰色框，让用户知道该链接的作用。将鼠标悬停在我在这篇文章上面包含的链接上，用户将看到显示的内容:

是否可以让浏览器在不实现任何额外元素的情况下包含此功能？

Answer 1

不，WAI-ARIA link 角色只是描述性的，旨在帮助屏幕阅读器等设备。它不会引入任何功能。当相关链接不是 a 元素而是使用 javascript 的模拟链接时，它特别有用。

要回答您的第二个问题，将鼠标悬停在 anchor 标记上时的链接预览是浏览器 status bar 的一部分。 .默认情况下，浏览器不允许您通过 javascript 操作它，因为这将被视为一个主要的安全漏洞。否则，您基本上永远不会相信预览是准确的，并且很容易诱骗人们点击恶意链接。

也就是说，某些浏览器允许您通过更改浏览器中的设置或安装附加组件来操纵它。这没有真正的实际目的，因为大多数用户不会体验到这些变化，但这似乎是唯一的方法。我在 window.status page 中找到了最多的 Firefox 文档。 .您可以设置 window.status = 'www.fakeurl.com'，但是您需要将 dom.disable_window_status_change 首选项设置为 false 在 about:config 之前可以工作。

如果在状态栏中显示文本是绝对必要的，唯一的方法就是使用 a 元素。根据经验，如果您的应用允许您使用 a 元素进行导航，那么您应该始终使用 a 元素进行导航。使用 CSS3 很难想象有太多场景无法做到这一点，因为您可以将 anchor 标记设置为看起来像您想要的任何样式。