HTML and CSS word styling and screen reader usability

Question

I’m trying to target three words in a h1 for the organization name using to wrap each word and a unique ID to style each word via css.

It looks like this:

<h1 id="orgName"> 
 <span>
 <span id="firstWord">The</span>
 <span id="secondWord">Community</span> 
 <span id="thirdWord">Space</span> 
 </span>
</h1>

However by using span and an ID for each work in the h1, I am causing the screen reader to pause after each word instead of speaking the organization name as a whole. Does anyone have any ideas to solve this issue?

Answer 1

You could try using a formating tag such as <b> or <i> instead of <span>.

<h1 id="orgName"> 
 <span>
 <b id="firstWord">The</b>
 <b id="secondWord">Community</b> 
 <b id="thirdWord">Space</b> 
 </span>
</h1>