Making an h2 tag with a strong tag inside accessible

Question

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>

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.

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.

When I hover on 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.

Using <span> and <b> tags produces the same behavior.

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

Trod

What about a <span> tag? <h2>One <span>two</span></h2>, JSFiddle. – Facing

Define "weird readings"? – Carrel

Use another element that's semantically neutral, such as <span>, maybe, and style it appropriately? – Gleich

Most screenreader users won't be hovering over words, as they are not able to see them. How does the screenreader behave when you use a read-all command? – Nucleon

When you hover the heading, if you hover at word 1 just reads "word 1" and then you have to hover at "word 2" to be readed – Trod

Answer 1

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

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.

Fenn

I edited my original question to clarify "weird readings", sorry I realize that was not very clear in the way that I exposed it. Thanks, then I take that the problem is just my screen reader. – Trod

Voiceover will stop reading at breaks like <strong>. You have to swipe right to continue. That's just how Voiceover works and users are accustomed to it (not that that means it's proper behavior). Not sure what screen reader you're using. – Capote

Answer 2

I'm not sure what "weird readings" means.

How about a <span> tag?

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

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

Demo JSFiddle

Facing

Answer 3

Having a strong in a h2 can be perfectly fine. But it depends on the actual content if strong is appropriate. It’s not appropriate if you only need it to make the text bold.

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

The way screen readers read this heading has most likely nothing to do with strong in particular, but it’s just the way some screen readers behave when they encounter an element (may it be strong, span, or whatever). You don’t have to worry about this. Screen reader users know and expect this, and they have ways to change this if they want to.

Mundane