complementary

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

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

Блок с похожими материалами:

        
          
          <div  role="complementary"  aria-labelledby="related-articles">  <h3 id="related-articles">    Вам может понравиться  </h3>  <ul>    <li>      <a href="#">        5 признаков того, что кот вас не любит      </a>    </li>    <li>      <a href="#">        Популярные фасоны шляп для лягушек      </a>    </li>    <li>      <a href="#">        Вяжем носки для морских свинок      </a>    </li>  </ul></div>
          <div
  role="complementary"
  aria-labelledby="related-articles"
>
  <h3 id="related-articles">
    Вам может понравиться
  </h3>
  <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 пригодится в редких случаях. Например, если поддерживаете старые сайты, свёрстанные до появления HTML5 и тега <aside> 🦖

В коде элементы-ориентиры с ролью complementary должны находиться на одном уровне с другими ориентирами. Например, с <main>, <header> или <footer>.

Область complementary" может быть расположена сбоку от основного содержимого страницы, после или перед ним. Важно не то, как выглядит блок или где он расположен, важно содержимое. Это могут быть выносные цитаты, врезки в тексте, списки ссылок, прогнозы погоды, время и другие виджеты.

Также с помощью complementary можете объединять дополнительное содержимое, чтобы его быстро находили пользователи скринридеров. Например, так можно сгруппировать уведомления:

        
          
          <aside aria-label="Уведомления">  <div role="status">    <ul>      <li>        Носки (3) были добавлены в корзину.      </li>      <li>        Ковшик (1) был добавлен в корзину.      </li>    </ul>  </div></aside>
          <aside aria-label="Уведомления">
  <div role="status">
    <ul>
      <li>
        Носки (3) были добавлены в корзину.
      </li>
      <li>
        Ковшик (1) был добавлен в корзину.
      </li>
    </ul>
  </div>
</aside>

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

Когда на странице несколько ориентиров, им рекомендуют задавать имена. Это может быть видимый только скринридерам aria-label или видимый текст (обычно заголовок), связанный с ориентиром через aria-labelledby.

        
          
          <aside aria-label="Уведомления">  <!-- Содержимое --></aside><div  role="complementary"  aria-labelledby="notifications">  <h4 id="notifications">Уведомления</h4>  <!-- Остальное содержимое --></div>
          <aside aria-label="Уведомления">
  <!-- Содержимое -->
</aside>

<div
  role="complementary"
  aria-labelledby="notifications"
>
  <h4 id="notifications">Уведомления</h4>
  <!-- Остальное содержимое -->
</div>

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

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

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

Старайтесь не использовать много ориентиров complementary и не усложнять этим навигацию для пользователей вспомогательных технологий.