求助：NVDA悬停时不读取<a>标签的aria-label/aria-labelledby

需要为<a>标签添加屏幕阅读器可读取的额外文本，但NVDA阅读器在悬停元素时，既不读取aria-label也不读取aria-labelledby内容；仅在使用箭头导航页面时能读取额外文本。要求悬停时也能读出完整内容“Find Out More about [slide title]”，且不能移除可见文本。

测试代码如下：

<a href="#" id="btn" role="button" aria-labelledby="btn text">
    Find Out More
    <span id="text" class="visually-hidden">about [slide title]</span>
</a>
<a href="#" aria-label="Find Out More about [slide title]">Find Out More</a>

可行解决方法 #

方法1：结合title属性与视觉隐藏文本 #

NVDA在鼠标悬停时会读取元素的title属性内容，我们可以利用这一点，给<a>标签添加对应内容的title属性，同时保留视觉隐藏的文本以确保键盘导航场景的无障碍支持：

<a href="#" title="Find Out More about [slide title]">
    Find Out More
    <span class="visually-hidden">about [slide title]</span>
</a>

如果不想显示浏览器默认的title tooltip弹窗，可通过CSS隐藏：

a[title] {
    position: relative;
}
a[title]:hover::after {
    display: none;
}

方法2：利用aria-live区域结合JavaScript播报 #

若title属性方案不符合需求，可通过JavaScript监听鼠标悬停事件，借助aria-live区域让屏幕阅读器播报完整内容：

1. 页面中添加隐藏的aria-live区域：

<div aria-live="polite" class="visually-hidden" id="live-region"></div>

2. 为链接添加悬停事件监听：

const targetLink = document.querySelector('a');
const liveRegion = document.getElementById('live-region');

targetLink.addEventListener('mouseenter', () => {
    liveRegion.textContent = 'Find Out More about [slide title]';
});

targetLink.addEventListener('mouseleave', () => {
    liveRegion.textContent = '';
});

aria-live="polite"会让屏幕阅读器在空闲时播报内容，不会打断用户当前操作。

通用视觉隐藏样式 #

上述方案中用到的visually-hidden类，需确保元素视觉不可见但屏幕阅读器可访问，推荐样式：

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

内容的提问来源于stack exchange，提问作者Oskar Wiktor