Screen reader reads list items multiple times

Question

I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.

Edit: It seems this issue only happens in google chrome

this is the source code:

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

And this is the HTML output:

<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.: 555 7125"}--><li>
        tel.: 555 7125
    </li>
    <!--bindings={"ng-reflect-ng-if": "free"}--><li>
        free
    </li>
</ul>

For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.

what screen reader? only happens in chrome, not ie or ff? how are you navigating to the list with the screen reader? with a shortcut key such as 'L' or 'I' (eye) or the down arrow walking the DOM? — slugolicious
I use voice over on a Mac, I have tested it on safari and ff and both read the list normally. I also tested on chrome with ChromeVox and that gives no issues so I assume its a voice over and chrome combination that causes the problem. I navigate the page using the voice over command (ctrl + alt) and the left and right arrows — asiboe

asiboe asiboe · Accepted Answer · 2019-04-03T15:20:08

I have found the problem lay in the styling. The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem . I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!

Screen reader reads list items multiple times

1 Answers