Проверка HTML5 на деревьях ARIA

Я использую http://validator.w3.org/nu/ для проверки HTML5 своего документа. . Я не понимаю, почему я получаю ошибку проверки в следующем коде. Я проверил http://www.w3.org/TR/wai-aria/roles#treeitem и подумал, что можно поместить элемент li с role="treeitem" внутри элемента ul с role="group". Нулевой валидатор говорит мне, что это не разрешено. Я хотел бы знать, прав ли nu-валидатор в своем вердикте, и если да, то где мы можем найти информацию о схеме для деревьев ARIA, которая это предусматривает. Спасибо.

Пример кода, который не проходит проверку:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Trees</title>
  </head>
  <body>
    <h1 id="label_1">Fruits and vegetables</h1>
    <ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
      <li role="treeitem" aria-expanded="true">
        <a href="#">Fruits</a>
        <ul id="tree1_1" role="group">
          <li role="treeitem"><a href="#">Oranges</a></li>
          <li role="treeitem"><a href="#">Apples</a></li>
        </ul>
      </li>
      <li role="treeitem">
        <a href="#">Vegetables</a>
        <ul id="tree1_2" role="group">
          <li role="treeitem"><a href="#">Carrots</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

validation html tree wai-aria
person benoit.dubuc    schedule 31.01.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

role="group" определенно разрешено для ul элементов. В настоящее время спецификация HTML5 отражает это также. Validator.w3.org/nu/ и http://validator.w3.org/ правильно трактуют это как действительный. Однако Validator.nu по-прежнему помечает его как недействительный.

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

person hhillen    schedule 21.10.2013

arrow_upward
0
arrow_downward

В вашей строке 13 и строке 19 у вас должна быть роль = дерево, а не роль = группа

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="utf-8" />
<title>Trees</title>
 </head>
 <body>
   <h1 id="label_1">Fruits and vegetables</h1>
    <ul id="tree" role="tree" tabindex="0" aria-labelledby="label_1">
  <li role="treeitem" aria-expanded="true">
    <a href="#">Fruits</a>
    <ul id="tree1_1" role="tree">
      <li role="treeitem"><a href="#">Oranges</a></li>
      <li role="treeitem"><a href="#">Apples</a></li>
    </ul>
  </li>
  <li role="treeitem">
    <a href="#">Vegetables</a>
    <ul id="tree1_2" role="tree">
      <li role="treeitem"><a href="#">Carrots</a></li>
    </ul>
  </li>
</ul>

Валидатор блокирует role=group из-за определения группы, и если вы читайте между строк, элементов списка там нет. у вас есть элемент дерева в вашем списке, поэтому роль будет деревом, а не группой.

person Farrukh Subhani    schedule 31.01.2013
comment
Не согласен с этим, это может подтвердить, но это уже не правильный ARIA. Спецификация ARIA ясно указывает, что group должна использоваться для группировки внутренних элементов дерева. (Возможная опасность помещения tree внутрь состоит в том, что если пользователь сфокусируется на каком-то внутреннем узле и попросит средство чтения с экрана сообщить о состоянии всего дерева, оно может перейти вверх к первому предку tree и предположить, что это все дерево, без других ветвей.) Хотя часто бывает полезно думать о деревьях рекурсивно в реализации, с точки зрения пользователя, здесь есть единственный элемент управления деревом. - person BrendanMcK; 01.02.2013

arrow_upward
0
arrow_downward

Интересный вопрос. Поведение валидатора кажется немного странным. Спецификация WAI-ARIA, по-видимому, позволяет использовать группу в качестве контейнера для элемента дерева.

С другой стороны, спецификация HTML5 не позволяет «группе» быть ролью элемента <ul>. Это должен быть «каталог», «список», «окно списка», «меню», «панель меню», «список таблиц», «панель инструментов», «дерево» или «презентация»; но валидатор на это не жалуется.

В любом случае, кажется, вы должны использовать «дерево», а не «группу».

person Alohci    schedule 31.01.2013
comment
С role=tree выполняется проверка. Спасибо за ссылку на спецификацию, которая отражает это. Меня беспокоило то, что большинство примеров, которые я видел, помещали конструкцию с role=group на внутренний uls. - person benoit.dubuc; 31.01.2013
comment
role=tree на внутренних элементах может быть подтверждено, но я думаю, что тогда это заканчивается неправильным использованием ARIA, что может вызвать проблемы для программ чтения с экрана и их пользователей (во-первых, несколько побеждая цель использования ARIA...). Кажется, что role=tree должен быть только на самом внешнем элементе, представляющем весь элемент управления; в спецификации конкретно упоминается использование group для внутренних поддеревьев. Похоже на ошибку валидатора. - person BrendanMcK; 01.02.2013
comment
Я подозреваю, что здесь также может быть ошибка спецификации; в спецификации ролей ARIA ясно сказано, что treeitems может содержаться в group. Учитывая, что li элементы могут быть treeitems от из черновой спецификации HTML5 следует, что родитель li, т.е. ul или ol, должен быть способен быть group. Насколько я понимаю, спецификация ролей ARIA является более зрелой из этих двух документов, а таблица допустимых ролей относительно новее, и это может показаться упущением. - person BrendanMcK; 01.02.2013
comment
@BrendanMcK - Возможно, ты прав. У вас есть ссылка на то, почему, по вашему мнению, у программ чтения с экрана могут возникнуть проблемы с вложенными деревьями role=trees? - person Alohci; 01.02.2013
comment
@Alochi - обычная задача для кода - перейти от элемента к общему элементу управления (обычно путем обхода DOM), а затем получить общее состояние элемента управления - например, найти текущий выбранный элемент (ы) или доставить общий элемент считать. Когда вы разрешаете вложение дерева, неясно, какое дерево соответствует тому, что конечный пользователь воспринимает как общий виджет пользовательского интерфейса, поэтому код может остановиться раньше (тем более, что текущая спецификация ARIA предполагает, что это допустимый подход). Рекурсивное определение — полезный метод реализации, но пользователи по-прежнему считают, что присутствует один элемент управления деревом пользовательского интерфейса. - person BrendanMcK; 01.02.2013
comment
@Alochi: кроме того, в руководстве по внедрению ARIA элементы DOM с ролью из tree должны сопоставляться с ролями API доступности платформы ROLE_SYSTEM_OUTLINE (MSAA), ROLE_TREE (IAcc2), AxOutline (OSX/iOS) — все они представляют полное управление деревом, а не подмножества, так что это также предполагает, что роль ARIA tree должна иметь аналогичную семантику. - person BrendanMcK; 01.02.2013