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>

我有两件事感到困惑：

为什么屏幕阅读器不会读取<a>标签，就像菜单下拉列表中没有其他标签一样？
为什么没有aria-labelledby正在阅读？

Answer 1

我怀疑它是＆＃34; aria-hidden＆＃34;在跨度上。就屏幕阅读器而言，该链接中没有任何内容。

此外：

label在这里看似合乎逻辑，但实际上它只适用于输入。
将aria-hidden和aria-labelledby放在同一个元素上并不合理。
避免tabindex=1;如果您需要用户可以点击/关注它，请使用0;如果您只需要通过javascript关注它，请使用-1。
您的代码示例中有很多内容;你能解释或展示你想要实现的目标吗？为什么有带标签的下拉项目，其中带有图标的工具提示？这个菜单项应该如何看起来和功能？这些标签实际上代表什么？

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

处理屏幕阅读器ARIA

1 个答案: