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: Steve Green
Date: Jan 17, 2018 9:55AM

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

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Henry, Michael (IntelliDyne)
Sent: 17 January 2018 16:50
To: WebAIM Discussion List < <EMAIL REMOVED> >; Brandon Keith Biggs < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Making characters in their own div show as one word to a screen reader?

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/>;
> > > archives at http://webaim.org/discussion/archives
>