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: Henry, Michael (IntelliDyne)
Date: Jan 17, 2018 9:50AM

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 REMOVED> > on behalf of Sandy Feldman < <EMAIL 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/>;
> > > >