aria-flowto

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

        
          
          <h1 aria-flowto="first">Все новости</h1><article  id="second"  aria-labelledby="heading-1">  <h2 id="heading-1">Попугай нашёл клад</h2>  <!-- Остальное содержимое --></article><article  id="first"  aria-flowto="second"  aria-labelledby="heading-2">  <h2 id="heading-2">10 рецептов тыквенного лате</h2>  <!-- Остальное содержимое --></article>
          <h1 aria-flowto="first">Все новости</h1>

<article
  id="second"
  aria-labelledby="heading-1"
>
  <h2 id="heading-1">Попугай нашёл клад</h2>
  <!-- Остальное содержимое -->
</article>

<article
  id="first"
  aria-flowto="second"
  aria-labelledby="heading-2"
>
  <h2 id="heading-2">10 рецептов тыквенного лате</h2>
  <!-- Остальное содержимое -->
</article>

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

JAWS прочтёт код примерно так: «Все новости, заголовок первого уровня. Есть поток». Дальше пользователь может нажать Shift = и перейти к статье «10 рецептов тыквенного лате» или идти по контенту так, как он расположен в разметке.

Добавьте к тегу aria-flowto с одним или несколькими ID в качестве значения и свяжите с ним другой тег или несколько с такими же ID. Атрибут можно использовать для всех HTML-тегов и ролей.

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

        
          
          <h1 aria-flowto="first second">Все новости</h1><article  id="second"  aria-labelledby="heading-1">  <h2 id="heading-1">Собака съела пиццу</h2>  <!-- Остальное содержимое --></article><article  id="first"  aria-labelledby="heading-2">  <h2 id="heading-2">Капибара укусила красную панду</h2>  <!-- Остальное содержимое --></article>
          <h1 aria-flowto="first second">Все новости</h1>

<article
  id="second"
  aria-labelledby="heading-1"
>
  <h2 id="heading-1">Собака съела пиццу</h2>
  <!-- Остальное содержимое -->
</article>

<article
  id="first"
  aria-labelledby="heading-2"
>
  <h2 id="heading-2">Капибара укусила красную панду</h2>
  <!-- Остальное содержимое -->
</article>

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

Обратите внимание, что атрибут не изменяет визуальный порядок фокуса. Он влияет только на логический порядок для пользователей вспомогательных технологий. Благодаря aria-flowto пользователи могут перемещаться по контенту не так, как он расположен в DOM.

aria-flowto пригодится в редких случаях, когда нужно изменить порядок чтения контента только для пользователей вспомогательных технологий.

aria-flowto не замена скип-линк. Ссылка для перехода к основному контенту нужна для всех пользователей клавиатуры, не только для пользователей скринридеров.

Обычно порядок элементов на странице зависит от их порядка в DOM. То есть от того, как расположили элементы в разметке. Этот порядок можно изменить и другими способами:

• с помощью свойства order;
• благодаря атрибуту tabindex.

order изменяет только визуальный порядок, поэтому не влияет на скринридеры. tabindex изменяет визуальный и логический порядок.

В отличие от order и tabindex, ARIA-атрибут aria-flowto никак не влияет на визуальный порядок фокуса. Он изменяет его только для пользователей вспомогательных технологий и даёт им возможность идти по контенту по порядку или не проходить через все элементы подряд.