Почему `ul` имеет ARIA role` menu`, но `menuitem` запрещен для` li`?

Только что раскрыл некоторые страшные спецификации относительно роли ARIA. Почему ul имеет ARIA-роль menu, но menuitem запрещено для li?

Я хотел бы описать навигационную панель, используя элементы ul, li и HTML5 nav в сочетании с ролями ARIA navigation, menu и menuitem.

<!DOCTYPE html>
<html>
  <head><title>ARIA role bug?</title></head>
  <body>
    <nav role="navigation">
      <ul role="menu">
        <li role="menuitem"><a href="#" onclick="location.href='http://example.com/'; return false;">example.com</a></li>
      </ul>
    </nav>
  </body>
</html>

W3 HTML5 validator Нагните меня здесь:

Недопустимое значение menuitem для роли атрибута в элементе li.

Ответ 1

Jukka неверно здесь. W3C validator не проверяет WHATWG LS, вместо этого он проверяет Спецификация HTML W3C. Спецификация HTML W3C является авторитетным источником требований к проверке соответствия для W3C Validator.

В отношении menuitem не допускается согласно спецификации HTML, я считаю, что это ошибка. И как таковой я подал ошибку. Теперь в моей очереди ошибок нужно решить.

Я подал ошибку против W3C validator и wai -aria в HTML doc. До тех пор, пока валидатор не будет исправлен, я предлагаю вам использовать роли в соответствии с спецификацией WAI-ARIA и игнорировать валидатор.

Я оглянулся на историю интеграции ARIA в HTML, и не смог найти причин, по которым menuitem не разрешалось, так что считайте, что это был надзор. Я исправил и разрешил ошибку, на которую я ссылался выше.

Ответ 2

Следующая разметка HTML находится в самой спецификации ARIA (той, которую вы связали), и наглядно показывает, что LI (вложенный, даже) используется как элемент меню. Я предполагаю, что конкретная разметка, которую вы используете, заставляет ее не соответствовать, но это просто догадка.

<ul role="menubar">

 <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem">New</li>
      <li role="menuitem">Open…</li>
      …
    </ul>
  </li>
  …
</ul>

Ответ 3

Валидатор W3C при применении правил HTML5 фактически проверяет (некоторую версию) WHATWG "Живой стандарт HTML", который в настоящее время говорит, в разделе 3.2.7 WAI-ARIA, о "элементе li, чей родитель является ol или ul элементом", следующее: "Роль должна быть либо listitem, menuitemcheckbox, menuitemradio, option, tab, либо treeitem".

Это соответствует правилам в проекте "Использование WAI-ARIA в HTML" W3C, в 2.9 Таблица рекомендаций.

Ответ 4

Я использовал аналогичную DOM и менял роль подменю li на presentation сделал страницу подтвержденной. Хотя, возможно, семантически неправильно, в моей ситуации это несущественно.

Ответ 5

Нельзя поместить role = "menuitem" в элемент li, когда он содержит элемент, поскольку виджет menuitem не может содержать какие-либо промежуточные элементы (например, ссылки).

Взгляните на aria-practices примеры для меню.

<li role="none">
  <a role="menuitem">my menuitem here</a>
</li>

или

<li role="menuitem">my menuitem here</li>