Разное

Role html5: Атрибут role в HTML5

31.05.2021

Содержание

Атрибут role в HTML5

alert Сообщение с важной и, как правило срочной, информация. Также см. alertdialog и status.
alertdialog Сообщение, которое содержит важную информацию, и первоначальный акцент переходит элементу в диалоговом окне. Также см. alert и dialog.
application Область объявленная как веб-приложение, в отличие от веб-документа.
article Раздел состоящий из композиции, которая в свою очередь образует самостоятельную часть документа, страницы или сайта.
button Кнопка, позволяющая пользователю вызвать какие-либо действия. Также см. link.
checkbox		 Чекбокс, который имеет три возможных значения: истина, ложь, или смешанное.
columnheader Ячейка таблицы, содержащая заголовок для столбца.
combobox Вариация селекта; аналогично textbox, позволяющая пользователям печатать для выбора опции, или при печате добавить новую опцию к списку. Также см. listbox.
dialog Сообщение, предназначенное для прерывания обработки текующего приложения, для ввода пользователем какой-либо информации или требующее от него какое-либо действие. Также см. alertdialog.
directory Список ссылок на части группы, например содержание.
document Область, содержащая информацию, которая объявлена ??как содержимое документа, в отличие от веб-приложений.
form Ориентир области, которая содержит коллекцию элементов и объектов, которые, в целом, объединяются, чтобы создать форму. См. также search.
grid		 Сетка интерактивного управления, которая содержит элементы сведенные в таблицу данных, в виде строк и столбцов, как таблица.
gridcell Ячейки в сетке или древовидная сетка.
group Набор объектов пользовательского интерфейса, которые не предназначены для включения в итоговую страницу или содержимое, вспомогательных технологий.
heading Заголовок для раздела страницы.
img Контейнер для набора элементов, которые формируют изображение.
link Интерактивная ссылка на внутренний или внешний ресурс, который при активации заставляет браузер пользователя перейти к этому ресурсу. См. также button.
link Интерактивная ссылка на внутренний или внешний ресурс, который при активации приводит к переходу браузера пользователя к этому ресурсу. См. также button.
list
Группа неинтерактивных элементов списка. Также см. listbox.
listbox Виджет, который позволяет пользователю выбрать один или несколько элементов из списка вариантов. См. также combobox и list.
listitem Один элемент в списоке или содержании.
log Тип интерактивной области, где новая информация добавляется в осмысленном порядке, а старая может исчезнуть. См. также marquee.
marquee
Тип интерактивной области, где не существенная информация часто меняется. См. также log.
math Контент, который представляет собой математическое выражение.
menu Тип виджета, который предоставляет выбор списка вариантов для пользователя.
menubar Представление menu, которое обычно остается видимым и, как правило, представлено горизонтально.
menuitem Опции в группе выбора содержащиеся в menu или menubar.
menuitemcheckbox Чекбокс пункта menu, который имеет три возможных значения: истина, ложь, или смешанное.
menuitemradio Отмечаемый пункт меню в группе menuitemradio, из которых только один может быть выбран одновременно.
option Выбираемый элемент в списке выбора.
presentation Элемент чья семантически неявная роль не будет отображаться на доступности API.
progressbar Элемент, который отображает ход статуса задач, занимающих много времени.
radio Отмечаемый пункт в группе таких же пунктов, из которых только один может быть выбран одновременно.
radiogroup Группа переключателей.
region Большая область веб-страницы или документа, которую автор счел достаточно важной, чтобы включить в основную информацию страницы или оглавление, например, область страницы содержающая спортивную статистику событий онлайн.
row Ряд ячеек в grid.
rowgroup Группы, содержащие один или несколько элементов row в grid.
rowheader Ячейка содержащая заголовок для row в grid.
scrollbar Графический объект, который управляет прокруткой содержимого области просмотра, независимо от того, полностью ли содержание отображается в области просмотра.
separator Разделитель, который разделяет и отличает разделы содержимого или группы пунктов menuitems.
slider Интерфейс ввода для пользователя, когда пользователь выбирает значение из заданного диапазона.
spinbutton Форма диапазона, где пользователь может выбрать из числа дискретных решений.
status
Контейнер, содержание которого носит рекомендательный характер для информирования пользователя, но не является достаточно важным. Также см. alert.
tab Вкладка, представляющая из себя механизм для выбора вкладки необходимой пользователю.
tablist Список элементов tab, которые являются ссылками на tabpanel элементы.
tabpanel Контейнер для ресурсов связанных с tab, где каждый tab содержиться в tablist.
textbox
Поле ввода, которое предоставляет ввод в свободной форме текста.
timer Тип интерактивной области, содержащую числовой счетчик, который указывает на количество затраченного времени от начальной точки, или время, оставшееся до конечной точки.
toolbar Набор часто используемых функциональных кнопок, представленых в компактной визуальной форме.
tooltip Контекстное всплывающее окно, которое отображает описание элемента.
tree Тип списка, который может содержать подуровни вложенных групп, которые могут быть свернуты и расширены.
treegrid Сетка, чьи строки могут быть свернуты и расширины так же как и в tree.
treeitem Опция элемента tree. Этот элемент внутри tree, может быть свернут или расширен, если имеет вложенный подуровень.

Атрибут role и его значения

Атрибут  role в HTML5 позволяет наиболее четко указать семантическое предназначение блока/элемента страницы при взаимодействии пользователя с сайтом.

<div role='banner'>...</div>
<nav role='navigation'>
    <ul>
    ...
    </ul>
</nav>

Возможные значения атрибута role=»

banner — содержит главный заголовок или внутренний заголовок страницы. Например логотип и название сайта. Рекомендуется использовать не больше одного раза на странице.
article — Раздел состоящий из композиции, которая в свою очередь образует самостоятельную часть документа, страницы или сайта.
complementary — информационный блок, отделенный от основного содержания ресурса.
contentinfo — обобщающая информация о содержании страницы (к примеру, footer). Рекомендуется использовать не больше одного раза на странице.
definition — указывает определение термина или понятия.
main — выступает в качестве основного содержания документа. Рекомендуется использовать не больше одного раза на странице.
navigation — набор элементов предназначенных для навигации по документу или связанным документам. Рекомендуется использовать не больше одного раза на странице.
note — заметка ( вспомогательная информация) к основному содержанию ресурса.
search — указывает область для поиска по содержимому.
alert — Сообщение с важной и, как правило срочной, информация. Также см. alertdialog и status.
alertdialog — Сообщение, которое содержит важную информацию, и первоначальный акцент переходит элементу в диалоговом окне. Также см. alert и dialog.
application — Область объявленная как веб-приложение, в отличие от веб-документа.
button — Кнопка, позволяющая пользователю вызвать какие-либо действия. Также см. link.
checkbox — Чекбокс, который имеет три возможных значения: истина, ложь, или смешанное.
columnheader — Ячейка таблицы, содержащая заголовок для столбца.
combobox — Вариация селекта; аналогично textbox, позволяющая пользователям печатать для выбора опции, или при печате добавить новую опцию к списку. Также см. listbox.
dialog — Сообщение, предназначенное для прерывания обработки текующего приложения, для ввода пользователем какой-либо информации или требующее от него какое-либо действие. Также см. alertdialog.
directory — Список ссылок на части группы, например содержание.
document — Область, содержащая информацию, которая объявлена как содержимое документа, в отличие от веб-приложений.
form — Ориентир области, которая содержит коллекцию элементов и объектов, которые, в целом, объединяются, чтобы создать форму. См. также search.
grid — Сетка интерактивного управления, которая содержит элементы сведенные в таблицу данных, в виде строк и столбцов, как таблица.
gridcell — Ячейки в сетке или древовидная сетка.
group — Набор объектов пользовательского интерфейса, которые не предназначены для включения в итоговую страницу или содержимое, вспомогательных технологий.
heading — Заголовок для раздела страницы.
img — Контейнер для набора элементов, которые формируют изображение.
link — Интерактивная ссылка на внутренний или внешний ресурс, который при активации заставляет браузер пользователя перейти к этому ресурсу. См. также button.
list — Группа неинтерактивных элементов списка. Также см. listbox.
listbox — Виджет, который позволяет пользователю выбрать один или несколько элементов из списка вариантов. См. также combobox и list.
listitem — Один элемент в списоке или содержании.
log — Тип интерактивной области, где новая информация добавляется в осмысленном порядке, а старая может исчезнуть. См. также marquee.
marquee — Тип интерактивной области, где не существенная информация часто меняется. См. также log.
math — Контент, который представляет собой математическое выражение.
menu — Тип виджета, который предоставляет выбор списка вариантов для пользователя.
menubar — Представление menu, которое обычно остается видимым и, как правило, представлено горизонтально.
menuitem — Опции в группе выбора содержащиеся в menu или menubar.
menuitemcheckbox — Чекбокс пункта menu, который имеет три возможных значения: истина, ложь, или смешанное.
menuitemradio — Отмечаемый пункт меню в группе menuitemradio, из которых только один может быть выбран одновременно.
option — Выбираемый элемент в списке выбора.
presentation — Элемент чья семантически неявная роль не будет отображаться на доступности API.
progressbar — Элемент, который отображает ход статуса задач, занимающих много времени.
radio — Отмечаемый пункт в группе таких же пунктов, из которых только один может быть выбран одновременно.
radiogroup — Группа переключателей.
region — Большая область веб-страницы или документа, которую автор счел достаточно важной, чтобы включить в основную информацию страницы или оглавление, например, область страницы содержающая спортивную статистику событий онлайн.
row — Ряд ячеек в grid.
rowgroup — Группы, содержащие один или несколько элементов row в grid.
rowheader — Ячейка содержащая заголовок для row в grid.
scrollbar — Графический объект, который управляет прокруткой содержимого области просмотра, независимо от того, полностью ли содержание отображается в области просмотра.
separator — Разделитель, который разделяет и отличает разделы содержимого или группы пунктов menuitems.
slider — Интерфейс ввода для пользователя, когда пользователь выбирает значение из заданного диапазона.
spinbutton — Форма диапазона, где пользователь может выбрать из числа дискретных решений.
status — Контейнер, содержание которого носит рекомендательный характер для информирования пользователя, но не является достаточно важным. Также см. alert.
tab — Вкладка, представляющая из себя механизм для выбора вкладки необходимой пользователю.
tablist — Список элементов tab, которые являются ссылками на tabpanel элементы.
tabpanel — Контейнер для ресурсов связанных с tab, где каждый tab содержиться в tablist.
textbox — Поле ввода, которое предоставляет ввод в свободной форме текста.
timer — Тип интерактивной области, содержащую числовой счетчик, который указывает на количество затраченного времени от начальной точки, или время, оставшееся до конечной точки.
toolbar — Набор часто используемых функциональных кнопок, представленых в компактной визуальной форме.
tooltip — Контекстное всплывающее окно, которое отображает описание элемента.
tree — Тип списка, который может содержать подуровни вложенных групп, которые могут быть свернуты и расширены.
treegrid — Сетка, чьи строки могут быть свернуты и расширины так же как и в tree.
treeitem — Опция элемента tree. Этот элемент внутри tree, может быть свернут или расширен, если имеет вложенный подуровень.

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

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

http://www.w3.org/TR/ вай-Ария/

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

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

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

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

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

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

[Обновление 7 лет спустя: убран селектор*, чтобы сделать некоторых комментаторов счастливыми, так как старая причуда браузера, которая требовала универсального селектора на селекторах атрибутов, не нужна в 2020 году.]

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

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

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

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

Причина #3. обновление 7 лет спустя (2020): Как отметил по крайней мере один комментатор, теперь это очень полезно для пользовательских элементов, и некоторые технические работы ведутся для определения роли доступности по умолчанию веб-компонента. Даже если/как только этот API будет стандартизирован, может возникнуть необходимость переопределить роль компонента по умолчанию.

Примечание/Ответ

Вы тоже писали:

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

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

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

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

Необходимы ли атрибуты ‘role’ в HTML5?



Пытаясь идти в ногу с HTML5 ,я убедился, что проверяю все свои наценки с помощью инструмента W3 validator. Недавно я начал добавлять атрибут role к элементам. Тем не менее, я заметил, что следующие предупреждения всплывают снова и снова:

Роль button не нужна для элемента button .

Роль navigation не нужна для элемента nav .

Но точно так же на веб-сайте W3C, касающемся ARIA в HTML, говорится, что роль button применима к элементу <button> и что роль navigation применима только к элементу <nav> .

Это подводит меня к моему вопросу: являются ли атрибуты role необходимыми для роли из HTML5? Какой у меня был бы сценарий, по которому мне нужно было бы их использовать?

html wai-aria
Поделиться Источник David     15 февраля 2018 в 19:29

2 ответа

  • Действительно ли необходимы role=»radiogroup» и role=»radio»?

    Есть некоторые обучающие сайты ARIA, использующие несемантические markup и некоторые javascript для демострации использования role=radiogroup и role=radio , такие как следующий пример: <ul role=radiogroup> <li tabindex=-1 role=radio aria-checked=false> <img role=presentation…

  • html5 doctype атрибуты

    Я обновил свои сайты doctype с XHTML до HTML5, В настоящее время у меня есть: <!DOCTYPE html> <html lang=en-GB xml:lang=en-GB dir=ltr xmlns=http://www.w3.org/1999/xhtml> мой вопрос заключается в том, требуются ли атрибуты xml:lang и xmlns по-прежнему, поскольку я мигрировал с xml на…


5

Первое правило ARIA гласит:

Если вы можете использовать собственный элемент HTML [HTML51] или атрибут с уже встроенной семантикой и поведением, вместо того чтобы переориентировать элемент и добавить роль, состояние или свойство ARIA, чтобы сделать его доступным, сделайте это.

Если вы просматриваете навигационную роль в WAI-ARIA, она утверждает, что HTML Nav -это связанная концепция и что navigation=role уже является ролью по умолчанию, поэтому нет необходимости устанавливать ее вручную самостоятельно:

Допустимые значения атрибутов роли ARIA: роль навигации (по умолчанию-не устанавливается).

Таким образом , роль навигации применима к <nav>, но она уже установлена по умолчанию, так что вам не нужно делать это самостоятельно.

Подводя итог вашему вопросу, нет, не устанавливайте роли, если они уже подразумеваются в семантике HTML5. Вы можете проверить веб-сайт ниже, который, как мне кажется, описывает некоторые хорошие моменты относительно того, когда вы should/shouldn’t используете ARIA (это не все об атрибуте роли, но он охватывает и это):
Что такое вай-Ария, что она делает для меня, а что нет?

Поделиться J. Afarian     15 февраля 2018 в 22:42

Поделиться Steve Faulkner     17 февраля 2018 в 10:20

Похожие вопросы:


Являются ли атрибуты формы HTML5, созданные MVC3 ненавязчивой проверкой, в порядке?

Я смотрел на ненавязчивую проверку MVC3. Такие атрибуты прикрепляются к входным элементам формы: data-val=true //declares that the element should be validated data-val-required=this field is…


Почему необходимы атрибуты «for» для меток форм?

Почему необходимы атрибуты for для меток форм? Мне они никогда не были нужны


Может ли кто-нибудь дать мне больше информации о том, что делают атрибуты The role и aria-* HTML5?

Я хочу знать, для чего предназначены роль и атрибуты aria-* в HTML5. Спасибо.


Действительно ли необходимы role=»radiogroup» и role=»radio»?

Есть некоторые обучающие сайты ARIA, использующие несемантические markup и некоторые javascript для демострации использования role=radiogroup и role=radio , такие как следующий пример: <ul…


html5 doctype атрибуты

Я обновил свои сайты doctype с XHTML до HTML5, В настоящее время у меня есть: <!DOCTYPE html> <html lang=en-GB xml:lang=en-GB dir=ltr xmlns=http://www.w3.org/1999/xhtml> мой вопрос…


Html5: какие атрибуты я изменяю с html, css и javascript соответственно?

Я бэкэнд-программист, пытающийся выучить HTML5. Интересно, как узнать, какие атрибуты могут быть изменены непосредственно в html и какие атрибуты должны быть изменены с помощью Javascript. Или с…


Браузеры, поддерживающие HTML5; перестанут ли они поддерживать теги и атрибуты, которые не поддерживаются HTML5?

Для тега <tr> ; ни один из атрибутов (align, bgcolor, char, charoff, valign) не поддерживается в HTML5. Перестанет ли когда-нибудь какой-либо браузер поддерживать его?Перестанут ли атрибуты…


Необходимы ли атрибуты noreturn для выхода из функций?

Необходимы ли атрибуты noreturn Для никогда не возвращающихся функций, или это просто (возможно, преждевременно? — по крайней мере для выходов, я не представляю, зачем там оптимизировать)…


Поддерживает ли Rails 4 все новые атрибуты HTML5 <input> ?

Поддерживает ли Rails 4 все новые атрибуты HTML5 <input> ? Я заметил, что атрибуты HTML5 <input>, такие как min & max и step , поддерживаются в Rails 4 : <%=…


Могу ли я использовать атрибуты role и aria в xhtml 1.0

Я использую XHTML 1.0 для веб-сайта. Я хочу сделать его доступным, поэтому я хочу добавить атрибуты role и aria в свой markup. Поможет ли это в любом случае вспомогательным технологиям лучше…

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

Большинство ролей, которые вы видите, были определены как часть 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 и т. Д.).

Эффективное использование ARIA в HTML5

ARIA это аббревиатура от Accessible Rich Internet Applications (доступные насыщенные интернет-приложения), использование этого стандарта позволяет сделать сайт более доступным для людей с ограниченными способностями, например, с нарушениями слуха или зрения. Посмотрим, что могут сделать разработчики, чтобы облегчить им жизнь.

Один из способов использования этого стандарта — добавление ARIA в разметку HTML. Вы наверняка знакомы с семантическими элементами HTML такими как nav, button или header. Легко понять, для чего можно использовать эти элементы. Они дают больше смысла содержимому страницы и мы можем использовать комбинацию этих элементов и ARIA в разметке. Однако для совместного их использования стоит учитывать несколько вещей.

Роли ARIA

Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:

<header role="banner">

Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.

<div role="contentinfo">
    This website was built by Georgie.
</div>

Оповещение будет выглядеть так:

<div role="alert">
    Please upgrade to the latest version of your browser for the best experience.
</div>

role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с display:none to display:block

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

<span role="presentation"></span>

Элементы span (как и div) в большинстве случаев не нуждаются в указании role=”presentation”, так как не являются объектами в дереве доступности браузера (accessibility tree). Но для семантических элементов типа h2—h6 это имеет смысл.

Атрибуты ARIA

Атрибуты ARIA немного отличаются от ролей ARIA. Они также добавляются в разметку, но существует уже определенный диапазон атрибутов ARIA. Все атрибуты используют префикс aria- и делятся на две группы: состояния и свойства.

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

Пример ARIA атрибута-состояния это aria-checked, используемый в таких элементах как чекбоксы и радиокнопки.

<input type="radio" aria-checked="true">

На самом деле использование атрибута ARIA в нативной радио-кнопке излишне, связывание input type="radio" и aria-checked производится автоматически.

Образец атрибута-свойства это aria-label. Этот атрибут используется, когда метка элемента формы не видима на страница (это может быть продиктовано дизайном или просто не иметь смысла). Для случаев, когда текст метки видим, подходит атрибут aria-labelledby. Он используется также как и предыдущий, значение этого атрибута совпадает со значение id метки.

<label>Address</label>
<input type="text" aria-labelledby="address">

Это также можно сделать в элементе figure.

<figure aria-labelledby="operahouse_1">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House">
    <figcaption>We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Больше о поддерживаемых атрибутах-состояниях и атрибутах-свойствах можно узнать на сайте консорциума.

Правила ARIA

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

Старайтесь максимально использовать семантические элементы HTML

Семантика ARIA по умолчанию ссылается на семантику, применяемую к элементам в браузере. Такие элементы как nav, article и button обладают уже заложенными ролями role="navigation", role="article" и role="button" соответственно. До появления семантических элементов HTML было распространена разметка по типу <div role="navigation">. Теперь мы можем использовать nav вместо div и нам не нужно добавлять к семантическому элементу role="navigation", потому как эта роль в нем уже подразумевается по умолчанию. Вы можете проверить по таблице W3C наличие и отсутствие атрибутов ARIA у искомого элемента.

У элемента может быть только одна роль

У элемента не может быть множественных ролей. Согласно определению, роль это:

Основной индикатор типа. Эта семантическая ассоциация позволяет инструментам отображать и поддерживать взаимодействие с объектам в манере, соответствующей ожиданиям пользователя относительно остальных объектов того же типа.

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

Не изменяйте нативную семантику

Вы не должны применять роль, не соответствующую семантике элемента, так как добавленная роль переписывает нативную семантику элемента. Например:

<footer role="button">

Однако второе правило ARIA позволяет в случае необходимости использовать вложение элементов.

<footer><button>Purchase this e-book</button></footer>

Как еще можно сделать разметку более доступной?

Максимально используйте семантические элементы

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

Одним из моих любимых примеров является тег blockquote, который часто используется не по назначению. Есть другие похожие элементы, служащие конкретным целям:

  • q — используется для указания строчных цитат, таких как цитаты внутри текста параграфов.
  • cite — используется для цитирования творческой работы с текстом, например, стихов.

Вот пример с использованием обоих упомянутых элементов:

<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>

Существует еще множество элементов HTML, которые вы, возможно, не учитываете, включая несколько новых, поэтому еще раз рекомендую оценить возможности.

Атрибут

alt

Это часто забываемая часть разметки, которая может серьезно сказаться на доступности, особенно в случае скринридеров. Этот атрибут появился в спецификации со времен HTML2 и описывается следующим образом:

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

По причине ограничений или предпочтений пользователя. Независимо от причин, по которым не загружается изображение, у пользователей с ослабленным зрением на самом деле нет предпочтений. Они просто испытывают проблемы при просмотре изображения. Хотя спецификация ничего не говорит о термине “доступность”, она предполагает, что изображение не может быть загружено как следует, а у пользователя есть возможность отключить загрузку изображения. Хотя мы живем в мире, в котором второй вариант кажется менее вероятным, мы не можем предугадать, что делает пользователь на другом крае. Поэтому мы должны предлагать пользователям альтернативу.

Люди часто заполняют атрибут alt не информативно, например, пишут текст типа “собака” для фотографии своей собаки, играющей в парке. К сожалению, этот текст не нарисует никакой картины для слабовидящих. Следующий подход более приемлем:

<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park">

Отметьте, что атрибут alt создан не для того же, что и элемент figcaption: цель alt это создание альтернативного текста для изображения, а figcaption это просто правильный заголовок для figure. Если развивать наш предыдущий пример у figcaption следующий текст:

<figcaption>Isn’t Bobby cute?</figcaption>

Пример разметки с использованием семантического HTML и ARIA, ориентированный на доступность

Если вы смотрели на примеры в этой статье, то вы ожидаете увидеть в качестве образца следующее:

  • использование семантического HTML для изображения и заголовка
  • целевое использование элемента cite
  • добавление атрибута alt
  • использование одного из атрибутов ARIA
<figure aria-labelledby="operahouse_1">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House"/>
    <figcaption>We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

Заключение

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

Дополнительные материалы

Зачем Использовать Атрибут Role В Html5

Я создал веб-страницу с помощью html5.

Я использовал исходный код из бутстрапа.

Например: role="main", role ="navigation", role = "document" и т.д.

Если я удалю этот атрибут из своего кода, страница не изменилась.

Итак, я хочу знать: какова цель атрибута «role»?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div role="navigation">
<div>
<div>
<h2><img src="img/logo.png" /></h2>
</div>
</div>
</div>
<div role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div>
<div>
<img src="img/banner.png"/>
<img src="img/issue-no-img.png"/>
<span>Issue No.<br /><b>376</b></span>
</div>
<div>
<div>
<img src="img/left-note-img.png"/>
</div>
<div>
<p><span> NEW! </span> <span>JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h2>DOT NET ARTICLES</h2>
</span>


                  <span><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div>
<div>
<input type="text" placeholder="Search..." />
<span></span>
</div>
</div>
</div>
<hr/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching?  Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay new book, available now from New Riders.
</p>
<hr>
<h2>More from A List Apart</h2>
<hr>
<div>
<div>
<h3>Columnists</h3>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p>The Alternative is Nothing</p>
<img src="img/thumb1.jpg" /> 
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div>
<h3>From the Blog</h3>
<p>Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA recent "Hack Your Maps." Happy Cog Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div>
<p>Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div>
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div>
<img src="img/mothers-day.jpg" /> <br/>
<p>Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div>
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the <a href ="#">Job Board ></a>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div>
<div>
<div>
<span><img src="img/article-logo.png" /></span>
<span>ARTICLES</span>
<span>COLUMNS</span>
<span>BLOG</span>
<span>TOPICS</span>
</div>
<div class = "list-footer"> 
<span>ABOUT</span>
<span>AUTHORS</span>
<span>MASTHEAD</span>
<span>CONTRIBUTE</span>
<span>STYLE GUIDE</span>
<span>CONTACT</span>
<span>SPONSORSHIPS</span>
</div>
<hr/>



            <div>
<div>
<img src="img/dot-net-ad.jpg"/> 
<h4>.NET Training</h4>
<p>If you have a .NET question on a topic that  not covered by other more specific forums.</p>
<a href="#">ask here. ></a> 
</div>
<div>
<img src="img/shopify-expert-ad.jpg"/> 
<h4>Shopify Expert</h4>
<p>Unique custom made Shopify theme and tweaks.</p>
<a href="#">click to view</a>
</div>
</div>
<hr />
<div>
<p>Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>

ролей WAI-ARIA — доступность | MDN

На этой странице перечислены справочные страницы, охватывающие все роли WAI-ARIA, обсуждаемые в MDN. Полный список ролей см. В разделе Использование ARIA: роли, состояния и свойства

.
ARIA: роль предупреждения
Роль предупреждения может использоваться, чтобы сообщить пользователю, что элемент был динамически обновлен. Программы чтения с экрана мгновенно начнут считывать обновленное содержимое при добавлении роли. Если ожидается, что пользователь закроет предупреждение, вместо этого следует использовать роль alerttdialog.
ARIA: роль приложения
Роль приложения указывает вспомогательным технологиям, что элемент и все его дочерние элементы должны обрабатываться так же, как настольное приложение, и не следует использовать традиционные методы интерпретации HTML. Эту роль следует использовать только для определения очень динамичных и настольных веб-приложений.
ARIA: роль статьи
Роль статьи указывает раздел страницы, который может легко стоять отдельно на странице, в документе или на веб-сайте.Обычно он устанавливается для связанных элементов контента, таких как комментарии, сообщения на форуме, газетные статьи или другие элементы, сгруппированные вместе на одной странице.
ARIA: роль баннера
Роль баннера представляет собой общий и информативный контент, часто размещаемый в начале страницы. Обычно это логотип, название компании, значок поиска, фотография, относящаяся к странице, или слоган.
ARIA: роль кнопки
Роль кнопки должна использоваться для интерактивных элементов, которые вызывают ответ при активации пользователем.Добавление role = "button" заставит элемент отображаться как кнопка для чтения с экрана. Эту роль можно использовать в сочетании с атрибутом aria -olved для создания переключателей.
ARIA: роль ячейки
Значение ячейки атрибута роли ARIA определяет элемент как ячейку в табличном контейнере, который не содержит информацию заголовка столбца или строки. Для поддержки ячейка должна быть вложена в элемент с ролью , строка .
ARIA: роль флажка
Роль флажка используется для интерактивных элементов управления. Элементы, содержащие role = "checkbox" , должны также включать атрибут aria-checked , чтобы показать состояние флажка для вспомогательных технологий.
ARIA: роль комментария
Комментарий роль ориентира семантически обозначает комментарий / реакцию на некоторый контент на странице или на предыдущий комментарий.
ARIA: дополнительная роль
Дополнительная роль ориентира используется для обозначения вспомогательного раздела, который относится к основному контенту, но может стоять отдельно при разделении.Эти разделы часто представлены в виде боковых панелей или полей для выноски. Если возможно, используйте вместо него HTML-элемент
ARIA: роль contentinfo
Роль ориентира contentinfo используется для идентификации информации, повторяющейся в конце каждой страницы веб-сайта, включая информацию об авторских правах, навигационные ссылки и заявления о конфиденциальности. Этот раздел обычно называют нижним колонтитулом.
ARIA: роль диалога
Роль диалога используется для разметки диалогового окна или окна приложения на основе HTML, которое отделяет контент или пользовательский интерфейс от остальной части веб-приложения или страницы.Диалоги обычно размещаются поверх остального содержимого страницы с помощью наложения. Диалоги могут быть либо немодальными (все еще можно взаимодействовать с содержимым вне диалогового окна), либо модальными (можно взаимодействовать только с содержимым диалогового окна).
ARIA: роль документа
Обычно используется в сложных составных виджетах или приложениях, документ роль может информировать вспомогательные технологии о переключении контекста в режим чтения: роль документа сообщает вспомогательным технологиям с режимами чтения или просмотра для использования режим документа для чтения содержимого, содержащегося в этом элементе.
ARIA: роль ленты
Лента - это динамический прокручиваемый список из статей , в котором статьи добавляются или удаляются с любого конца списка по мере прокрутки пользователя. Канал позволяет программам чтения с экрана использовать курсор чтения режима просмотра для чтения и прокрутки потока богатого контента, который может продолжать прокручиваться бесконечно, загружая больше контента по мере чтения пользователем.
ARIA: роль фигуры
Роль фигуры ARIA может использоваться для идентификации фигуры внутри содержимого страницы, где соответствующая семантика еще не существует.Фигура обычно считается одним или несколькими изображениями, фрагментами кода или другим контентом, который передает информацию другим способом, чем обычный поток текста.
ARIA: роль формы
Роль ориентира формы может использоваться для идентификации группы элементов на странице, которые обеспечивают функциональность, эквивалентную HTML-форме.
ARIA: роль сетки
Роль сетки предназначена для виджета, который содержит одну или несколько строк ячеек. Положение каждой ячейки имеет значение, и его можно сфокусировать с помощью ввода с клавиатуры.
ARIA: роль gridcell
Роль gridcell используется для создания ячейки в сетке или древовидной сетке. Он предназначен для имитации функциональности элемента HTML td для группировки информации в виде таблицы.
ARIA: роль заголовка
Роль заголовка определяет этот элемент как заголовок страницы или раздела. Чтобы страница была более структурированной, необходимо также предусмотреть уровень для обозначения взаимосвязей между разделами.
ARIA: роль img
Роль ARIA img может использоваться для идентификации нескольких элементов внутри содержимого страницы, которые следует рассматривать как одно изображение.Эти элементы могут быть изображениями, фрагментами кода, текстом, смайликами или другим контентом, который можно комбинировать для визуального представления информации.
ARIA: роль списка
Роль списка ARIA может использоваться для идентификации списка элементов. Обычно он используется вместе с ролью listitem , которая используется для идентификации элемента списка, содержащегося внутри списка.
ARIA: роль списка
Роль списка используется для списков, из которых пользователь может выбрать один или несколько статических элементов, которые, в отличие от элементов HTML