emphasis

Роль структуры документа из WAI-ARIA. Ставит логическое ударение на слово или фразу, то есть выделяет одно или нескольких слов по смыслу среди других.

В HTML роль emphasis уже есть у тега <em>.

        
          
          <p>  Я не хочу <span role="emphasis">рубить</span> ёлку.</p>
          <p>
  Я не хочу <span role="emphasis">рубить</span> ёлку.
</p>

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

Добавьте к <div> или <span> атрибут role со значением emphasis. Можете задавать роль и другим тегам. Главное, чтобы это был неинтерактивный элемент с коротким текстом. То есть, нельзя использовать emphasis в кнопках, ссылках или таблицах.

Элементам с ролью emphasis можно задавать почти все глобальные ARIA-атрибуты, кроме aria-label, aria-labelledby и aria-braillelabel.

На практике emphasis нигде не пригодится. Современные браузеры без проблем определяют эту роль у элемента <em>:

        
          
          <p>  Я не хочу играть в <em>какую-то</em> часть Half-Life,  мне нужна <em>Half-Life 3</em>.</p>
          <p>
  Я не хочу играть в <em>какую-то</em> часть Half-Life,
  мне нужна <em>Half-Life 3</em>.
</p>

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

Загляните в инструменты разработчика, чтобы убедиться, что Firefox вычислил роль emphasis у фразы «Half-Life 3».

Скринридеры тоже знают о встроенной роли <em> с самого начала. Программы не объявляют название роли при чтении текста со смысловым ударением, но могут поменять интонацию. По умолчанию настройка чтения с интонацией выключена, поэтому её нужно включать вручную.

Скринридеры неохотно выделяют слова интонацией, потому что раньше разработчики злоупотребляли <em>. Из-за этого современные вспомогательные технологии выделят <em> или <span role="emphasis"> голосом только если им задано CSS-свойство font-style: italic 🤪

        
          
          <p>  Она просто <span role="emphasis">обожает</span>  сырники со сметаной.</p>
          <p>
  Она просто <span role="emphasis">обожает</span>
  сырники со сметаной.
</p>

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

        
          
          [role="emphasis"] {  font-style: italic;}
          [role="emphasis"] {
  font-style: italic;
}

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

Роль emphasis выделяет слово или фразу среди остального текста. Её используют, когда слово изменяет смысл фразы. Сравните два предложения: «Это ты съел все конфеты?» и «Это ты съел все конфеты?».

Место, куда ставить логическое ударение, зависит от языка текста.