Что означает кнопка role =?

Ответ 1

Он указывает доступность (и другое) программного обеспечения, какова цель div. Подробнее здесь в черновик role спецификация атрибута.

Да, это просто семантический. Отправка события click на кнопку должна работать.

Более ранняя версия этого ответа (еще в 2011 году) сказала:

... но функция jQuery click не делает этого; он запускает только обработчики событий, которые были подключены к элементу с помощью jQuery, а не обработчиками, подключенными другими способами.

... и предоставил пример кода и вывод ниже.

Я не могу реплицировать результат сейчас (два года спустя). Даже если я вернусь к более ранним версиям jQuery, все они запускают обработчики jQuery, обработчики DOM0 и обработчики DOM2. Заказ не обязательно совпадает с реальным кликом и функцией jQuery click. Я пробовал версии jQuery 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6 и более поздние версии, такие как 1.7.1, 1.8.3, 1.9.1 и 1.11.3 (текущая версия 1.x на момент написания этой статьи). Я могу только сделать вывод, что это браузер, и я не знаю, какой браузер я использовал. (Сейчас я использую Chrome 26 и Firefox 20 для тестирования.)

Здесь тест, который показывает, что действительно, обработчики jQuery, обработчики DOM0 и обработчики DOM2 - все (начиная с этой записи!), вызванные jQuery click:

jQuery(function($) {
  var div;

  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);

  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways
  div = document.getElementById("theDiv");
  div.onclick = dom0Handler;
  if (div.addEventListener) {
    div.addEventListener('click', dom2Handler, false);
  } else if (div.attachEvent) {
    div.attachEvent('onclick', dom2Handler);
  }

  // Hook up a handler using jQuery
  $("#theDiv").click(jqueryHandler);

  // Trigger the click when our button is clicked
  $("#theButton").click(function() {
    display("Triggering <code>click</code>:");
    $("#theDiv").click();
  });

  function dom0Handler() {
    display("DOM0 handler triggered");
  }

  function dom2Handler() {
    display("DOM2 handler triggered");
  }

  function jqueryHandler() {
    display("jQuery handler triggered");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery <code>click</code> function.</div>
<input type='button' id='theButton' value='Click Me'>

Ответ 2

Атрибут role используется программным обеспечением доступности, чтобы знать, что делает div. Для получения дополнительной информации см. эту страницу.

Ответ 3

Это просто семантика.

Рекомендуется использовать собственные HTML-кнопки, используя тег <button>. Однако, если у вас есть настраиваемые элементы управления с помощью тегов <a> или <div>, рекомендуется использовать следующую информацию о role='button'.

• Запуск ответа

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

2. Фокус клавиатуры

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

3. Работоспособность

Пользовательский элемент управления должен реализовывать события onclick, а также onKeyDown. Кнопки можно активировать с помощью пробела. Следовательно, если вы добавляете роль в пользовательский элемент управления, вам необходимо самостоятельно обрабатывать эти события. Иначе семантика теряет смысл. Пользователь-скринсейдер попытается активировать кнопку с помощью пробела, но не может.

Стандартным синтаксисом для настраиваемого элемента управления с помощью role='button' является

<div role="button" tabindex="0" onclick="click_handler()" onKeyDown="keyhandler_for_space()">

tabindex="0" не требуется, если вы используете тег <a>, но это необходимо, если вы используете неактивный тэг, например <span> или <div>, чтобы вручную разрешить фокус.

Еще один полезный совет: если вы все еще прибегаете к созданию пользовательской кнопки, гораздо лучше использовать тег <a>, так как вы можете избежать обработчиков onclick.