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

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

1 个答案: