marquee

Роль изменяющихся областей из WAI-ARIA. Нужна для создания изменяющейся или «живой» области. marquee используют для блоков с не очень важной информацией, которая постоянно обновляется.

        
          
          <h3>Курсы на сегодня</h3><ul role="marquee">  <li>9 999 $ за юань</li>  <li>1 000 000 000 $ за куриное пёрышко</li></ul>
          <h3>Курсы на сегодня</h3>
<ul role="marquee">
  <li>9 999 $ за юань</li>
  <li>1 000 000 000 $ за куриное пёрышко</li>
</ul>

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

Добавьте к любому тегу role="marquee".

Где пригодится marquee:

• курсы валют;
• тикеры — бегущие строки с биржевой информацией об акциях и индексах;
• рекламные баннеры;
• карусели.

Роль marquee похожа на log, но у них есть важное отличие. В области с marquee не важно, в какой последовательности обновляется содержимое.

marquee по умолчанию задано свойство aria-live="off". Это значит, что, хоть это и изменяющаяся область, скринридеры не расскажут об изменениях без фокуса на ней или на элементе внутри.

Чтобы изменить стандартное поведение marquee, замените значение aria-live с off на polite. В этом случае вспомогательные технологии расскажут об изменениях, где бы пользователь ни находился на странице, но не сразу. Например, сначала они дадут пользователю завершить все действия или расскажут о более важных событиях.

В большинстве случаев лучше не изменять поведение marquee. Например, в карусели слайды быстро сменяют друг друга и часто нет возможности остановить автоматическую прокрутку. Пользователям скринридеров будет мучительно это слушать 😫

Тикеры, наоборот, обновляются раз в день, поэтому это не будет настолько навязчиво, но при этом хорошо учитывать контекст. Новостной сайт с информацией обо всём не особо подходит для такой области с marquee, а вот сайт только про биржевые новости подходит уже больше.

        
          
          <ul role="marquee" aria-live="polite" class="ticker">  <li class="ticker__item">      Рога и копыта    <span class="ticker__item-price">      134.56 USD    </span>    <span class="ticker__item-precent ticker__item-precent--up">      + 12%    </span>    <span class="ticker__item-precent-text visually-hidden">      рост    </span>  </li>  <!-- Другие пункты списка --></ul>
          <ul role="marquee" aria-live="polite" class="ticker">
  <li class="ticker__item">
      Рога и копыта
    <span class="ticker__item-price">
      134.56 USD
    </span>
    <span class="ticker__item-precent ticker__item-precent--up">
      + 12%
    </span>
    <span class="ticker__item-precent-text visually-hidden">
      рост
    </span>
  </li>
  <!-- Другие пункты списка -->
</ul>

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

После клика на кнопку «Обновить результат» скринридер сделает примерно такое объявление: «Рога и копыта 22 целых 16 десятых доллара США 84 процент спад, Радуга и пони 137 целых 86 десятых доллара США 11 процент спад, Мир обоев 11 целых 66 десятых доллара США 99 процент спад».

Элементы с role="marquee" можно подписывать. Для видимой подписи подойдёт атрибут aria-labelledby, для невидимой — aria-label. Только учитывайте, что хоть на практике и можно добавлять подписи ко всем элементам, спецификация не рекомендует подписывать <div>, <span> и другие неинтерактивные элементы.

Изменяющаяся область — это область страницы, в которой содержимое обновляется из-за внешних событий или действий пользователей. Благодаря изменяющимся областям вспомогательные технологии узнают об обновлениях на странице и автоматически рассказывают о них пользователям.

marquee продолжает логически то, что визуально делал устаревший тег <marquee>.