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: Bim Egan
Date: Jan 17, 2018 11:43AM


Hello,

Sandy had the best solution for screen reader output. Use the CSS property
letter-spacing and then type the word into a single div or span and give it
a class that references that rule. If you're using separate div elements so
that each could be a different colour then a hack would need to be used. If
that's the case then just let us know so that we can provide the best
answer.

HTH,
Bim





-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
Of Brandon Keith Biggs
Sent: 17 January 2018 17:32
To: WebAIM Discussion List
Subject: Re: [WebAIM] Making characters in their own div show as one word to
a screen reader?

Hello,
Spans produce:
t h e
and not:
the
Thank you,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Jan 17, 2018 at 8:53 AM, Swift, Daniel P. < <EMAIL REMOVED> > wrote:

> Do spans produce the same results? I have a couple of hacks in my
> head ... why are you wrapping the letters in their own elements --
> what are you trying to accomplish?
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Brandon Keith Biggs
> Sent: Wednesday, January 17, 2018 9:44 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] Making characters in their own div show as one word
> to a screen reader?
>
> 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/>;
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
http://webaim.org/discussion/archives
---
This email has been checked for viruses by AVG.
http://www.avg.com