How can I remove a space between two words and still make it accessible?

by

In headings, I am getting rid of spaces between two-word phrases and using color to differentiate between the words instead.

EXAMPLE:

I would like this…

<h1>Two Words</h1>

to render like this…

TWOWORDS

How can I achieve this style while maintaining accessibility? The issue is that I don’t want to simply remove the space in the html. Will I have to use javascript to strip them out? Would there be accessibility issues with that too?

Answer

You could try:

<h1>Two<span>&nbsp;</span>Words</h1>

h1 span {
    display: none;
    }

That’ll handle the code-related accessibility issues.

Attribution
Source : Link , Question Author : Kade , Answer Author : DA01

Leave a Comment