html - 屏幕阅读器应该读取 "Home, Link, Menu Item"还是 "Home, Menu Item"

Question

如果菜单项是链接，屏幕阅读器应该将其读作“主页、链接、菜单项”还是“主页、菜单项”？

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

这是我的代码:

<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>

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

Answer 1

如果您的 html 是正确的，那么不必担心屏幕阅读器如何宣布它。 JAWS、NVDA、VoiceOver、Talkback、Narrator、ChromeVox 等可能都宣布它略有不同，但这没关系。只要代码正确，就可以了。

作为旁注，如果您使用菜单角色，那么您将致力于实现箭头键导航。也就是说，将菜单角色视为老式桌面应用程序菜单，您可以在其中按 alt 进入顶部菜单(例如文件、编辑、查看)，然后按左/右箭头进行导航通过菜单和向上/向下箭头浏览子菜单。在 Web 应用程序上这样做很好，但它会使代码更加复杂。我很少使用菜单角色，只是依靠基本的 Tab 键来浏览链接列表。