Мне нужна роль = "button" на кнопке <button>?

Я заметил во всех примерах Bootstrap, используя элементы button, они включают role="button" (и type="button"), например:

<div class="dropdown">
    <button id="dLabel" type="button" role="button" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false">
        Dropdown trigger <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
</div>

Не будет ли программное обеспечение доступности уже знать, что элемент button должен действовать как кнопка? Есть ли какая-то причина, по которой я должен включать role="button" и/или type="button" в свой код?

Ответы

Ответ 1

Многие элементы HTML5 имеют неявную семантику ARIA по умолчанию и явно устанавливают эти значения по умолчанию: " ненужно и не рекомендуется.

Глядя на элемент button, вы можете видеть, что он имеет button роль по умолчанию.

Итак, установка role="button" "не рекомендуется", но разрешена. Это может помочь более старым пользовательским агентам, поддерживающим WAI-ARIA, но не HTML5.

Ответ 2

TL; DR Для данного случая необходимо указать role=button, потому что он ведет себя как кнопка переключения. type=button также следует использовать.

Все кнопки Bootstrap не используют кнопку role =

Информация в вопросе о том, что все кнопки в примерах Bootstrap используют role=button, неверна. Только кнопки, которые логически ведут себя как кнопки переключения, обозначаются как таковые.

Использование кнопки role = на элементе кнопки

Вам вообще не нужно использовать role=button, поскольку элементы кнопки имеют сильную родную семантику. Кроме того, согласно примечанию об использовании ARIA Использование WAI-ARIA в HTML:

Функция языка HTML: кнопка

Сеантика по умолчанию ARIA: role = button

Если авторы явно определяют семантику по умолчанию ARIA? НЕТ (примечание 0a)

Примечание 0a: YES Если атрибут, нажатый на арию, используется на элементе кнопки

Итак, вы должны установить роль для кнопок переключения, но не иначе.

Использование кнопки type = на кнопке

Так как в вопросе также упоминается type=button, я уточню. Согласно разделу на кнопках в спецификации W3C HTML5, отсутствующее значение по умолчанию для типа элементов кнопки type=submit, поведение активации которого отправьте владельцу формы, если он есть. Не существует активационного поведения, связанного с type=button.

Следовательно, для указанного случая необходимо указать type=button.

Ответ 3

Тег <button> может быть одним из трех:

  • Регулярная кнопка, которая делает то, что вы указываете при нажатии (type = button).
  • Кнопка отправки, которая отправляет форму при нажатии (type = submit).
  • Кнопка reset, которая сбрасывает форму до ее внутренних значений при нажатии (type = reset).

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

http://www.w3schools.com/tags/att_button_type.asp

Роль не обязательно должна быть включена, но она хороша для программного обеспечения accessibilty.

Итак, вы должны их включить? Нет, вы этого не делаете, но обычно это целесообразно.

Ответ 4

Здесь скажите:

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

Возможные последствия для пользовательских агентов и вспомогательных технологий

Когда используется роль кнопки, пользовательские агенты должны выставлять элемент в качестве элемента управления кнопки в API доступности операционной системы. Считыватели экрана должны объявить элемент как кнопку и описать его доступное имя. Программное обеспечение распознавания речи должно позволить кнопке активироваться, произнеся "click", а затем доступное имя кнопки. Примечание. Мнения могут отличаться от того, как вспомогательные технологии должны обрабатывать эту технику. Представленная выше информация является одним из таких мнений и поэтому не является нормативной.

Затем вы должны добавить его. Чтобы выставить его пользователю. Но не является нормативным.

Ответ 5

Согласно W3C Html5 Button

Недопустимое значение по умолчанию - это состояние кнопки "Отправить".

Если атрибут type находится в состоянии кнопки отправки, элемент представляет собой кнопку отправки.

Если вы не собираетесь использовать кнопки для отправки формы, вам нужно явно установить type="button" как опустить это, как указано в спецификации W3C, она будет действовать как кнопка отправки, будет отправлять вашу форму. Чтобы избежать ненужных отправлений, вам необходимо явно установить type="button" на <button> s.

Поскольку большинство кнопок бутстрапа предназначены для запуска функции javascript или подобного поведения, чтобы избежать случайного непреднамеренного представления поведения при копировании кода и вставке с именем нормализации с хорошей практикой, добавляются атрибуты type="button" и role="button" до <button>

Ответ 6

Роль = "button"

Это не обязательно для Bootstrap

Ответ 7

Требования и рекомендации теперь намного более подробно описаны в "ARIA в HTML"

В следующей таблице приведены нормативные требования соответствия документов для каждого элемента для использования разметки ARIA в документах HTML и описывается неявная семантика ARIA, которая применяется к элементам HTML, как определено в спецификации сопоставлений HTML Accessibility API Mappings 1.0 [html-aam-1.0].

https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html