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

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": "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解决问题。 我不知道为什么会这样，所以如果有人仍然知道答案，我很想听听！