Роли WAI-ARIA для каруселей (слайдеры a.k.a., слайд-шоу, галереи)

Ответ 1

Из официальных учебных пособий W3:

Чтобы сгруппировать карусель таким образом, который воспринимается для вспомогательных технологий, можно использовать атрибут role со значением region. Чтобы идентифицировать регион, можно использовать атрибут aria-label, как показано в следующем примере:

<div class="carousel" role="region" aria-label="Recent news">
    …
</div>

Итак, вы должны использовать role="region"

Ответ 2

как вы правильно говорите, role=slider не подходит для карусели. Тот, который вы должны использовать, это role=listbox

цитирование из MDN (см. ссылку ниже):

Роль списка используется для идентификации элемента, который создает список, из которого пользователь может выбрать один или несколько элементов, которые являются статическими и, в отличие от HTML-элементов, могут содержать изображения.

см. https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role дополнительную информацию о других ролях ARIA, которые вы должны использовать, например role=option для каждой записи в списке.

Вы также можете посмотреть этот плагин YUI (YUI 2 устарел, но документация по-прежнему действительна для вашего вопроса) http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel/carousel-ariaplugin.html

который добавляет роли арии в существующую карусель через javascript. Я не предлагаю использовать его, но вы можете, конечно, сделать вывод о том, что он делает, и реплицировать его в своей разметке по мере необходимости.

Ответ 3

Вот пример доступной карусели с использованием jQuery UI: http://hanshillen.github.io/jqtest/#goto_carousel

Панель управления представляет собой список изображений, помеченных значком <ul role="listbox">. Каждый <li> имеет role="option", tabindex="-1" и aria-selected="false".

Двумя стрелками являются <button> элементы с title="previous" и title="next", а при нажатии кнопки выбирается предыдущий или следующий элемент списка, и в этом случае атрибуты элемента списка изменяются на aria-selected="true" и tabindex="0". Последнее означает, что пользователь может непосредственно подключиться к текущему выбранному изображению, что, конечно же, имеет подходящий текст.

Другой вариант, не включенный в этот пример, может состоять в том, чтобы добавить role="alert" в div телезрителя, поэтому, когда содержимое этого div изменяет новый текст, текст автоматически считывается. Таким образом, пользователям не нужно нажимать tab для просмотра изображения, а затем shift + tab, чтобы вернуться к кнопке.

Ответ 4

Я видел много примеров, используя role="listbox", но это кажется мне неправильным. Список - это элемент управления формой, который хочет получить выбор от пользователя. Если целью вашей карусели является выбор пользователем опции, используйте listbox, но большинство людей не используют компоненты карусели таким образом. Лучшей ролью будет tablist. Таблицы используются для представления данных (в отличие от захвата опции). Карусель представляет данные. Ссылки для отображения определенного изображения будут иметь значение tab, и каждое изображение с ним соответствует соответствующим данным, таким как его подпись, в качестве tabpanel.

См. http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanel

Ответ 5

ТЛ; др:

role="marquee"

Карусель не a listbox.

Из описания списка

Виджет, который позволяет пользователю выбирать один или несколько элементов из списка вариантов.

Роль listbox является подклассом select. Хотя я уверен, что есть исключения, карусели обычно не используются в качестве элементов формы, где пользователи "выбирают один или несколько элементов" и не должны использовать роль, которая в противном случае относилась бы к ним как таковой.

Лучшей ролью для карусели является tablist, если предусмотрены пули или нумерация для карусельных слайдов и переключаются в зависимости от того, какой из них активен:

Список элементов табуляции, которые являются ссылками на элементы tabpanel.

Все вокруг - лучшая роль для каруселей - marquee, так как нет никакой зависимости от показа "вкладок" в качестве маркеров или цифр для доступ к различным слайдам:

Тип живой области, в которой часто происходит незначительная информация.