button

Как превратить элемент в кнопку с помощью WAI-ARIA.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

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

Роль button по умолчанию есть у <button>, <summary> и <input> c типами button, image, reset, submit.

Пример

Скопировано
        
          
          <div role="button">Оплатить</div>
          <div role="button">Оплатить</div>

        
        
          
        
      

Как пишется

Скопировано

Добавьте к тегу role="button". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

Лучше использовать <button>, <summary> или <input> с типами button, image, reset, submit вместо роли button. Теги ведут себя как ссылки по умолчанию. Если используете роль button, то не обойтись без JavaScript.

Для button можно использовать все глобальные ARIA-атрибуты и пару атрибутов виджетовaria-disabled, aria-haspopup, aria-expanded и aria-pressed.

Как понять

Скопировано

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