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: Mallory
Date: Jan 17, 2018 10:57AM


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