使内部具有强标记的 h2 标记可访问答案

【问题标题】：Making an h2 tag with a strong tag inside accessible使内部具有强标记的 h2 标记可访问
【发布时间】：2016-05-28 10:50:18
【问题描述】：

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

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

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

我正在努力确保该文本仍然可以访问，但是当我使用屏幕阅读器时，它会给我带来奇怪的读数。我猜这是因为<h2> 标签内的<strong> 标签。

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

编辑：对不起，你是对的“奇怪的读数”并没有说太多。当我将鼠标悬停在标题上时，它会显示单词 1，我必须将鼠标悬停在单词 2 上才能在阅读器中显示它，其中所需的行为是：悬停标题并阅读单词 1 和 2。

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

【问题讨论】：

【解决方案1】：

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

<span> 标签怎么样？

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

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

【讨论】：

【解决方案2】：

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

重要性：strong>强元素可用于标题、说明或段落中，以区分真正重要的部分与可能更详细、更有趣或仅仅是样板的其他部分.

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

【讨论】：

我编辑了我的原始问题以澄清“奇怪的读数”，对不起，我意识到我暴露它的方式不是很清楚。谢谢，那么我认为问题只是我的屏幕阅读器。
旁白会在像这样的休息时间停止朗读。您必须向右滑动才能继续。这就是 Voiceover 的工作方式和用户习惯的方式（并不是说它是正确的行为）。不确定您使用的是什么屏幕阅读器。

【解决方案3】：

在h2 中有一个strong 可以很好。但是strong是否合适还要看实际内容。如果您只需要它使文本变为粗体，则不合适。

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

【讨论】：