我正在创建一个链接到各种不同文章的导航列表。过去,我已将导航列表定义为包含单个nav
元素的ul
元素,其中包含多个li
元素,所有元素都有各自的a
元素。
我想知道,使用WAI-ARIA 链接 a
属性可以避免使用role
元素吗?
当然,li
元素不允许href
属性,因此以下内容不会被转换为浏览器可理解的任何内容:
<nav role=listbox>
<ul>
<li role=link href=#foo>
Foo
</li>
</ul>
</nav>
WAI-ARIA建议describes the link role为:
对内部或外部资源的交互式引用,在激活时,会导致用户代理导航到该资源。
继续:
如果这是宿主语言中的本机链接(例如具有href值的HTML锚点),则激活链接会导致用户代理导航到该资源。如果这是模拟链接,则Web应用程序作者负责管理导航。
当然,我可以添加一个简单的JavaScript单击处理程序,但这会阻止浏览器确认链接指向的位置。例如,在Chrome,Edge和Firefox中,屏幕左下方会出现一个灰色框,同时激活链接以让用户知道链接的作用。将鼠标悬停在我在此帖子中包含的链接上,用户将看到显示的内容:
是否可以让浏览器包含此功能而无需实现任何其他元素?
答案 0 :(得分:3)
不,WAI-ARIA link
角色仅仅是描述性的,旨在帮助屏幕阅读器等设备。它不会引入任何功能。当相关链接不是a
元素而是带有javascript的模拟链接时,它会特别有用。
要回答您的第二个问题,将鼠标悬停在锚标记上时的链接预览是浏览器status bar的一部分。默认情况下,浏览器不允许您通过javascript操作它,因为这将被视为一个主要的安全漏洞。否则你基本上不会相信预览是准确的,并且很容易诱骗人们点击恶意链接。
话虽这么说,一些浏览器会让你通过更改浏览器中的设置或安装附加组件来操纵它。这没有真正的实际目的,因为大多数用户不会体验这些变化,但这似乎是唯一的方法。我使用window.status page找到了Firefox的最多文档。您可以设置window.status = 'www.fakeurl.com'
,然而,您需要在dom.disable_window_status_change
之前将false
首选项设置为about:config
才能生效。
如果在状态栏中显示文本是绝对必要的,那么完成该操作的唯一方法是使用a
元素。根据经验,如果您的应用允许您使用a
元素进行导航,那么您应始终使用a
元素进行导航。使用CSS3很难想象有太多的情况你无法做到这一点,因为你可以将这个锚标记设置为几乎任何你想要的样式。