Mac默认屏幕阅读器使用aria-label时重复播报group的解决求助

问题原因 #

当给<strike>、<span>这类无语义的通用容器添加aria-label时，VoiceOver会自动将其识别为“分组（group）”元素，因此额外播报“group”，造成听觉混淆。

解决方案 #

方法1：移除元素的语义角色 #

给这些容器添加role="none"或role="presentation"，消除其隐含的分组语义，VoiceOver就不会再播报“group”了。修改后的代码如下：

<!DOCTYPE html>
<html>
    <body>
        <p>
            Some text <strike aria-label="This used to cost" role="none">$1000</strike> <span aria-label="now it costs" role="none">2000</span> some ending text
        </p>
    </body>
</html>

方法2：使用视觉隐藏的辅助文本（更符合无障碍最佳实践） #

避免给无语义元素加aria-label，而是通过视觉隐藏的元素添加辅助说明文本，既不影响视觉显示，又能让屏幕阅读器正确读取完整内容：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .visually-hidden {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                border: 0;
            }
        </style>
    </head>
    <body>
        <p>
            Some text 
            <span class="visually-hidden">This used to cost</span>
            <strike>$1000</strike>
            <span class="visually-hidden">now it costs</span>
            <span>2000</span>
            some ending text
        </p>
    </body>
</html>

两种方法都能让VoiceOver按照预期朗读内容：Some text This used to cost $1000 now it costs 2000 some ending text

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