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

Question

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

Например:

<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?

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

Любые мысли по этому поводу?

Answer 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, чтобы избежать класс-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 являются действительными роли, и поэтому роль ссылка будет применяться, поскольку речь идет о первом. Если вы используете пользовательские роли, убедитесь, что они не вступают в противоречие с какой-либо определенной роли в ВСС или на языке хоста, который вы используете (HTML, SVG, MathML и т.д.)

Answer 2

Как я понимаю, роли были первоначально определены XHTML, но были устаревшими. Тем не менее, они теперь определяются HTML 5, см. Здесь: http://www.w3.org/TR/wai-aria/complete#roles

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

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

Answer 3

Bootstrap Полезно для кнопок от якорей

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

Отсюда: Bootstrap Buttons

Answer 4

ли атрибут необходима эта роль?

Да.

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

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

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