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