制作一个h2标签，里面有一个强标签，易于访问

Question

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

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

我知道这在语义上不正确，我不应该在标题中使用

strong

，但由于设计要求，我需要将第二个单词加粗，而不是第一个单词。

我试图确保该文本仍然可以访问，但是当我使用屏幕阅读器时，它会给我奇怪的读数。我猜这是因为

<strong>

标签内的

<h2>

标签。

当我将鼠标悬停在标题上时，它会显示单词 1，而我必须将鼠标悬停在单词 2 上才能在阅读器中显示它，所需的行为是：将鼠标悬停在标题上并阅读单词 1 和 2。

使用

<span>

和

<b>

标签会产生相同的行为。

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

Answer 1

我不确定“奇怪的读数”是什么意思。

<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

重要性：强元素可以用在标题、说明文字或段落中，以区分真正重要的部分与可能更详细、更愉快或仅仅是样板文件的其他部分。

您的“奇怪阅读”问题反映了屏幕阅读器的使用或行为中的问题，而不是您的语法问题。

Answer 3

在

strong

中包含

h2

就可以了。但

strong

是否合适还要看实际内容。如果您只需要它使文本加粗，那么它不合适。

查看所有文本级语义元素。使用

span

元素（因为它没有意义）如果没有其他元素合适。

屏幕阅读器阅读此标题的方式很可能与

strong

特别无关，但这只是某些屏幕阅读器在遇到元素时的行为方式（可能是

strong

、

span

或其他元素） 。您不必担心这一点。屏幕阅读器用户知道并期望这一点，如果他们愿意，他们有办法改变这一点。