aria-checked

Состояние виджета из WAI-ARIA, которое помогает вспомогательным технологиям понять, выбран ли элемент: отмечен, не отмечен или находится в промежуточном состоянии. Так же ведёт себя HTML-атрибут checked.

Атрибут нужен для случаев, когда вы делаете свой чекбокс, переключатель или пункт меню не с помощью стандартного <input>, а самостоятельно — например, на основе <div> или <span>.

Использование <span role="checkbox"> и HTML-атрибута <label>.

        
          
          <span  role="checkbox"  aria-labelledby="label"  tabindex="0"  aria-checked="false"></span><label id="label">Получать рассылку</label>
          <span
  role="checkbox"
  aria-labelledby="label"
  tabindex="0"
  aria-checked="false"
>
</span>
<label id="label">Получать рассылку</label>

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

Использование JavaScript-свойства у DOM-элемента.

        
          
          const el = document.getElementById('customCheckboxElementId')console.log(el.ariaChecked)// nullel.ariaChecked = 'true'console.log(el.ariaChecked)// true
          const el = document.getElementById('customCheckboxElementId')

console.log(el.ariaChecked)
// null

el.ariaChecked = 'true'

console.log(el.ariaChecked)
// true

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

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

• true — элемент отмечен или выбран.
• false — элемент не отмечен или не выбран.
• mixed — некоторые, но не все, дочерние элементы выбраны.
• undefined (по умолчанию) — элемент нельзя отметить или выбрать.

Значение mixed поддерживают только элементы с ролями checkbox и menuitemcheckbox.

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

Если aria-checked отсутствует, пользователь скринридера не сможет узнать, что элемент можно выбрать или он уже выбран.

Скринридеры по-разному озвучивают элементы с aria-checked в зависимости от их роли.

Скринридер сообщает, выбран ли чекбокс с role="checkbox" или нет, находится ли в смешанном состоянии (mixed). Например:

• aria-checked="true" — «Чекбокс выбран».
• aria-checked="false" — «Чекбокс не выбран».
• aria-checked="mixed" — «Чекбокс частично выбран».

Озвучка похожа на объявление чекбокса, но с акцентом на включение или выключение элемента с role="switch":

• aria-checked="true" — «Переключатель включен».
• aria-checked="false" — «Переключатель выключён».

Скринридер сообщает, выбран ли пункт меню с role="menuitemcheckbox":

• aria-checked="true" — «Пункт меню выбран».
• aria-checked="false" — «Пункт меню не выбран».
• aria-checked="mixed" — «Пункт меню частично выбран».

Озвучка происходит в контексте группы радиокнопок с role="radio":

• aria-checked="true" — «Радиокнопка выбрана».
• aria-checked="false" — «Радиокнопка не выбрана».

Если опция c ролью option находится внутри listbox, скринридер озвучит, выбрана ли она:

        
          
          <div role="listbox" aria-label="Выберите опции">  <div role="option" aria-checked="true">Опция 1</div>  <div role="option" aria-checked="false">Опция 2</div>  <div role="option" aria-checked="mixed">Опция 3</div></div>
          <div role="listbox" aria-label="Выберите опции">
  <div role="option" aria-checked="true">Опция 1</div>
  <div role="option" aria-checked="false">Опция 2</div>
  <div role="option" aria-checked="mixed">Опция 3</div>
</div>

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

Если опция вложена внутрь group, скринридер озвучит её как часть группы:

        
          
          <div role="group" aria-label="Группа опций">  <div role="option" aria-checked="true">Опция A</div>  <div role="option" aria-checked="false">Опция B</div></div>
          <div role="group" aria-label="Группа опций">
  <div role="option" aria-checked="true">Опция A</div>
  <div role="option" aria-checked="false">Опция B</div>
</div>

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

aria-checked используется для собственных интерактивных элементов (чекбоксов, переключателей или пунктов меню), чтобы они были доступны для всех пользователей, включая пользователей скринридеров.

• Кастомный чекбокс для подписки на рассылку — скринридер узнает, выбран он или нет.
• Переключатель «Тёмная тема» — скринридер скажет, включена ли она.
• Меню с множественным выбором — скринридер озвучит, какие пункты отмечены, а какие нет.

Не стоит добавлять aria-checked для <input type="checkbox"> и <input type="radio">. Элементы уже сообщают своё состояние вспомогательным технологиям с помощью атрибута checked.

Если создаёте свой компонент вроде чекбокса или переключателя и не используется стандартный <input type="checkbox">, лучше добавить к нему aria-checked. Это поможет скринридерам правильно озвучивать состояние элемента.

Когда нужно реализовать выпадающее меню, в котором можно выбрать сразу несколько пунктов и поддерживать промежуточное состояние (например, выбраны не все опции), лучше использовать aria-checked со значениями true, false и mixed.

💡 Для стандартных чекбоксов используйте псевдокласс indeterminate, если нужно показать промежуточное состояние.

💡 Если у элемента нет значения aria-checked (по умолчанию это undefined), значит, он не интерактивный или его состояние не важно. Вспомогательные технологии могут игнорировать такой элемент или считать его неактивным.

💡 Атрибут switch для <input> работает только в Safari. Для кроссбраузерного переключателя можно использовать кастомный компонент с aria-checked.

💡 Для чекбоксов и радиокнопок лучше использовать стандартные <input type="checkbox"> и <input type="radio">. Такие элементы сразу работают «из коробки»: поддерживают работу с клавиатурой, управление через формы и другие функции, важные для доступности.

💡 Атрибут aria-checked работает во всех браузерах. JavaScript-свойство ariaChecked у DOM-элементов (Element.ariaChecked) поддерживается только в современных браузерах (с 2023 года).

💡 Если у элемента не задан атрибут aria-checked, то JavaScript-свойство ariaChecked вернёт null. Это стандартно для всех ARIA-свойств в DOM: так можно понять, что атрибут вообще не установлен.