Клавиша / esc

presentation, none

Роли, которые сметают на своём пути семантику элементов.

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

Кратко

Скопировано

presentationроль структуры документа из WAI-ARIA, которая удаляет семантику элемента. none — это другое название для presentation.

presentation и none превращают любой семантический тег в <div> или <span> для скринридеров и других вспомогательных технологий.

Пример

Скопировано
        
          
          <h1>Говорящий мангуст Джеф</h1><hr role="presentation"><p>  Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку  от селения Дэлби на острове Мэн. История о говорящем зверьке  в середине 1930-х годов активно обсуждалась на страницах  британской прессы.</p>
          <h1>Говорящий мангуст Джеф</h1>
<hr role="presentation">
<p>
  Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку
  от селения Дэлби на острове Мэн. История о говорящем зверьке
  в середине 1930-х годов активно обсуждалась на страницах
  британской прессы.
</p>

        
        
          
        
      
Открыть демо в новой вкладке

В этом примере тег <hr> потерял свою семантику и стал просто декоративным разделителем. Из-за этого скринридер не расскажет, что на странице есть элемент с ролью separator.

Как пишется

Скопировано

Добавьте role="presentation" или role="none" к семантическому тегу — HTML-элементу со встроенной ролью. Например, <h1>, <table> или <li>. Исключение — интерактивные элементы, с которыми взаимодействуют пользователи. Это могут быть кнопки <button>, ссылки <a> или поля <input> и <textarea>.

Хотя современные браузеры больше не удаляют семантику интерактивных тегов из-за presentation или none, всё равно лучше не нарушать правила использования ARIA.

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

К элементам с ролями presentation или none можно добавлять все ARIA-атрибуты, кроме глобальных:

Если используете атрибуты из списка в теге со сброшенной семантикой, некоторые браузеры и вспомогательные технологии используют встроенную роль элемента и проигнорируют явную presentation.

Последнее важное правило для presentation и none — таким элементам не нужны имена. Это их краткие названия, которые скринридеры читают перед ролью. Не важно, откуда берётся имя у элемента — из текстового содержимого тега или из aria-label.

Разберём простой пример со списком. Зададим родительскому <ul> явную роль presentation:

        
          
          <ul role="presentation">  <li>Динозавры.</li>  <li>Минералы.</li>  <li>    Вкусный <a href="#">пирожок</a>.  </li></ul>
          <ul role="presentation">
  <li>Динозавры.</li>
  <li>Минералы.</li>
  <li>
    Вкусный <a href="#">пирожок</a>.
  </li>
</ul>

        
        
          
        
      

Для вспомогательных технологий всё превратится в <span>, кроме ссылки <a>:

        
          
          <span>  <span>Динозавры.</span>  <span>Минералы.</span>  <span>    Вкусный <a href="#">пирожок</a>.  </span></span>
          <span>
  <span>Динозавры.</span>
  <span>Минералы.</span>
  <span>
    Вкусный <a href="#">пирожок</a>.
  </span>
</span>

        
        
          
        
      

presentation и none пригодятся, когда нужно оставить встроенные стили или логику тега, но не рассказывать вспомогательным технологиям про его семантику. Распространённые ситуации:

  • декоративный элемент — картинки для красоты, разделители и похожие элементы;
  • таблица для раскладки, как на старых сайтах или в электронных письмах;
  • кастомный элемент, внутри которого есть другие с ненужной в этом контексте семантикой. Например, панель вкладок или меню как в редакторе текста.

Декоративная картинка <img> с ролью presentation ведёт себя так, как если бы её скрыли от скринридера с помощью aria-hidden или CSS-свойства display: none. Такое изображение точно не нужно описывать в alt.

        
          
          <img role="presentation" src="img/decorative-pic-1.svg" alt="">
          <img role="presentation" src="img/decorative-pic-1.svg" alt="">

        
        
          
        
      

Можете встретить вариант декоративной картинки с пропущенным alt:

        
          
          <img role="presentation" src="img/decorative-pic-1.svg">
          <img role="presentation" src="img/decorative-pic-1.svg">

        
        
          
        
      

Хотя этот пример из спецификации, такой код не пройдёт валидацию. Дело в том, что у элементов с атрибутом role обязательно должны быть имена. В случае тега <img> имя элемента берётся из alt. Также вспомогательные технологии пока плохо поддерживают подобные картинки.

На практике presentation чаще всего встречается в письмах. Тег <table> в письмах используют не для хранения данных, как обычно, а для визуального выравнивания содержимого. При помощи роли presentation сбросится не только семантика самой таблицы, но и её дочерних элементов — <tr>, <th>, <td> и других.

        
          
          <table  role="presentation"  width="100%"  cellpadding="0"  cellspacing="0"  border="0"  style="color: green;">  <tbody>    <tr>      <th>        Привет, это рассылка от нас!      </th>    </tr>  </tbody></table>
          <table
  role="presentation"
  width="100%"
  cellpadding="0"
  cellspacing="0"
  border="0"
  style="color: green;"
>
  <tbody>
    <tr>
      <th>
        Привет, это рассылка от нас!
      </th>
    </tr>
  </tbody>
</table>

        
        
          
        
      

Если загляните в дерево доступности в инструменте разработчика в Chrome, заметите, что у <th> внутри <table role="presentation"> вычисляется роль generic. Это значит, что для браузеров и других программ это элемент без семантики.

Слева HTML-код таблицы из примера, справа дерево доступности с вычисленными свойствами. Таблице задана роль presentation.

Для сравнения, у <th> будет роль layoutTableCell в таблице с родной семантикой, но без подписи <caption>.

Слева HTML-код таблицы, справа дерево доступности с вычисленными свойствами. У таблицы на этот раз нет роли presentation.

presentation также часто используют во вкладках и в других кастомных элементах, для которых пока не хватает возможностей HTML. К примеру, вспомогательные технологии в случае вкладок на <ul> не расскажут, что пользователь находится на элементе списка.

        
          
          <ul role="tablist">  <li role="presentation">    <a role="tab" href="#">Тапиры</a>  </li>  <li role="presentation">    <a role="tab" href="#">Утконосы</a>  </li></ul>
          <ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#">Тапиры</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#">Утконосы</a>
  </li>
</ul>

        
        
          
        
      

Подсказки

Скопировано

💡 presentation и none часто путают с aria-hidden="true". Их разница в том, что атрибут полностью удаляет элемент из дерева доступности. Из-за этого вспомогательные технологии не знают о его семантике, содержимом, состоянии и свойствах.

На собеседовании

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировано
  1. hidden — это HTML-атрибут, который предназначен для скрытия элемента на странице. Это означает, что элемент не будет отображаться в пользовательском интерфейсе и скроется от вспомогательных технологий, но он все ещё существует в DOM.
  2. aria-hidden="true" — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.
  3. role="presentation" — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.
  4. role="none" — это синоним role="presentation", который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.