使内部带有强标签的 h2 标签可访问

Question

所以这似乎是一个非常简单的问题，但我无法理解它。我有以下 HTML:

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

我知道这在语义上不正确，我不应该在标题中使用 strong，但由于设计要求，我需要加粗第二个单词而不是第一个单词。

我试图确保该文本仍然可以访问，但是当我使用屏幕时 reader 它给我的读数很奇怪。我猜这是因为 <h2> 标签内的 <strong> 标签。

有谁知道更好的方法吗？我错过了什么吗？

编辑：抱歉，你是对的 "weird readings" 不多说了。当我将鼠标悬停在标题上时，它显示单词 1，我必须将鼠标悬停在单词 2 上才能在 reader 中显示它，其中所需的行为是：将鼠标悬停在标题上并阅读单词 1 和 2.

编辑 2：使用 <span> 和 <b> 标签产生相同的行为

Answer 1

我不确定 "weird readings" 是什么意思。

<span> 标签怎么样？

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

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

演示 JSFiddle

Answer 2

您可以完美地将 strong 元素放入标题中。它在语义上是正确的。

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

Importance: The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts of the that might be more detailed, more jovial, or merely boilerplate.

您的 "weird reading" 问题反映了您屏幕 reader 的使用或行为方面的问题，而不是您的语法问题。

Answer 3

在 h2 中有一个 strong 就可以了。但strong是否合适，还要看实际内容。如果您只需要将文本加粗，则不合适。

看看all of the text-level semantic elements. Use the span element (because it’s meaningless) if no other element is suitable。

屏幕 reader 阅读此标题的方式很可能与 strong 无关，但这只是某些屏幕 reader 遇到问题时的行为方式元素（可能是 strong、span 或其他）。您不必为此担心。屏幕 reader 用户知道并期待这一点，如果他们愿意，他们有办法改变这一点。

使内部带有强标签的 h2 标签可访问

Making an h2 tag with a strong tag inside accessible

html

accessibility

semantic-markup

screen-readers