可以使用 WAI-ARIA link 角色将任何元素变成 hyperlink 吗?
Can the WAI-ARIA link role be used to turn any element into a hyperlink?
我正在创建一个导航列表,其中 link 指向各种不同的文章。在过去,我将导航列表定义为包含单个 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 单击处理程序,但这会阻止浏览器确认 link 指向的位置。例如,在 Chrome、Edge 和 Firefox 中,屏幕左下方会出现一个灰色框,同时激活 link,让用户知道 link 的作用。将鼠标悬停在我上面包含在此 post 中的 link 上,用户将看到显示的内容:
是否可以让浏览器在不实现任何附加元素的情况下包含此功能?
不,WAI-ARIA link
角色只是描述性的,旨在帮助屏幕阅读器等设备。它不会引入任何功能。当所讨论的 link 不是 a
元素而是带有 javascript.
的模拟 link 时,它特别有用
要回答您的第二个问题,当您将鼠标悬停在锚标记上时 link 预览是浏览器 status bar 的一部分。默认情况下,浏览器不允许您通过 javascript 操作它,因为这将被视为一个主要的安全漏洞。否则,您基本上永远不会相信预览是准确的,并且很容易诱使人们点击恶意 links。
也就是说,有些浏览器会让您通过更改浏览器中的设置或安装附加组件来操纵它。这没有真正的实际目的,因为大多数用户不会体验到这些变化,但这似乎是唯一的方法。我用 window.status page 找到了最多的 Firefox 文档。您可以设置 window.status = 'www.fakeurl.com'
、,但是 您需要在 about:config
中将 dom.disable_window_status_change
首选项设置为 false
才能生效。
如果在状态栏中显示文本是绝对必要的,唯一的方法就是使用 a
元素。根据经验,如果您的应用允许您使用 a
元素进行导航,那么您应该始终使用 a
元素进行导航。并且使用 CSS3 很难想象有太多你无法这样做的场景,因为你可以将锚标记设置为看起来像你想要的任何东西。
我正在创建一个导航列表,其中 link 指向各种不同的文章。在过去,我将导航列表定义为包含单个 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 单击处理程序,但这会阻止浏览器确认 link 指向的位置。例如,在 Chrome、Edge 和 Firefox 中,屏幕左下方会出现一个灰色框,同时激活 link,让用户知道 link 的作用。将鼠标悬停在我上面包含在此 post 中的 link 上,用户将看到显示的内容:
是否可以让浏览器在不实现任何附加元素的情况下包含此功能?
不,WAI-ARIA link
角色只是描述性的,旨在帮助屏幕阅读器等设备。它不会引入任何功能。当所讨论的 link 不是 a
元素而是带有 javascript.
要回答您的第二个问题,当您将鼠标悬停在锚标记上时 link 预览是浏览器 status bar 的一部分。默认情况下,浏览器不允许您通过 javascript 操作它,因为这将被视为一个主要的安全漏洞。否则,您基本上永远不会相信预览是准确的,并且很容易诱使人们点击恶意 links。
也就是说,有些浏览器会让您通过更改浏览器中的设置或安装附加组件来操纵它。这没有真正的实际目的,因为大多数用户不会体验到这些变化,但这似乎是唯一的方法。我用 window.status page 找到了最多的 Firefox 文档。您可以设置 window.status = 'www.fakeurl.com'
、,但是 您需要在 about:config
中将 dom.disable_window_status_change
首选项设置为 false
才能生效。
如果在状态栏中显示文本是绝对必要的,唯一的方法就是使用 a
元素。根据经验,如果您的应用允许您使用 a
元素进行导航,那么您应该始终使用 a
元素进行导航。并且使用 CSS3 很难想象有太多你无法这样做的场景,因为你可以将锚标记设置为看起来像你想要的任何东西。