Клавиша / esc

aria-disabled

Атрибут для неизменяемых интерактивных элементов, с которыми всё равно можно взаимодействовать.

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

Кратко

Скопировано

aria-disabled — это ARIA-атрибут, который указывает, что элемент интерфейса в данный момент недоступен для взаимодействия. Он позволяет разработчикам явно указать, что элемент неактивен, без изменения его DOM-структуры или удаления привязанных событий.

Так же работает HTML-атрибут disabled.

Пример

Скопировано

Пример с кнопкой, которую хотим временно сделать неактивной, не удаляя при этом обработчики событий:

        
          
          <button aria-disabled="true">Отправить</button>
          <button aria-disabled="true">Отправить</button>

        
        
          
        
      

Кнопка будет отображаться, но пользователь не сможет по ней кликнуть или сфокусироваться.

Как пишется

Скопировано

Добавьте к тегу атрибут aria-disabled с одним из значений:

  • true — элемент неактивен;
  • false (по умолчанию) — элемент активен, с ним можно взаимодействовать.

aria-disabled можно задавать только некоторым тегам и ролям:

Для HTML-тегов лучше использовать атрибут disabled вместо aria-disabled там, где он поддерживается.

Подводные камни и особенности

Скопировано
  • неактивные родительские элементы: если родительский элемент получает aria-disabled="true", его дочерние элементы также считаются неактивными;
  • CSS и JavaScript: чтобы полностью реализовать поведение неактивности, нужно использовать CSS для стилизации и JavaScript для управления состоянием, так как aria-disabled сам по себе не останавливает взаимодействие с элементом.

Особенности для ссылок

Скопировано

Для элементов <a>, которые не содержат атрибут href, aria-disabled="true" может быть использован для указания, что ссылка в текущем состоянии нефункциональна. Такой трюк используют для хлебных крошек. Так пользователи клавиатуры знают, где находятся сейчас, при этом не могут перейти по ссылке на текущую страницу. Например:

        
          
          <a href="#dogs">Товары для собак</a><a  role="link"  aria-disabled="true"  aria-current="page">  Товары для котов</a>
          <a href="#dogs">Товары для собак</a>

<a
  role="link"
  aria-disabled="true"
  aria-current="page"
>
  Товары для котов
</a>

        
        
          
        
      

В случае неактивной ссылки лучше не использовать href, и чтобы ссылка не потеряла свою роль, явно её задать с помощью атрибута role="link".

Демонстрация работы

Скопировано

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

Открыть демо в новой вкладке

Задействуем CSS и JavaScript

Скопировано

Использование aria-disabled отличается от атрибута disabled. ARIA-атрибут не останавливает все виды пользовательского взаимодействия с элементом на уровне браузера. Поэтому важно использовать CSS и JavaScript для управления состояниями элементов. Вот простой пример, как можно стилизовать и управлять элементом с aria-disabled:

        
          
          [aria-disabled="true"] {  opacity: 0.7;  cursor: not-allowed;}[aria-disabled="true"]:focus {  outline: none;}
          [aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}

[aria-disabled="true"]:focus {
  outline: none;
}

        
        
          
        
      
        
          
          document.querySelectorAll('[aria-disabled="true"]').forEach((element) => {  element.addEventListener('click', (e) => {    // Предотвращаем клики    e.preventDefault()  })})
          document.querySelectorAll('[aria-disabled="true"]').forEach((element) => {
  element.addEventListener('click', (e) => {
    // Предотвращаем клики
    e.preventDefault()
  })
})

        
        
          
        
      

Интеграция с фреймворками

Скопировано

В фреймворках, таких как React или Angular, вы можете интегрировать aria-disabled напрямую в ваш компонентный подход. Например, в React компоненте это может выглядеть так:

        
          
          function SaveButton({ isSaving }) {  return (    <button aria-disabled={isSaving ? 'true' : 'false'}>      {isSaving ? 'Saving...' : 'Save Changes'}    </button>  )}
          function SaveButton({ isSaving }) {
  return (
    <button aria-disabled={isSaving ? 'true' : 'false'}>
      {isSaving ? 'Saving...' : 'Save Changes'}
    </button>
  )
}

        
        
          
        
      

Как понять

Скопировано

На элементе с aria-disabled пользователи не могут сделать фокус, узнать о его роли и состоянии, а также скопировать из него данные. Такое поведение может быть у временно неактивных элементов. К примеру, когда в форме заполнены не все поля или какое-то действие в процессе выполнения.

С помощью aria-disabled можете создать гибкие и доступные интерфейсы. Помните, что для полной функциональности нужны CSS и JavaScript. Это не только делает сайт более доступным, но и улучшает пользовательский опыт в целом. Не забудьте также протестировать сайт со скринридерами. ARIA-разметка должна облегчать взаимодействие с интерфейсом всех пользователей, а не усложнять.

На практике

Скопировано

Игорь Теплостанский советует

Скопировано

🛠 На моей практике был случай с разработкой интерактивной карты мероприятия, где необходимо было временно отключать кнопки управления до загрузки всех данных. Для этого мы использовали aria-disabled в сочетании с визуальными изменениями и блокировкой событий через JavaScript. Это не только улучшило доступность, но и предотвратило возможные ошибки пользователей при раннем взаимодействии с картой.