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:

word 1 -  word 2 

        

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

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

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.