aria-roledescription

Глобальное свойство из 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 на них.

        
          
          <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>

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