使用strong标签在h2标签内，使内容易于访问

Question

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

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

我知道这样做在语义上不正确，我不应该在标题内部放置标签，但由于设计要求，我需要加粗第二个单词而不是第一个单词。

我正在努力确保这段文字仍然可以访问，但当我使用屏幕阅读器时，它会给我奇怪的读数。我猜这是因为标签位于

标签内部。

有人知道更好的方法吗？我有什么遗漏的吗？

编辑：抱歉，你是对的，“奇怪的读数”没有多少意义。当我在标题上悬停时，它显示第一个单词，我必须将鼠标悬停在第二个单词上才能在阅读器中显示它，期望的行为是：悬停在标题上并阅读第一和第二个单词。

编辑2：使用和标签产生相同的行为。

- Trifit

---

<span> 标签怎么样？<h2>One <span>two</span></h2>，JSFiddle。 - hungerstar

请问需要将 "weird readings" 翻译成什么意思呢？ - random_user_name

使用另一个语义中立的元素，例如<span>，并适当地进行样式设置？ - David Thomas

大多数屏幕阅读器用户不会悬停在单词上，因为他们无法看到它们。当您使用“全部阅读”命令时，屏幕阅读器会如何表现？ - stringy

当你悬停在标题上时，如果你在第一个单词处悬停，只会读出“第一个单词”，然后你必须悬停在“第二个单词”才能被读出。 - Trifit

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

- hungerstar

Answer 2

你可以完美地在标题中放置一个strong元素。这是语义上正确的。

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

重要性: 强调元素可以用于标题、说明或段落中，以区分真正重要的部分和可能更详细、更欢快或仅仅是样板的其他部分。

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

- Adam

---

我编辑了我的原始问题，以澄清“奇怪的读数”，抱歉我意识到我表达的不是很清楚。谢谢，那么我认为问题只是出在我的屏幕阅读器上。 - Trifit

语音提示将在像<strong>这样的中断处停止阅读。您必须向右滑动才能继续。这就是语音提示的工作方式，用户已经习惯了它（并不意味着这是正确的行为）。不确定您正在使用哪个屏幕阅读器。 - slugolicious

Answer 3

在

中使用可以是完全合适的。但是，如果您只需要使文本加粗，则取决于实际内容是否适合使用。如果没有其他元素适合，则查看所有文本级语义元素。使用span元素（因为它没有意义）{{link3:。屏幕阅读器读取此标题的方式很可能与无关，但当它们遇到元素（无论是、span还是其他任何东西）时，这只是某些屏幕阅读器行为的一种方式。您不必担心这个问题。屏幕阅读器用户知道并期望这一点，并且他们有方法可以更改此设置。

- unor