aria-disabled

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

• <button>, <summary>, <input> с типами button, image, reset, submit или для роли button;
• <a> или link;
• <details>, <fieldset>, <optgroup> или group;
• <hr> или separator;
• <div>, <span> или generic;
• tab;
• scrollbar;
• application;
• gridcell;
• menuitem.

Для 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".

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

Использование 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. Это не только улучшило доступность, но и предотвратило возможные ошибки пользователей при раннем взаимодействии с картой.