2
\$\begingroup\$

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?

\$\endgroup\$
1
\$\begingroup\$

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>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.