Атрибут aria-disabled16.05.2024 16:15

Введение в ARIA

ARIA (Accessible Rich Internet Applications) — это спецификация, разработанная W3C, которая помогает сделать веб-контент более доступным для людей с ограниченными возможностями. Она предлагает множество атрибутов, которые можно добавлять к HTML-элементам, чтобы улучшить их доступность и интерактивность.

Кратко

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

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

Пример

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

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

Как пишется

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

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

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

или link;
,
, или group;
или separator;
, или generic;
tab;
scrollbar;
application;
gridcell;
menuitem.

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

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

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

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

Для элементов , которые не содержат атрибут href, aria-disabled="true" может быть использован для указания, что ссылка в текущем состоянии нефункциональна, например:

Больше не кликабельно

Как понять

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

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

Включение CSS и JavaScript для полного функционала

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

Вот простая демонстрация, как можно стилизовать и управлять элементом с aria-disabled:

  [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(); // Предотвращаем клики
    })
  })

Простой пример чтобы попробовать самостоятельно:



  
    aria-disabled

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

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

function SaveButton({ isSaving }) {
  return (
    
  );
}

Практическое применение в реальных проектах

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

Заключение

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