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 10:49AM

With the divs on separate lines I applied a margin of -2px and the spaces disappeared. You now have two solutions.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Steve Green
Sent: 17 January 2018 17:45
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Making characters in their own div show as one word to a screen reader?

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

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

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