操作屏幕阅读器ARIA

Question

我一直在读关于使用ARIA让屏幕阅读器读取标签的文章，否则这些标签就不会存在。然而，我很难得到一个下拉菜单（从基金会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

我怀疑这是span上隐藏的"aria"。据屏幕阅读器所知，该链接中没有任何内容

还有：

• label在这里看起来可能是一个合乎逻辑的东西，但实际上它只用于输入。

• 把aria-hidden和aria-labelledby放在同一个元素上实际上没有意义。

• 避免tabindex=1；如果您需要用户点击/聚焦，请使用0；如果您只需要通过javascript聚焦，则使用-1。

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

在适当的地方添加标签肯定是值得考虑的，但只要可能，就让正常的标记来完成繁重的工作。