使内部带有强标签的h2标签可访问 [英] Making an h2 tag with a strong tag inside accessible

问题描述

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

So this may seem like a very simple question but I can't get my head around it. I have the following HTML:

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

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

I know that this isn't semantically correct and I shouldn't have a strong inside a heading, but due to design requirements I need to bold the second word but not the first one.

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

I'm trying to make sure that this text is still accessible, but when I use a screen reader it gives me weird readings. I'm guessing it is because of the <strong> tag inside the <h2> tag.

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

Does anyone know a better way to do this? Am I missing something?

编辑：对不起，您说得对，怪异的读物没多大意思。当我将鼠标悬停在标题上时，它会显示单词1，而我必须将鼠标悬停在单词2上才能在阅读器中显示该单词，所需的行为将是：将标题悬停并读取单词1和2。

sorry, you are right "weird readings" doesn't say much. When I hover at the heading it shows word 1 and I have to hover over word 2 to show it in the reader, where the desired behavior would be: hover the heading and read word 1 and 2.

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

Edit 2: use <span> and <b> tags produces the same behavior

推荐答案

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

You can perfectly put a strong element inside a heading. It is semantically correct.

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

重要性： strong元素可用于标题，标题或段落，以将真正重要的部分与可能的其他部分区分开

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.

您的怪异阅读问题反映出您使用或行为方面的问题屏幕阅读器，而不是语法。

Your problem of "weird reading" reflects a problem within the use or behavior of your screen reader, not from your syntax.

这篇关于使内部带有强标签的h2标签可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！