strong

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

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

        
          
          <p>  <span role="strong">Важное напоминание!</span>  Ты сегодня отлично выглядишь.</p>
          <p>
  <span role="strong">Важное напоминание!</span>
  Ты сегодня отлично выглядишь.
</p>

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

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

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

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

        
          
          <p>  <strong>Ни при каких обстоятельствах</strong>  не пейте воду из луж.</p>
          <p>
  <strong>Ни при каких обстоятельствах</strong>
  не пейте воду из луж.
</p>

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

Можете проверить, что именно браузеры думают о теге <strong>, в инструментах разработчика. Например, Firefox построил дерево доступности, куда попала роль strong и текст «Ни при каких обстоятельствах».

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

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

        
          
          <p>  <strong>Ни при каких обстоятельствах</strong>  не пейте воду из луж.</p>
          <p>
  <strong>Ни при каких обстоятельствах</strong>
  не пейте воду из луж.
</p>

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

        
          
          strong {  font-weight: bold;}
          strong {
  font-weight: bold;
}

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

Роль strong выделяет слово или фразу среди остального текста. Подобную часть предложения нельзя просто удалить без изменения смысла. Например, без «не» это предложение станет противоположным: «Не выключайте компьютер во время установки обновлений».