Доступное выпадающее меню: <li>имеет несколько детей

Question

Я работаю над тем, чтобы сделать раскрывающееся меню доступным.Я в значительной степени следую примеру W3: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#

Однако мое меню имеет необычную структуру.Некоторые из моих элементов списка содержат более одной кнопки, которые выровнены по горизонтали внутри элемента списка.

<ul role="menu">
	<li role="none">Header</li>
	<li role="none">
		<button role="menuitem">Option A</button>
		<button role="menuitem">Option B</button>
		<button role="menuitem">Option C</button></li>
	<li role="none">
		<button role="menuitem">Button Foo</button>
	</li>
</ul>

Есть ли рекомендуемый способ сделать этот WCAG доступным?Я бы хотел, чтобы пользователь использовал клавиши ВЛЕВО / ВПРАВО для перемещения между кнопками внутри элемента списка.

Кроме того, в настоящее время программа чтения с экрана (NVDA) сообщит пользователю, что в списке 4 элемента (из-за наличия 4 элементов с тегом role = "menuitem").В идеале, я бы хотел, чтобы программа чтения с экрана дала пользователю знать, что в списке есть только 2 элемента, а затем, когда он нажимает кнопку с родными братьями (например, «Вариант А» в моем примере), я бы хотела, чтобы программа чтения с экранаобъявляем, что, кроме того, что находится в первом пункте в меню, это вариант 1 из 3 в списке.

Любой совет приветствуется!

Answer 1

ВАЖНОЕ ПРИМЕЧАНИЕ : роль и шаблон menu предназначены для использования в приложениях.Если вы хотите создать меню для простого веб-сайта, вы должны использовать navigation роль

---

Теперь отвечая на ваш вопрос ...

Вы описываете, чтоmenuitemradio роль предназначена для: (примечание: это также может быть menutitemcheckbox, если различные варианты не являются исключительными )

<ul role="menu">
    <li role="none" id="group_header">Header</li>
    <li role="group" aria-describedby="group_header">
        <button role="menuitemradio">Option A</button>
        <button role="menuitemradio">Option B</button>
        <button role="menuitemradio">Option C</button></li>
    <li role="none">
        <button role="menuitem">Button Foo</button>
    </li>
</ul>

IХотелось бы, чтобы пользователь использовал клавиши ВЛЕВО / ВПРАВО для перемещения между кнопками внутри элемента списка.

Вы можете просмотреть реквизиты для взаимодействия с клавиатурой для menu элементов роли наWAI ARIA Authoring практика , которая включает в себя больше, чем просто левая и правая клавиши.Так что вам придется полагаться на важные разработки javascript для вашего приложения.

---

Примечание : Помните, что если вы разрабатываете веб-сайт (поэтому ваше меню не будет вapplication роль), вы должны использовать роль navigation.Это было бы проще, и вы могли бы использовать любые стандартные элементы HTML, такие как input[type='radio'], которые будут обрабатывать левую и правую клавиши по умолчанию:

<ul role="navigation" aria-label="Menu">
   <li><div id="group_header">Header</div>
     <div role="group" aria-describedby="group_header">
        <label><input type="radio" name="item" /> Option A</label>
        <label><input type="radio" name="item" /> Option B</label>
        <label><input type="radio" name="item" /> Option C</label>
     </div>
   </li>
   <li><button>Button Foo</button></li>
</ul>

Обсуждение темы "меню не для веб-сайта"