WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Making characters in their own div show as one word to a screen reader?

for

From: Sandy Feldman
Date: Jan 17, 2018 8:54AM

hey Keith,

Instead of using multiple divs for the letters to spread them out type
the word normally and use CSS to apply letter-spacing. You can use
either ems or px.

letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

I hope that helps!

Sandy



On 2018-01-17 9:44 AM, Brandon Keith Biggs wrote:
> Hello,
>
> How can one make div elements show on the same line without having spaces
> for a screen reader?
>
> I have characters all in their own div and I need them to look like words
> and not spaced out letters.
>
> <div>t</div><div>h</div><div>e</div>
>
> This shows:
>
> T
>
> H
>
> E
>
> To a screen reader. Using display: inline makes it a little better with:
>
> T h e
>
> But that still isn't:
>
> The
>
>
>
> How can I make multiple divs show as one word?
>
> Thank you,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> > > >