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> </span>Words</h1>
h1 span {
display: none;
}
That’ll handle the code-related accessibility issues.
Attribution
Source : Link , Question Author : Kade , Answer Author : DA01