Доступность: шаблон дизайна для того, что выглядит как вкладки с одной панели

Question

В моем приложении есть компонент Filter. Это список кнопок, из которых только одна может быть выбрана одновременно. Как только фильтр выбран, он изменяет / фильтрует содержимое на одной панели. Какие методы доступности я должен использовать в этом случае, чтобы сделать его более доступным?

Это очень распространенный вариант использования, но, похоже, он не подходит напрямую к каким-либо шаблонам , объясненным в примерах WAI ARIA. Функциональность фильтра, по моему мнению, может попадать в один из следующих шаблонов:

1. Вкладки, но каждая вкладка не имеет отдельной панели, которая скрывается / отображается при выборе вкладки, а только одна панель, содержимое которой динамически изменяется.
2. Radio Group с кнопками Radio, управляющими другим элементом DOM.
3. Выберите функциональность, но стиль таков, что все опции видны одновременно, и выбор контролирует другой элемент DOM.

Есть указатели или примеры?

Answer 1

Мне кажется, что aria-controls - хороший выбор здесь.

Ваша группа кнопок воспроизводит то, что фактически является выбором radiogroup, с выбранным только одним выбором.

Использование элементов radio было бы хорошим подходом для пользователей программ чтения с экрана (вы, конечно, можете идеально настроить их так, чтобы они выглядели как кнопки), а затем примените aria-control к элементу radiogroup.

Здесь достаточно полной ARIA, но вы можете прекрасно использовать нативные input[type='radio'] элементы.

<div role="radiogroup" aria-controls="panel1" aria-labelledby="filter">
   <div id="filter">Filter by</div>
   <div role="radio" aria-checked="true" tabindex="0">Filter 1</div>
   <div role="radio" tabindex="0">Filter 2</div>
</div>
<div id="panel1">
   Results here
</div>