Search code examples
accessibilityjaws-screen-readernvda

JAWS does not read ul and li elements as a list


NVDA reads correctly. JAWS read only Link 1, Link 2 (content is Link 1, Link 2), but do not read that is is a list

list-style-type: none;

html:

<ul role="list" class="content-links">
        <sly data-sly-list.link="${model.links}">
            <li role="listitem">
                <a href="${link.href @ context='html'}" aria-label="${link.label}" rel="${link.rel}"
                   tms-dblclick="${link.tracking.tmsDblClick}" data-pid="${link.tracking.vadm.pin}" data-pid-action="${link.track.vadm.pinAction}">
                    ${link.label}
                </a>
            </li>
        </sly>
</ul>

Solution

  • Your code is correct (other than the superfluous roles you have specified, as pointed out by @shannon). Unfortunately, that's just how JAWS works. When you tab to a link that is contained in a list, the link text is read and the fact that the link is contained in a list is not read. But if you navigate the DOM using the up/down arrow keys in JAWS, when you navigate to the link, you will hear "list of 3 items" before you hear the link text. And you'll hear "list end" when you arrow down past the list. Native JAWS users are used to it (not that that makes it the right user experience.)