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?

Answer 1

You could try:

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

h1 span {
    display: none;
    }

That'll handle the code-related accessibility issues.

Answer 2

you can try

<h1><span>Two</span> Words</h1>

h1  { word-spacing: -8px;  color: #ff0000; }   
h1  span { font-weight: bold;  color: #000; }

you can play with word-spacing: -npx based on your font-size

Answer 3

I like @Jin's answer, but I would use the ex measurement, or another relative measurement. px is an absolute measurement.

<h1><span>TWO</span> Words</h1>

h1 { word-spacing: -0.5ex; }
h1 span { ... }

The CSS rule above works perfectly for a variety of faces and sizes from 10px to 27px (at least). The -8px rule from the previous answer only looks right with a font size of 16px (IMO).

Check out the W3C "Font-relative lengths" topic - pretty interesting stuff.

Answer 4

If you'd use php, the code would be something like this:

function gdse3647_headline( $input, $echo = false )
{
    $output = '';
    // Make uppercase
    $headline = strtoupper( $input );
    // Build array
    $headline = explode( ' ', $headline );
    // Number the single words
    for ( $i = 0; $i <= count ( $headline ); ++$i )
    {
        $output .= "<span class="headline-{$i}">{$headline[ $i ]}</span>";
    }

    if ( $echo )
        return print $output;

    return $output;
}

If you'd call it like this:

echo '<h1>' . gdse3647_headline( 'Two Words' ) . '</h1>';

...your output would be (in plain html)...

<h1>
    <span class="headline-1">TWO</span>
    <span class="headline-2">WORDS</span>
</h1>

...and you could style it however you want via css (see @Jin answer for ex.).

Still wondering what this has to do with Graphics Design...