18910140161

HTML-屏幕阅读器应该读“主页,链接,菜单项”还是“主页,菜单项”-堆栈溢出

顺晟科技

2022-10-19 12:00:26

117

如果菜单项是链接,屏幕阅读器应该将其读为“主页,链接,菜单项”还是“主页,菜单项”?

当前屏幕阅读器将其读为“主页、链接、菜单项”,但我得到了关于它的混合信息。一些信息说它应该是“主页,链接,菜单项”,因为我们想让用户知道按钮是一个链接。然而,有些人说,它应该只是作为“主页,菜单项”

宣布

以下是我的代码:

<ul role="menu">
        <li role="menuitem">
            <a aria-label="Home" href="/en-us/">
                <span class="">Home</span>
            </a>
        </li>
        <li role="menuitem">
            <a aria-label="Search" href="/en-us/">
                <span class="">Search</span>
            </a>
        </li>
</ul>

我想知道哪个版本是正确的?


顺晟科技:

只为那些偶然发现这个问题的人准备,并且用于站点导航(这里似乎就是这样)。

它们是为应用程序菜单设计的(例如带有命令的下拉菜单)。

对于站点导航,正确(也简单得多)的标记是简单地使用带有嵌套的元素(除非您支持HTML4...即使这样也可能足够了!)。

此外,在上面给出的示例中并不真正需要an,因为the与可编程确定的文本相同(web浏览器可以计算出“home”文本在元素中,因此将通过辅助功能树向屏幕阅读器显示该信息)。

因此,对于站点导航,只需要以下内容:

不要使用WAI-ARIA,除非您已经探索了所有其他选项,或者您需要支持古老的浏览器!

其他

用你不仅要实现箭头键导航。您还应该添加以下功能:-

  • 菜单可以使用esc键关闭。
  • 可以跳到使用字母的选项(因此D可能跳到“详细信息”,如果这些选项是菜单选项,则下一次按D可能跳到“删除”)。
  • home应跳转到列表的开头
  • end应跳转到列表中的最后一项

最后

如果这确实是一个下拉菜单,并且您已经实现了以上所有内容,那么您的加价并不完全正确。

应该有(根据指南使用“presentation”“none”)来删除语义,并且应该在锚点本身上。

还请不要忘记,您需要将打开菜单的按钮与菜单本身相关联,因此必须在菜单上有一个ID,最后不要忘记,当菜单关闭时,您必须将焦点返回到打开菜单的按钮。

如果您的html是正确的,那么不必担心屏幕阅读器如何宣布它。大白鲨、NVDA、画外音、对讲、叙述者、ChromeVox等都可能会宣布它略有不同,这没关系。只要代码正确,就很好。

另请注意,如果您使用菜单角色,那么您将致力于实现箭头键导航。也就是说,将菜单角色视为一个老式桌面应用程序菜单,在此菜单中,您可以按Alt进入顶部菜单(如文件、编辑、查看),然后向左/向右箭头在菜单中导航,向上/向下箭头在子菜单中导航。在web应用程序上这样做很好,但它会使代码更加复杂。我很少使用菜单角色,只依靠基本的选项卡在链接列表中导航。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航