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

Question

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

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

这是源代码：

<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": "[email protected]"}--><li>
        [email protected]
    </li>
    <!--bindings={"ng-reflect-ng-if": "tel.: [phone]"}--><li>
        tel.: [phone]
    </li>
    <!--bindings={"ng-reflect-ng-if": "free"}--><li>
        free
    </li>
</ul>

由于某种原因，第一项被阅读3次。以下2个项目被读取两次，最后一个项目只读取1次。

Answer 1

我发现问题在于造型。 list-items有一个::before，导致多个读数的问题。我改为::after解决了这个问题。我不知道为什么会这样，所以如果有人仍然知道答案，我很乐意听到！