Advertisement


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


Question

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?

2011/09/10
1
2
9/10/2011 5:59:00 PM

You could try:

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

h1 span {
    display: none;
    }

That'll handle the code-related accessibility issues.

2011/09/10
3
9/10/2011 6:32:00 PM