Создание доступного тега h2 с сильным тегом внутри

Это может показаться очень простым вопросом, но я не могу понять его. У меня есть следующий HTML-код:

<h2>word 1 - <strong> word 2 </strong></h2>

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

Я пытаюсь убедиться, что этот текст по-прежнему доступен, но когда я использую программу чтения с экрана, я получаю странные значения. Я предполагаю, что это из-за тега <strong> внутри тега <h2>.

Кто-нибудь знает, как это сделать лучше? Я что-то упускаю?

Изменить: извините, вы правы, "странные чтения" мало что говорят. Когда я наводил указатель мыши на заголовок, он показывает слово 1, и мне нужно навести указатель мыши на слово 2, чтобы отобразить его в программе чтения, где желаемое поведение будет заключаться в следующем: наведите указатель мыши на заголовок и прочтите слова 1 и 2.

Изменить 2: использование тегов <span> и <b> дает такое же поведение


html accessibility screen-readers semantic-markup
person Trifit    schedule 16.02.2016    source источник
comment
А как насчет тега <span>? <h2>One <span>two</span></h2>, JSFiddle.   -  person hungerstar    schedule 17.02.2016
comment
Определите странные чтения?   -  person random_user_name    schedule 17.02.2016
comment
Использовать другой семантически нейтральный элемент, например <span>, и придать ему соответствующий стиль?   -  person David says reinstate Monica    schedule 17.02.2016
comment
Большинство пользователей программ чтения с экрана не будут наводить курсор на слова, так как они не видят их. Как ведет себя программа чтения с экрана при использовании команды чтения всего?   -  person stringy    schedule 17.02.2016
comment
При наведении курсора на заголовок, если вы наводите курсор на слово 1, вы просто читаете слово 1, а затем вам нужно навести курсор на слово 2, чтобы его прочитали   -  person Trifit    schedule 17.02.2016

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете идеально разместить элемент strong внутри заголовка. Это семантически правильно.

https://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element

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

Ваша проблема «странного чтения» отражает проблему в использовании или поведении программы чтения с экрана, а не в вашем синтаксисе.

person Adam    schedule 17.02.2016
comment
Я отредактировал свой первоначальный вопрос, чтобы прояснить странные прочтения, извините, я понимаю, что это было не очень ясно в том, как я его раскрыл. Спасибо, тогда я понимаю, что проблема только в моем программе чтения с экрана. - person Trifit; 17.02.2016
comment
Закадровый голос перестает читать в таких перерывах, как ‹strong›. Чтобы продолжить, проведите пальцем вправо. Именно так работает закадровый голос, и пользователи к нему привыкли (это не значит, что это правильное поведение). Не знаю, какую программу чтения с экрана вы используете. - person slugolicious; 19.02.2016

arrow_upward
5
arrow_downward

Я не совсем понимаю, что означает "странные чтения".

Как насчет тега <span>?

<h2>One <span>Two</span></h2>

h2 {
  font-family: sans-serif;
  font-weight: normal;
}
h2 span {
  font-weight: bold;
}

Демо JSFiddle

person hungerstar    schedule 16.02.2016

arrow_upward
1
arrow_downward

Иметь strong в h2 может быть совершенно нормально. Но это зависит от фактического содержания, подходит ли strong. Это не подходит, если вам нужно только выделить текст полужирным шрифтом.

Просмотрите весь текст -уровневые семантические элементы. Используйте элемент span. (потому что это бессмысленно) если никакой другой элемент не подходит.

То, как программы чтения с экрана читают этот заголовок, скорее всего, не имеет ничего общего с strong в частности, но именно так ведут себя некоторые программы чтения с экрана, когда сталкиваются с элементом (может это быть strong, span или что-то еще). Вам не о чем беспокоиться. Пользователи программ чтения с экрана знают и ожидают этого, и у них есть способы изменить это, если они захотят.

person unor    schedule 18.02.2016