Я постоянно вижу ролевые атрибуты в работах некоторых людей. Я тоже использую их, но не уверен в их эффективности.
Например:
<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?
Список ролей можно найти здесь, но я вижу, что некоторые люди придумывают свои собственные. Допустимо ли это или правильно использовать атрибут role?
Есть ли какие-нибудь мысли по этому поводу?
Большинство ролей, которые вы видите, были определены в рамках 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, но еще не внедрили роль родного элемента.
Например, роль "main" поддерживается в браузерах уже много лет, но в HTML5 она появилась относительно недавно, поэтому многие браузеры еще не поддерживают семантику для <main>
.
<main role="main">…</main>
Технически это избыточно, но помогает некоторым пользователям и не вредит никому. Через несколько лет эта техника, скорее всего, станет ненужной.
Вы также написали:
Я вижу, что некоторые люди придумывают свои собственные. Разрешено ли это или это правильное использование атрибута роли?
Это правильное использование атрибута, если только реальная роль не включена. Браузеры будут применять первую распознанную роль в списке маркеров.
<span role="foo link note bar">...</a>
Из этого списка только link
и note
являются допустимыми ролями, поэтому будет применена роль link, так как она стоит первой. Если вы используете пользовательские роли, убедитесь, что они не конфликтуют с какой-либо определенной ролью в 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/
Необходим ли этот атрибут роли?
Ответ: Да.
Он обеспечивает:
Я понимаю, что это старый вопрос, но еще можно рассмотреть в зависимости от ваших точных требований, что проверкой на https://validator.w3.org/ генерирует предупреждения следующим образом:
предупреждение: роль форма является необходимым для форма элемента.
Атрибут Role главным образом улучшить доступность для людей, использующих программы чтения с экрана. Для некоторых случаях мы ее используем, такие как доступность, устройство адаптации,обработки на стороне сервера, и комплексное описание данных. Узнать больше, нажмите: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute.