一个11y | Mac 画外音正在朗读 aria-label 和所有嵌套文本

Question

我的滑块有一个奇怪的问题。基本标记是这样的：

<ol class="slider-list" aria-live="polite">
    <li class="slider-page" aria-hidden="false" aria-roledescription="slide" aria-label=" | 1 of 5">
        <ul class="col-container cols-4 rows-1">
            <li class="col item">
                <div class="entity-container">
                    <div class="entity-mask">
                        <a class="entity-link" aria-label="My Aria Label" tabindex="0">
                            <div class="entity-box">
                                <div class="aspect">
                                    <img class="thumb" src="https://someurl.com/picture.jpg">
                                </div>
                            </div>
                        </a>
                        <div class="entity-details">
                            <a class="entity-link" tabindex="-1">
                                <h3 class="title no_focus">
                                    <span>My Title</span>
                                </h3>
                            </a>
                            <div class="movie-release-date">My Release Date</div>
                        </div>
                    </div>
                </div>
            </li>
            ...
        </ul>
    </li>
    <li class="slider-page" aria-hidden="true" aria-roledescription="slide" aria-label=" | 2 of 5">
        ...
    </li>
    ...
</ol>

现在让我解决一些问题 - 在功能和视觉上一切正常。当您在不同的列项目中切换时，会读取 aria-label，在这种情况下，正在读取 My Aria Label。

问题是，在读取 aria-label 之后，所有嵌套文本也会被读取，包括 My Title 和 My Release Date。甚至更奇怪的是，它还沿着树上升并一次读取所有兄弟姐妹的 aria-labels 而无需任何额外的标签 - 它只是全部读取但在读取正确的 aria-label 和正在读取的其余内容之间有一个暂停。

这仅发生在 Safari 和 Chrome（最新版本）中。

知道这里发生了什么吗？

Answer 1

根据 brennanyoung 的评论和我在看到他们的评论之前的发现，aria-live 是问题所在。随着幻灯片的变化，所有内容都被阅读了。通过在特定时间根据产品要求将 this/setting 禁用到 off，问题得到解决。

一个11y | Mac 画外音正在朗读 aria-label 和所有嵌套文本

a11y | Mac voiceover is reading aria-label and all nested text

html

accessibility

wai-aria