Какова цель атрибута "role" в HTML?

Я продолжаю видеть ролевые атрибуты в работе некоторых людей. Я тоже им пользуюсь, но не уверен в его эффекте.

Например:

<header id="header" role="banner">
    Header stuff in here
</header>

Или же:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Или же:

<section id="main" role="main">
     Main content stuff in here
</section>

Нужен ли этот атрибут роли?

Этот атрибут лучше для семантики?

Это улучшает SEO?

Список ролей можно найти здесь, но я вижу, что некоторые люди составляют свои собственные. Это разрешено или правильное использование атрибута роли?

Есть мысли по этому поводу?

ОТВЕТЫ

Ответ 1

Большинство ролей, которые вы видите, были определены как часть ARIA 1.0, а затем включены в HTML5. Некоторые из новых элементов HTML5 (диалог, основной и т.д.) Даже основаны на оригинальных ролях ARIA.

http://www.w3.org/TR/wai-aria/

Есть две основные причины использования ролей в дополнение к вашему родному семантическому элементу.

Причина № 1. Переопределение роли, в которой нет элемента языка хоста, или, по разным причинам, используется менее семантически подходящий элемент.

В этом примере была использована ссылка, хотя результирующая функциональность более напоминающая кнопку, чем навигационная ссылка.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Считыватели экрана услышат это как кнопку (в отличие от ссылки), и вы можете использовать селектор атрибутов CSS, чтобы избежать class-itis и div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Причина № 2. Резервное копирование роли собственного элемента для поддержки браузеров, которые реализовали роль ARIA, но еще не выполнили роль собственного элемента.

Например, "основная" роль поддерживалась в браузерах в течение многих лет, но это относительно недавнее дополнение к HTML5, поэтому многие браузеры еще не поддерживают семантику для <main>.

<main role="main">…</main>

Это технически избыточно, но помогает некоторым пользователям и не наносит вреда. Через несколько лет этот метод, скорее всего, станет ненужным.

Вы также написали:

Я вижу, что некоторые люди составляют свои собственные. Это разрешено или правильное использование атрибута роли?

Это действительное использование атрибута, если реальная роль не включена. Браузеры будут применять первую признанную роль в списке токенов.

<span role="foo link note bar">...</a>

Из списка только допустимые роли link и note, поэтому роль ссылки будет применяться, потому что она на первом месте. Если вы используете пользовательские роли, убедитесь, что они не конфликтуют с какой-либо определенной ролью в ARIA или используемом вами языке хоста (HTML, SVG, MathML и т.д.).

Ответ 2

Насколько я понимаю, роли были изначально определены XHTML, но устарели. Однако теперь они определены в HTML 5, см. Здесь: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

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

Практические советы здесь: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Ответ 3

Нужен ли этот атрибут роли?

Ответ: да.

  • Атрибут role необходим для поддержки Accessible Rich Internet Applications (WAI-ARIA) для определения ролей в языках на основе XML, когда языки не определяют свой собственный атрибут роли.
  • Хотя по этой причине атрибут роли публикуется Рабочей группой по протоколам и форматам, он также имеет более общие случаи использования.

Он предоставляет вам:

  • доступность
  • Адаптация устройства
  • Серверная обработка
  • Сложное описание данных,... и т.д.

Ответ 4

Я понимаю, что это старый вопрос, но другое возможное соображение, в зависимости от ваших точных требований, заключается в том, что проверка https://validator.w3.org/ генерирует предупреждения следующим образом:

Предупреждение: роль формы не нужна для формы элемента.

Ответ 5

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

Ответ 6

Атрибут роли в основном улучшает доступность для людей, использующих программы чтения с экрана. В некоторых случаях мы используем его, например, доступность, адаптацию устройства, обработку на стороне сервера и сложное описание данных. Узнайте больше, нажмите: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute.

Ответ 7

Полезно для Bootstrap кнопок из привязок

<a href="#" class="btn btn-info" role="button">Link Button</a>

Отсюда: Кнопки Bootstrap