Роли presentation, none, generic и aria-hidden

В ARIA есть несколько сущностей, которые могут вызвать путаницу:

- роль generic;
- роль none;
- роль presentation;
- состояние aria-hidden="true".

Роль generic обозначает общие элементы-контейнеры, которые сами по себе ничего не обозначают. В HTML эта роль встроена в такие элементы, как <div>, <span> и некоторые другие. Она не предназначена для использования в коде.

Разработчики не должны задавать атрибут role="generic" каким-либо элементам. Это внутренняя роль для браузера. Вспомогательные технологии не реагируют на generic элементы и работают с их контентом.

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

presentation можно задавать элементам в отличие от generic. В ряде случаев нужно сбросить семантику, но сохранить элемент с контентом в дереве доступности. Случаи, в основном, связаны со структурой виджетов.

<ul role="menubar">
  <li role="presentation">
    <button
      type="button"
      role="menuitem"
    >
      ...
    </button>
  </li>
  <li role="presentation">
    <button
      type="button"
      role="menuitem"
    >
      ...
    </button>
  </li>
  ...
</ul>

В примере виджет menubar создан на основе <ul> и <li>. Семантика list переопределена на menubar. Семантика <li> остаётся listitem. Внутри menubar допустимы только элементы menuitem, поэтому listitem сбрасывается.

Нет смысла использовать presentation на элементах, которые по умолчанию не несут смысла: <div>, <span>, <section> без имени, <img alt="">, <a> без href, пользовательских элементах и других со встроенной ролью generic.

Для элементов с важной семантикой использование presentation сбрасывает эту семантику. <h1 role="presentation"> потеряет семантику heading и будет как <span>. Сбрасывать стандартную семантику не рекомендуется.

Роль none — это синоним presentation, то есть они работают одинаково. none была добавлена в ARIA 1.1, чтобы уменьшить путаницу. К тому же none короче по количеству символов и выглядит более понятно.

aria-hidden — это состояние, которое можно применять к любым элементам. Значение true исключает элемент и все его дочерние узлы из дерева доступности, как-будто их нет. При этом визуально все элементы сохраняются.

presentation и none удаляют семантику, элемент по-прежнему остаётся в дереве доступности как незначимый и семантика всех дочерних элементов сохраняется. aria-hidden="true" полностью исключает элемент из дерева доступности.

Итого:

- generic — незначимый контейнер, системная роль для браузера, нельзя использовать в коде;
- presentation и none — незначимый контейнер, можно использовать в коде, но, скорее всего, не пригодится;
- aria-hidden="true" — элемент и его поддерево скрыто от вспомогательных технологий, но отображается визуально.

#a11y