屏幕阅读器多次读取列表项答案

【问题标题】：Screen reader reads list items multiple times屏幕阅读器多次读取列表项
【发布时间】：2022-02-05 05:47:19
【问题描述】：

我正在尝试使项目完全可访问，但屏幕阅读器会多次从我的列表中读取一些元素。

编辑：这个问题似乎只发生在谷歌浏览器中

这是源代码：

<ul class="o-contact__list">
    <li *ngIf="page?.result?.fields?.contactAddress">
        {{ page?.result?.fields?.contactAddress }}
    </li>
    <li *ngIf="page?.result?.fields?.contactEmail">
        {{ page?.result?.fields?.contactEmail }}
    </li>
    <li *ngIf="page?.result?.fields?.contactTel">
        {{ page?.result?.fields?.contactTel }}
    </li>
    <li *ngIf="page?.result?.fields?.contactPrice">
        {{ page?.result?.fields?.contactPrice }}
    </li>
</ul>

这是 HTML 输出：

<ul class="o-contact__list">
    <!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
        mainstreet 123
    </li>
    <!--bindings={"ng-reflect-ng-if": "info@email.com"}--><li>
        info@email.com
    </li>
    <!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
        tel.: 555 7125
    </li>
    <!--bindings={"ng-reflect-ng-if": "free"}--><li>
        free
    </li>
</ul>

由于某种原因，第一项被读取了 3 次。以下 2 项读取两次，最后一项仅读取 1 次。

【问题讨论】：

什么屏幕阅读器？只发生在 chrome 中，而不是 ie 或 ff？您如何使用屏幕阅读器导航到列表？使用诸如“L”或“I”（眼睛）之类的快捷键或遍历 DOM 的向下箭头？
我在 Mac 上使用画外音，我已经在 safari 和 ff 上对其进行了测试，并且都可以正常阅读列表。我还使用 ChromeVox 在 chrome 上进行了测试，没有出现任何问题，所以我认为它是一个画外音和导致问题的 chrome 组合。我使用画外音命令 (ctrl + alt) 和左右箭头导航页面

标签： html angular accessibility wai-aria screen-readers

【解决方案1】：

我发现问题在于样式。列表项有一个::before，这会导致多个读数出现问题。我把它改成了::after，解决了这个问题。我不知道为什么会这样，所以如果有人仍然知道这个问题的答案，我很乐意听到！

【讨论】：

我们需要查看 CSS 才能知道（更不用说编译的 HTML，而不是 Angular 的“预制”代码）。否则无法分辨。