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: Brandon Keith Biggs
Date: Jan 18, 2018 7:29AM


Hello,

We have animated letters like in a marquee. That is why each letter needs
to be in its own div.

Would making the marquee invisible to the screen reader with display:none;
then making the same information in normal text invisible to sighted users
by positioning it off the screen be the best approach?

Thank you,



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

On Wed, Jan 17, 2018 at 11:49 AM, Sandy Feldman < <EMAIL REMOVED> >
wrote:

> 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
>>> >>>
>>> >> >> at
>> 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
>
> > > > >