figure

Роль структуры документа из WAI-ARIA. Нужна для элемента, который содержит какое-то автономное содержимое с общей подписью к нему. Например, одну или несколько картинок, иллюстрации, графики, видео, аудио или пример кода. Ещё в figure можно добавлять интерактивные элементы вроде ссылок.

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

Роль figure уже есть у тега <figure> по умолчанию.

Контейнер с ролью figure, двумя картинками и общей подписью к ним:

        
          
          <div  role="figure"  aria-labelledby="label">  <img src="dog-1.png" alt="">  <img src="dog-2.png" alt="">  <span id="label">    На первой картинке чихуахуа, на второй —    карликовый пинчер.  </span></div>
          <div
  role="figure"
  aria-labelledby="label"
>
  <img src="dog-1.png" alt="">
  <img src="dog-2.png" alt="">
  <span id="label">
    На первой картинке чихуахуа, на второй —
    карликовый пинчер.
  </span>
</div>

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

Скринридеры прочитают код демки примерно так: «Фигура, на первой картинке чихуахуа, на второй — карликовый пинчер».

А вот пример контейнера с figure без общей подписи, но с отдельными подписями к картинкам:

        
          
          <div role="figure">  <img src="dog-1.png" alt="Чихуахуа">  <img src="dog-2.png" alt="Карликовый пинчер"></div>
          <div role="figure">
  <img src="dog-1.png" alt="Чихуахуа">
  <img src="dog-2.png" alt="Карликовый пинчер">
</div>

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

На этот раз скринридеры расскажут о демке так: «Фигура. Графика, чихуахуа. Графика, карликовый пинчер».

Задайте любому тегу role="figure". Лучше всего подойдут семантически нейтральные <div> или <span>. В большинстве случаев используйте <figure>. Явная роль пригодится, когда не можете использовать HTML-тег или хотите повысить обратную совместимость со старыми браузерами и вспомогательными технологиями.

У контейнера с ролью figure может быть подпись или дополнительное описание. Если используете возможности HTML, вложите внутрь <figure> другой тег <figcaption> с текстом. Это создаст связь между контейнером и подписью, о которой узнают все современные вспомогательные технологии. Для кастомного элемента figure нужно приложить больше усилий.

Есть два способа добавить общую подпись к кастомному figure:

• aria-label для подписи, о которой знают только скринридеры;
• aria-labelledby для подписи, которую видят и слышат все.

Общая подпись с aria-label:

        
          
          <div  role="figure"  aria-label="На первой картинке чихуахуа, на второй —  карликовый пинчер">  <img src="dog-1.png" alt="">  <img src="dog-2.png" alt=""></div>
          <div
  role="figure"
  aria-label="На первой картинке чихуахуа, на второй —
  карликовый пинчер"
>
  <img src="dog-1.png" alt="">
  <img src="dog-2.png" alt="">
</div>

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

Общая подпись с aria-labelledby:

        
          
          <div role="figure" aria-labelledby="label">  <span id="label">    На первой картинке чихуахуа, на второй —    карликовый пинчер.  </span>  <img src="dog-1.png" alt="">  <img src="dog-2.png" alt=""></div>
          <div role="figure" aria-labelledby="label">
  <span id="label">
    На первой картинке чихуахуа, на второй —
    карликовый пинчер.
  </span>
  <img src="dog-1.png" alt="">
  <img src="dog-2.png" alt="">
</div>

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

Дополнительное расширенное описание добавляют к figure с помощью других ARIA-атрибутов:

• aria-description для описания, которое доступно только скринридерам;
• aria-describedby для видимого всем расширенного описания;
• aria-details для ссылки на другую страницу с расширенным описанием.

Общее описание для картинок с aria-description:

        
          
          <div  role="figure"  aria-description="Хотя внешне чихуахуа похожи на  карликовых пинчеров, это абсолютно разные породы. Они  были выведены в разных странах независимо друг от друга.">  <img src="dog-1.png" alt="Чихуахуа">  <img src="dog-2.png" alt="Карликовый пинчер"></div>
          <div
  role="figure"
  aria-description="Хотя внешне чихуахуа похожи на
  карликовых пинчеров, это абсолютно разные породы. Они
  были выведены в разных странах независимо друг от друга."
>
  <img src="dog-1.png" alt="Чихуахуа">
  <img src="dog-2.png" alt="Карликовый пинчер">
</div>

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

Дополнительное описание с aria-describedby:

        
          
          <div  role="figure"  aria-describedby="description">  <img src="dog-1.png" alt="Чихуахуа">  <img src="dog-2.png" alt="Карликовый пинчер">  <span id="description">    Хотя внешне чихуахуа похожи на карликовых пинчеров,    это абсолютно разные породы. Они были выведены в разных    странах независимо друг от друга.  </span></div>
          <div
  role="figure"
  aria-describedby="description"
>
  <img src="dog-1.png" alt="Чихуахуа">
  <img src="dog-2.png" alt="Карликовый пинчер">
  <span id="description">
    Хотя внешне чихуахуа похожи на карликовых пинчеров,
    это абсолютно разные породы. Они были выведены в разных
    странах независимо друг от друга.
  </span>
</div>

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

Общее описание с aria-details:

        
          
          <div  role="figure"  aria-labelledby="label"  aria-details="description">  <span id="label">    На первой картинке чихуахуа, на второй —    карликовый пинчер.  </span>  <span>    <a      src="…"      lang="en"      id="description"    >      Подробный разбор отличий пород    </a>  </span>  <img src="dog-1.png" alt="">  <img src="dog-2.png" alt=""></div>
          <div
  role="figure"
  aria-labelledby="label"
  aria-details="description"
>
  <span id="label">
    На первой картинке чихуахуа, на второй —
    карликовый пинчер.
  </span>
  <span>
    <a
      src="…"
      lang="en"
      id="description"
    >
      Подробный разбор отличий пород
    </a>
  </span>
  <img src="dog-1.png" alt="">
  <img src="dog-2.png" alt="">
</div>

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

Скринридеры никак не расскажут о figure и его содержимом, если оставить его без подписи или описания. Это похоже на поведение тега <img> с пустым атрибутом alt.

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

Не все браузеры и скринридеры правильно рассказывают о теге <figure>, особенно когда в него вложены картинки с пустыми alt. Лучше всего с этим справляется скринридер JAWS в Chrome.

Если поддерживаете большой зоопарк технологий, задайте тегу явную роль figure и продублируйте в aria-label подпись из <figcaption>.

        
          
          <figure  role="figure"  aria-label="На первой картинке чихуахуа, на второй —  карликовый пинчер.">  <!-- Содержимое элемента -->  <figcaption>    На первой картинке чихуахуа, на второй —    карликовый пинчер.  </figcaption></figure>
          <figure
  role="figure"
  aria-label="На первой картинке чихуахуа, на второй —
  карликовый пинчер."
>
  <!-- Содержимое элемента -->
  <figcaption>
    На первой картинке чихуахуа, на второй —
    карликовый пинчер.
  </figcaption>
</figure>

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