Making an h2 tag with a strong tag inside accessib

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.

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

Edit: 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.

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

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.

Answer 2

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.

Answer 3

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