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>