Использование role=listitem для элементов, которые не являются прямыми дочерними элементами элемента с role=list?

По сути, для одного из наших требований доступности мы должны сделать явную разметку списка, используя role="list" и role="listitem".

Одна проблема, с которой я сталкиваюсь, — это попытка сделать это на странице поиска с результатами поиска. Однако каждый результат поиска заключен в div «строка». так что это:

<div role="list">
    <div class="row">
        <a role="listitem"
    </div>
    <div class="row">
        <a role="listitem"></a>
    </div>
    <div class="row">
        <a role="listitem"></a>
    </div>
</div>

^ что я хочу сделать.

Однако средство чтения с экрана считывает, что это только 1/1 элемент списка. Как я могу это исправить?


accessibility jaws-screen-reader wcag nvda
person abcdafk    schedule 22.02.2018    source источник
comment
Почему бы просто не использовать здесь ul и li?   -  person steveax    schedule 23.02.2018

Ответы (1)


arrow_upward
0
arrow_downward

Ваш role="listitem" должен идти в "ряд" <div>. Единственными дочерними элементами row="list", которые разрешены, являются элементы списка.

<div role="list">
    <div class="row" role="listitem">
        <a></a>
    </div>
    <div class="row" role="listitem">
        <a></a>
    </div>
    <div class="row" role="listitem">
        <a></a>
    </div>
</div>
person slugolicious    schedule 28.07.2018