HTML and CSS word styling and screen reader usability 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:

&lt;h1 id=“orgName”&gt; 
    &lt;span&gt;
        &lt;span id=“firstWord”&gt;The&lt;/span&gt;
        &lt;span id=“secondWord”&gt;Community&lt;/span&gt; 
        &lt;span id=“thirdWord”&gt;Space&lt;/span&gt; 
    &lt;/span&gt;
&lt;/h1&gt;


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?
You could try using a formating tag such as &lt;b&gt; or &lt;i&gt; instead of &lt;span&gt;.

&lt;h1 id="orgName"&gt; 
    &lt;span&gt;
        &lt;b id="firstWord"&gt;The&lt;/b&gt;
        &lt;b id="secondWord"&gt;Community&lt;/b&gt; 
        &lt;b id="thirdWord"&gt;Space&lt;/b&gt; 
    &lt;/span&gt;
&lt;/h1&gt;