E-mail List Archives
Thread: Making characters in their own div show as one word to a screen reader?
Number of posts in this thread: 15 (In chronological order)
From: Brandon Keith Biggs
Date: Wed, Jan 17 2018 7:44AM
Subject: Making characters in their own div show as one word to a screen reader?
No previous message | Next message →
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/>;
From: Steve Green
Date: Wed, Jan 17 2018 8:34AM
Subject: Re: Making characters in their own div show as one word to ascreen reader?
← Previous message | Next message →
You need to set the padding and margin on your div element to zero and it will look like a word.
Steve Green
Managing Director
Test Partners Ltd
From: Sandy Feldman
Date: Wed, Jan 17 2018 8:54AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
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/>;
> > > >
From: Henry, Michael (IntelliDyne)
Date: Wed, Jan 17 2018 9:50AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
If I'm reading you correctly, you want each letter in it's own div, displayed inline, but with no added space in between?
If so, then what you're running into is a weird anomaly/bug/irritant in how browsers render inline elements. Namely, extra space is added between them, whether you want it or not.
Margin:0 won't fix it, either.
Read this article for a fix: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Personally, I prefer the "Set the font size to zero" solution.
Good luck!
Mike
---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Sandy Feldman < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, January 17, 2018 10:54:14 AM
To: WebAIM Discussion List; Brandon Keith Biggs
Subject: Re: [WebAIM] Making characters in their own div show as one word to a screen reader?
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/>;
> > > >
From: Swift, Daniel P.
Date: Wed, Jan 17 2018 9:53AM
Subject: Re: Making characters in their own div show as one word to ascreen reader?
← Previous message | Next message →
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
From: Steve Green
Date: Wed, Jan 17 2018 9:55AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
I built a test page with the margin and padding set to zero and there was no space between the letters in any browser.
Steve
From: Brandon Keith Biggs
Date: Wed, Jan 17 2018 10:31AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
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 ADDRESS 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
>
>
From: Brandon Keith Biggs
Date: Wed, Jan 17 2018 10:38AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
Hello,
Select all the characters and paste them into a new document. How does it
look? That is what I see.
Here is my code:
<div style="padding: 0;margin: 0;">
t
</div>
<div style="padding: 0;margin: 0;">
h
</div>
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Wed, Jan 17, 2018 at 8:55 AM, Steve Green < = EMAIL ADDRESS REMOVED =
> wrote:
> I built a test page with the margin and padding set to zero and there was
> no space between the letters in any browser.
>
> Steve
>
>
From: Steve Green
Date: Wed, Jan 17 2018 10:44AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
If you put all the divs on the same line, as in your first email, there are no spaces between the letters.
If you put your divs on separate lines, as in your last email, there are spaces.
Steve
From: Steve Green
Date: Wed, Jan 17 2018 10:49AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
With the divs on separate lines I applied a margin of -2px and the spaces disappeared. You now have two solutions.
Steve
From: Mallory
Date: Wed, Jan 17 2018 10:57AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
The differences differ between browser when using inline-block: with safari it would go as far as 4px, other browsers fewer, and in Internet Explorer, there is no gap at all.
cheers,
Mallory
On Wed, Jan 17, 2018, at 6:49 PM, Steve Green wrote:
> With the divs on separate lines I applied a margin of -2px and the
> spaces disappeared. You now have two solutions.
>
> Steve
>
>
From: Bim Egan
Date: Wed, Jan 17 2018 11:43AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
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
From: Sandy Feldman
Date: Wed, Jan 17 2018 12:49PM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
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
>
>
>
>
>
>
From: Brandon Keith Biggs
Date: Thu, Jan 18 2018 7:29AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | Next message →
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 ADDRESS 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
>>
>>
>>
>>
From: Steve Green
Date: Thu, Jan 18 2018 7:32AM
Subject: Re: Making characters in their own div show as one word to a screen reader?
← Previous message | No next message
Display:none would make it invisible to everyone - you would need aria-hidden="true" instead.
Steve