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: Brandon Keith Biggs
Date: Jan 17, 2018 10:38AM

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