Какова цель атрибута «роль» в 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?

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

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

Большинство ролей, которые вы видите, были определены как часть ARIA 1.0, а затем включены в HTML5. Некоторые из новых элементов HTML5 (dialog, main и т. Д.) Даже основаны на исходных ролях 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 и т. Д.).

Насколько я понимаю, роли были первоначально определены 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/

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

Ответ: да .

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

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

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

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

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

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