Почему атрибут «роль» не имеет значения «контейнер»?

Question

<div class= "container" role= "grid">

Для атрибута role div.container я выбираю значение grid.

Почему нет значения container?

<!-- =layout: start -->
<div class="container" role="grid">
    <div class="row" role="row">
        <aside class="col col-aside" role="complementary">
            <h2>aside</h2>
        </aside>
        <main class="col col-main" role="main">
            <h2>main</h2>
            <!-- =panel: start -->
            <div class="panel" role="region">
                <h3>panel</h3>
            </div>
            <!-- =panel: end -->
        </main>
    </div>
</div>
<!-- =layout: end -->

Answer 1

Роли ориентиров ARIA (через значение region) аналогичны описанным вами тем, что они делают позволяют вам создавать и называть свои собственные контейнеры, которые вспомогательные технологии могут затем идентифицировать и перемещатьсянепосредственно к.

  <div role="region" aria-labelledby="region1"> 
    <h2 id="region1">Title for Region Area 1</h2> 
      ... some content ...
  </div> 

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

Стоит также отметить, что название региона должно быть полезным и иметь смысл без дополнительного контекста.Хорошим примером будет " Search ".Плохой пример: « Регион 1 ».

На рисунке ниже показано, что будет видеть пользователь программы чтения с экрана (NVDA) при навигации по ролям.Все используемые роли являются значениями по умолчанию, за исключением search.

Answer 2

Подробнее об авторизованных ролях ARIA можно прочитать в справочнике ARIA в HTML, документ

Роли "контейнер" не существует.Вы совершенно правы.

Почему?Потому что вам не нужно давать роль элементам, используемым исключительно для украшения, как в вашем случае обертка div для неинтерактивных элементов.

См., Например, определение grid:

Сетка - это интерактивный элемент управления, который содержит ячейки табличных данных, расположенных в строках и столбцах, как таблица.

Это не тот случай.