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 12:49PM

Neat thing - you can use CSS to change the colour of the first letter. I
think it may be possible to do this for other letters using JS.

h1::first-letter

http://ineeda.coffee/TESTS/firstletter.html

Sandy


On 2018-01-17 1:43 PM, Bim Egan wrote:
> 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
>
> > > > --
Sandy

sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca