aria-roledescription

Как дать роли элемента своё название.

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

Кратко

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

Глобальное свойство из WAI-ARIA для описания ролей элементов своими словами.

Атрибут влияет только на то, как скринридер прочитает роль. Он не изменяет функциональность элемента.

Пример

Секция статьи "Пример"
        
          
          <section  aria-roledescription="Слайд"  aria-labelledby="heading">  <h2 id="heading">Новый роман Франца К.</h2>  <!-- Остальное содержимое слайда --></section>
          <section
  aria-roledescription="Слайд"
  aria-labelledby="heading"
>
  <h2 id="heading">Новый роман Франца К.</h2>
  <!-- Остальное содержимое слайда -->
</section>

        
        
          
        
      

Скринридер прочитает эту разметку примерно так: «Новый роман Франца К., слайд».

Как пишется

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

Задайте тегу aria-roledescription с нужным названием роли в виде строки текста. Атрибут можно использовать почти для всех тегов и ARIA-ролей, кроме <div> и <span> без явных ролей или тегов с явной ролью generic.

        
          
          <!-- ⛔ Лучше так не делать --><span aria-roledescription="Хештег">  #дизайн</span>
          <!-- ⛔ Лучше так не делать -->
<span aria-roledescription="Хештег">
  #дизайн
</span>

        
        
          
        
      

Не оставляйте aria-roledescription с пустым значением или с пробелом.

Иногда скринридеры не переводят название ролей с английского на основной язык интерфейса, а ещё роли в каком-то контексте могут быть не понятны пользователям. С помощью aria-roledescription можно изменить, как скринридер прочитает роль.

Подходящие ситуации для использования aria-roledescription:

  • уточнение функциональности элементов с групповыми ролями — group, region и другими;
  • более точное описание ролей некоторых интерактивных элементов.

Используйте атрибут тогда, когда это действительно нужно. Если перепутаете роли или придумаете для них нестандартные названия, это только запутает пользователей. Стандартные названия встроенных ролей тегов привычнее и понятнее.

Как понять

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

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

Подсказки

Секция статьи "Подсказки"

💡 aria-roledescription не подходит для описания элемента. Используйте aria-describedby или aria-description, если нужно описать подробнее, для чего нужен элемент.

💡 Когда поддерживаете несколько языков, не забудьте перевести содержимое атрибута aria-roledescription на них.

На практике

Секция статьи "На практике"

Татьяна Фокина советует

Секция статьи "Татьяна Фокина советует"

🛠 Не все вспомогательные технологии хорошо поддерживают aria-roledescription. В JAWS 2020 и JAWS 2021 есть баг, из-за которого этот скринридер не читает роли элементов в контейнере с aria-roledescription.

Возьмём такую разметку карточки:

        
          
          <div  role="group"  aria-roledescription="Карточка">  <a href="https://www.myblog.com/posts/capybara/">    Мой первый пост про капибар  </a></div>
          <div
  role="group"
  aria-roledescription="Карточка"
>
  <a href="https://www.myblog.com/posts/capybara/">
    Мой первый пост про капибар
  </a>
</div>

        
        
          
        
      

В этом случае JAWS в режиме виртуального курсора при фокусе на ссылке скажет: «Мой первый пост про капибар, карточка». То есть, роли дочерних элементов в теге с aria-roledescription перезаписываются, хотя не должны.