complementary

ARIA-роль ориентира. Определяет область с дополнительным содержимым, которое не теряет смысл без основного. К примеру, боковая колонка на странице.

Роль complementary есть у <aside> по умолчанию.

        
          
          <div role="complementary">  <h2>Популярные статьи</h2>  <ul>    <li>      <a href="#">5 признаков того, что кот вас любит</a>    </li>    <li>      <a href="#">Популярные фасоны шляп для лягушек</a>    </li>    <li>      <a href="#">Вяжем носки для морских свинок</a>    </li>  </ul></div>
          <div role="complementary">
  <h2>Популярные статьи</h2>
  <ul>
    <li>
      <a href="#">5 признаков того, что кот вас любит</a>
    </li>
    <li>
      <a href="#">Популярные фасоны шляп для лягушек</a>
    </li>
    <li>
      <a href="#">Вяжем носки для морских свинок</a>
    </li>
  </ul>
</div>

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

Добавьте к тегу role="complementary". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

В большинстве случаев лучше использовать <aside> вместо роли complementary.

Для элемента с ролью complementary можно использовать все глобальные ARIA-атрибуты.

Роль complementary создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню со всеми ориентирами.