屏幕 reader 多次读取列表项

Question

我试图让一个项目完全无障碍，但屏幕阅读器多次从我的列表中读取一些元素。

编辑：这个问题似乎只发生在 google chrome

这是源代码：

<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 次。

Answer 1

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

屏幕 reader 多次读取列表项

Screen reader reads list items multiple times

html

accessibility

screen-readers

wai-aria

angular