Атрибут role в HTML: что надо знать

Атрибут role в HTML - это способ предоставления семантической информации вспомогательным технологиям, таким как программы чтения с экрана, о назначении и функции элемента. Атрибут role может использоваться для описания элементов, которые изначально не существуют в HTML или существуют, но пока не имеют полной поддержки в браузере. Атрибут role также может быть использован для повышения доступности существующих элементов HTML путем добавления более специфических ролей.



Атрибут role является частью спецификации Accessible Rich Internet Applications (ARIA), определяющей набор ролей, состояний и свойств, которые могут быть использованы для повышения доступности веб-содержимого. ARIA-роли добавляются к HTML-элементам с помощью role="role type", где role type - название роли в спецификации ARIA. Некоторые роли требуют включения связанных с ними состояний или свойств ARIA, другие действительны только в сочетании с другими ролями.

Примеры использования атрибута role

Ниже приведены примеры использования атрибута role в HTML с некоторыми фрагментами кода и комментариями.

Использование атрибута role для несемантических элементов

Несемантические элементы HTML, такие как <div> и <span>, по умолчанию не имеют роли. Им можно присвоить роль с помощью атрибута role, чтобы указать их функцию или значение. Например, элементу <div> можно присвоить роль "alert", чтобы указать, что он содержит важное сообщение, требующее внимания пользователя.

<div role="alert">
  <p>Какое-то оповещение</p>
</div>

Использование атрибута role для пользовательских виджетов Пользовательские виджеты - это интерактивные компоненты, создаваемые с помощью HTML, CSS и JavaScript. Они могут не иметь соответствующего собственного HTML-элемента или иметь поведение, отличное от поведения собственного элемента. Например, пользовательский виджет панели вкладок может быть создан с помощью элементов <div> и JavaScript. Атрибут role может использоваться для назначения ролей панели вкладок и вложенных в нее вкладок, а также состояний и свойств ARIA для указания их состояния и взаимосвязи.

<div role="tablist">
  <div role="tab" id="tab1" aria-selected="true">Вкладка 1</div>
  <div role="tab" id="tab2" aria-selected="false"> Вкладка2</div>
  <div role="tab" id="tab3" aria-selected="false"> Вкладка 3</div>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p> Контент вкладки 1</p>
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
  <p> Контент вкладки 2</p>
</div>
<div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden>
  <p> Контент вкладки 3</p>
</div>

Использование атрибута role для семантических элементов

Семантические элементы HTML, такие как <article> и <nav>, имеют роль по умолчанию, которая соответствует их смыслу. Однако иногда возникает необходимость переопределить или уточнить их роль с помощью атрибута role. Например, элементу <nav> может быть присвоена роль "хлебных крошек", чтобы указать, что он содержит список ссылок, показывающих местоположение пользователя в иерархии сайта.

<nav role="breadcrumbs">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/blog">Блог</a></li>
  </ul>
</nav>

Атрибут role в HTML является полезным инструментом для повышения доступности веб-контента путем предоставления семантической информации вспомогательным технологиям. Атрибут role может быть использован для более точного описания несемантических элементов, пользовательских виджетов и семантических элементов. Однако атрибут role следует использовать с осторожностью и только в случае необходимости, поскольку он может отменять семантику HTML-элементов или вступать с ней в конфликт. Также важно следовать спецификации ARIA и использовать корректные роли, состояния и свойства, подходящие для каждого элемента.