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

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


I would like this…

<h1>Two Words</h1>

to render like this…


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?


You could try:


h1 span {
    display: none;

That’ll handle the code-related accessibility issues.

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

Leave a Comment