accessibility - JAWS 不会将 ul 和 li 元素作为列表读取

Question

NVDA 读取正确。 JAWS read only Link 1, Link 2 (content is Link 1, Link 2), but do not read that 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>

Answer 1

您的代码是正确的(除了您指定的多余角色，正如@shannon 所指出的)。不幸的是，这就是 JAWS 的工作方式。当您tab 到包含在列表中的链接时，会读取链接文本，而不会读取链接包含在列表中的事实。但是，如果您在 JAWS 中使用向上/向下箭头键导航 DOM，则当您导航到链接时，您将在听到链接文本之前听到“3 项列表”。当您向下箭头经过列表时，您会听到“列表结束”。 native JAWS 用户已经习惯了它(但这并不是正确的用户体验。)