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?
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.