mark

ARIA-роль структуры документа, которая определяет выделенный или подсвеченный важный фрагмент текста.

Эквивалент в HTML — <mark>.

        
          
          <p>  Одной из нерешённых проблем строения галактик является  <span role="mark" class="mark">тёмная материя</span>,  проявляющая себя только в гравитационном взаимодействии.  Она может составлять до 90% от общей массы галактики, а может  и <span role="mark" class="mark">полностью отсутствовать</span>,  как в некоторых карликовых галактиках.</p>
          <p>
  Одной из нерешённых проблем строения галактик является
  <span role="mark" class="mark">тёмная материя</span>,
  проявляющая себя только в гравитационном взаимодействии.
  Она может составлять до 90% от общей массы галактики, а может
  и <span role="mark" class="mark">полностью отсутствовать</span>,
  как в некоторых карликовых галактиках.
</p>

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

mark не изменяет внешний вид элемента, так что нужно не забывать самим добавлять стили с помощью CSS.

        
          
          .mark {  background-color: #FFFFFF;}
          .mark {
  background-color: #FFFFFF;
}

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

Задайте любому статичному HTML-тегу или ARIA-роли role="mark", лучше всего семантически нейтральным <span> или <div>.

Пока скринридеры и другие вспомогательные технологии никак не обозначают выделения в тексте, в том числе с помощью интонации. Если это крайне важное выделение в тексте, используйте хак с псевдоклассами ::before, ::after и свойством content:

        
          
          span[role="mark"]::before {  content: " [начало выделения] ";}span[role="mark"]::after {  content: " [конец выделения] ";}
          span[role="mark"]::before {
  content: " [начало выделения] ";
}

span[role="mark"]::after {
  content: " [конец выделения] ";
}

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

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

Если поддерживаете режим высокой контрастности в Windows, не забудьте задать элементу mark системный цвет с помощью значения forced-colors у директивы @media. Благодаря этому цвет выделения заменится на системный и будет таким же контрастным, как остальные цвета.

        
          
          @media (forced-colors: active) {  span[role="mark"] {    color: HighlightText;    background-color: Highlight;  }}
          @media (forced-colors: active) {
  span[role="mark"] {
    color: HighlightText;
    background-color: Highlight;
  }
}

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

Например, в теме «Ночное небо» элементы с ролью mark выделятся фиолетовым цветом.

ARIA-роли помогают только вспомогательным технологиям. mark не изменяет внешний вид элемента и не добавляет никакую функциональность. В большинстве случаев лучше использовать тег <mark>.