Я пытаюсь сделать список доступным, используя role = "list"
в качестве родительского элемента и role = "listitem"
для элементов. Я хочу, чтобы каждый элемент списка имел описание с использованием aria-describedby
в дополнение к текстовому содержимому.
Вот упрощенная версия моего кода:
<div class = "wrapper">
<div id = "rbd-hidden-text-11-hidden-text-132" style = {{ display: "none" }}>
This text should be read by screen reader
</div>
<div role = "list" style = {listStyle}>
{items.map((item, index) => (
<div
key = {index}
// NOTE: using listitem, you can focus item's focusable
// children like buttons but aria-describedby is not read on
// macOS
role = "listitem"
// Button role makes aria-describedby readable by macOS VO
// but you cannot focus its focusable children :(
// role = "button"
style = {listItemStyle}
tabIndex = {0}
// macOS reads this only when role = "button"
aria-describedby = "rbd-hidden-text-11-hidden-text-132"
// aria-labelledby = "rbd-hidden-text-11-hidden-text-132"
// aria-description = "Is this read by a screen reader?"
>
{item}
<button>Action1</button>
<button>Action2</button>
</div>
))}
</div>
</div>
При тестировании на macOS Chrome все работает нормально. Когда VoiceOver фокусирует элемент списка, описание читается как положено. Однако это не работает в Safari.
Изменение role
на button
делает aria-describedby
доступным для чтения VoiceOver на macOS, но создает еще одну проблему: элементы с role = "button"
не позволяют VoiceOver сосредоточиться на интерактивных детях.
Мои вопросы:
aria-describedby
работать с role = "listitem"
в Safari с помощью VoiceOver?aria-describedby
работать, не меняя роль на button
и при этом позволяя интерактивным детям сосредоточиться?Любая помощь или предложения будут очень признательны!
У меня нет прямых ответов на ваши вопросы, но некоторые элементы вашего кода меня насторожили:
<ul>
, <ol>
и <li>
. Например, вы можете попробовать список ролей/опцию, панель инструментов/кнопку или меню/пункт меню. Напоминаем, что постарайтесь взять соответствующий элемент с самого начала, вообще не используя атрибут роли, если можете.Это дает четыре веские причины не читать описания так, как вы ожидаете.
Не могли бы вы поделиться ссылкой, где вы объяснили «проблему вложенного фокуса»?
Конечно: stackoverflow.com/questions/78436458/… , stackoverflow.com/questions/77927896/…
Подводя итог короткой заметке Леони Уотсон к […] арии, описанной:
Если вы используете […]
aria-describedby
с любыми элементами, отличными от интерактивных или ориентировочных (например, div, span, p, blockquote или Strong и т. д.), они, как правило, не будут работать во всех комбинациях браузера и вспомогательных технологий.
Поскольку текст описания скрыт, правильно использовать aria-description
вместо ссылки.
Но поскольку оба варианта не будут надежно работать с этой ролью, вам следует использовать визуально скрытую технику для текста программы чтения с экрана, даже если он может быть прочитан всеми (в отличие от описания, которое можно прочитать опционально).
Таким образом, текст должен представлять собой простую короткую неструктурированную строку.
/* ie9+ */
/* by Scott O’Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<ul>
<li>
{item}
<span class = "visually-hidden">This text should be read by screen reader</span> …
</li>
</ul>
Возможно, взгляните на очень похожий вопрос, заданный недавно о
aria-describedby
и NVDA: stackoverflow.com/questions/78484713/… . В заключение:aria-describedby
ненадежно. См. также [короткую заметку Леони Уотсон о […] aria-describedby]( tpgi.com/…)