Kevin Powell - Community•4mo ago

mid-sentence header!

How would folks here approach this and what do you think would be the best way to mark this up? "Try our" is not part of the previous section but "Live Chat" is the title of the component/section it lies within, and so appears after. I've seen some discussions about this online and didn't see much consensus so I think some of this is down to personal preference. I'm inclined to wrap the "title" in a <strong> tag instead of a H3, display it as a block in the hope that screen readers will read accept it as flowing on from the text before. (I'm yet to test this) and then I can put a "visually hidden" H3 before "Try our"... Though this seems to fly in the face of reducing clutter in the code and such.

2 Replies

MarkBoots•4mo ago

I read this as 1 sentence, "Try our live Chat service if your prefer .... ". So "Live Chat is not really a title in this context. What you can do is adding a h3 with "Live Chat" that is visually hidden, so only accessible for screenreaders. And then put the text in a normal p element (with a span on "live chat" to control the size and color)

<h3>Live Chat</h3> <!---visualy hidden -->
<p>Try our <span>Live Chat</span> service if you prefer.... <p>

<h3>Live Chat</h3> <!---visualy hidden -->
<p>Try our <span>Live Chat</span> service if you prefer.... <p>

Jacord•4mo ago

Thanks Mark, that's exactly how it's meant to be read... I think your suggestion is exactly how I'll do it. What do you think of this similar but different scenario where I have title and the content type or other metadata is shown above:

<article>
  <header>
    <span>blogpost:</span>
    <h3>Title Of Blogpost</h3>
    <time>Feb 11 2023</time>
  </header>
  <main>
  Blah blah blah
  </main>
</article>

<article>
  <header>
    <span>blogpost:</span>
    <h3>Title Of Blogpost</h3>
    <time>Feb 11 2023</time>
  </header>
  <main>
  Blah blah blah
  </main>
</article>

I'm inclined to leave that how it is given that the parent element shows what is grouped?

Gaming

Programming

mid-sentence header!