处理屏幕阅读器 ARIA

Question

我一直在阅读有关使用 ARIA 让屏幕阅读器阅读否则不会出现的标签的信息。但是，我很难读取下拉菜单（来自 Foundation 6）。考虑这段代码：

<li role="menuitem">
    <label id="label1" class="sr-only">Testing click label</label>
    <a class="submenu-link" href="/" tabindex="1">
        <span class="has-tip right" data-tooltip aria-haspopup="true" data-disable-hover="false" title="Foundation tooltip">
            <i class="fa fa-plus-circle"></i>
            <span class="text" aria-hidden="true" aria-labelledby="label1">Click here</span>
        </span>
    </a>
</li>

有两件事让我感到困惑：

1. 为什么屏幕阅读器不能像所有其他不在下拉菜单中的标签一样读取 <a> 标签？
2. 为什么没有读取aria-labelledby？

Answer 1

我怀疑它是跨度上的“隐藏的 aria-hidden”。据屏幕阅读器所知，该链接中没有任何内容。

还有：

• label 在这里可能看起来合乎逻辑，但实际上它仅用于输入。

• 将aria-hidden 和aria-labelledby 放在同一个元素上没有任何意义。

• 避免tabindex=1；如果您需要它可以被用户点击/聚焦，请使用0，如果您只需要能够通过javascript对其进行聚焦，请使用-1。

• 您的代码示例中有很多内容；你能解释或展示你想要达到的目标吗？为什么有一个带有标签的下拉项，其中有一个带有图标的工具提示？这个菜单项的外观和功能应该如何？这些标签中的每一个实际上代表什么？

在适当的地方添加标签绝对值得考虑，但只要有可能，让普通标记来完成繁重的工作。