Клавиша / esc

aria-roledescription

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

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

Кратко

Скопировано

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

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

Пример

Скопировано
        
          
          <section  class="slide"  aria-roledescription="Слайд"  aria-labelledby="heading">  <h1 id="heading">Инкунабулы</h1>  <ul>    <li>      От латинского слова <i>incunabula</i> — «колыбель»,«начало»    </li>    <li>      Европейские книги, изданные от 1440 до 1 января 1501 года    </li>    <li>      Термин появился в 1639 году, но стал активно употребляться только      в 18 веке    </li>    <li>      Известные инкунабулы — Библия Гутенберга (первая половина 1450-х)      и «Нюрнбергская хроника» (1493)    </li>  </ul>  <div class="number">10</div></section>
          <section
  class="slide"
  aria-roledescription="Слайд"
  aria-labelledby="heading"
>
  <h1 id="heading">Инкунабулы</h1>
  <ul>
    <li>
      От латинского слова <i>incunabula</i> — «колыбель»,«начало»
    </li>
    <li>
      Европейские книги, изданные от 1440 до 1 января 1501 года
    </li>
    <li>
      Термин появился в 1639 году, но стал активно употребляться только
      в 18 веке
    </li>
    <li>
      Известные инкунабулы — Библия Гутенберга (первая половина 1450-х)
      и «Нюрнбергская хроника» (1493)
    </li>
  </ul>
  <div class="number">10</div>
</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 перезаписываются, хотя не должны.