Клавиша / esc

figure

Роль для иллюстраций, схем и другого автономного содержимого.

Время чтения: 5 мин

Кратко

Скопировано

Роль структуры документа из 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>