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.

Как понять

Секция статьи "Как понять"

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