WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Tom Livingston
Date: Apr 26, 2021 7:50AM

Thank you Jonathan.

This is an internal tool for my company's employees. We all know each
other by initials (it's a company culture thing I guess) but in the
event we have multiple people with the same initials, I wanted a way
to clarify the name. There is also filtering based on groupings which
would narrow it down further.

My initial plan was to use focus-within for keyboard as well as hover.

If anyone has any other thoughts on how to achieve this w/o spans I'd
appreciate any ideas.

thanks




On Mon, Apr 26, 2021 at 9:43 AM Jonathan Avila
< <EMAIL REMOVED> > wrote:
>
> iOS with VoiceOver splits up words in spans as two swipes unless they are in a link. However, if spans are used in a link while they now appear to be one swipe with VoiceOver it likely will pronounce them separately causing the name to not sound correct.
>
> Also keep in mind for content you have to hover to expose that raises additional items related to WCAG SC 1.4.13 Content on hover. Also a proposed WCAG 2.2 criteria SC 3.2.7 Visible Controls may be applicable.
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tom Livingston
> Sent: Monday, April 26, 2021 9:39 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Wrap part of a word in <span>
>
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>
>
> OK, thanks.
>
> It's a calendar. I haven't quite worked all the kinks out yet, but there could be a number of initial-sets together in one calendar day container. Each one hoverable. They are not links so tab order would have to be set, correct?
>
> On Mon, Apr 26, 2021 at 9:33 AM Steve Green < <EMAIL REMOVED> > wrote:
> >
> > Both is good. That will work fine as long as you use the "clip" technique to hide the text. It's a very common technique with a lot of applications.
> >
> > However, it might not be such a good idea if there are a lot of names on the page, because it would add a lot of tab stops.
> >
> > Steve
> >
> > -----Original Message-----
> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> > Tom Livingston
> > Sent: 26 April 2021 14:30
> > To: WebAIM Discussion List < <EMAIL REMOVED> >
> > Subject: Re: [WebAIM] Wrap part of a word in <span>
> >
> > How about both? This is an intranet and a small captive audience, but I'd like to make sure it's right - right as possible.
> >
> > I will test, thanks.
> >
> >
> >
> > On Mon, Apr 26, 2021 at 9:20 AM John Hicks < <EMAIL REMOVED> > wrote:
> > >
> > > as long as by hover you mean ... focus !
> > >
> > > I reckon you'd best test it though, I find voiceover takes every
> > > possible opportunity to surprise ... :)
> > >
> > > Le lun. 26 avr. 2021 à 15:17, Tom Livingston < <EMAIL REMOVED> > a écrit :
> > >
> > > > OK, thank you Steve.
> > > >
> > > > I am working on a situation where I want to have a person's first
> > > > and last initials expand to their full name on hover. My thought
> > > > was to hide the rest of each in a span (not using display: none).
> > > > Wanted to make sure that wasn't going to be a bad thing.
> > > >
> > > >
> > > >
> > > >
> > > > On Mon, Apr 26, 2021 at 9:12 AM Steve Green
> > > > < <EMAIL REMOVED> > wrote:
> > > > >
> > > > > No, it won't cause any issues unless you apply the "display:none"
> > > > > style
> > > > to the span or something like that.
> > > > >
> > > > > Steve Green
> > > > > Managing Director
> > > > > Test Partners Ltd
> > > > >
> > > > >
> > > > > -----Original Message-----
> > > > > From: WebAIM-Forum < <EMAIL REMOVED> > On
> > > > > Behalf Of
> > > > Tom Livingston
> > > > > Sent: 26 April 2021 14:08
> > > > > To: WebAIM Discussion List < <EMAIL REMOVED> >
> > > > > Subject: [WebAIM] Wrap part of a word in <span>
> > > > >
> > > > > Hello,
> > > > >
> > > > > Will wrapping part of a single word in a span cause AT issues
> > > > > when being
> > > > read aloud?
> > > > >
> > > > > Thanks for your help.
> > > > >
> > > > >
> > > > > --
> > > > >
> > > > > Tom Livingston | Senior Front End Developer | Media Logic |
> > > > > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> > > > >
> > > > >
> > > > > #663399
> > > > > > > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > > > > > > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > >
> > > >
> > > >
> > > > --
> > > >
> > > > Tom Livingston | Senior Front End Developer | Media Logic |
> > > > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> > > >
> > > >
> > > > #663399
> > > > > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > >
> > > > > > > > > archives at http://webaim.org/discussion/archives
> > > > >
> >
> >
> > --
> >
> > Tom Livingston | Senior Front End Developer | Media Logic |
> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >
> >
> > #663399
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > >
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> > > > > > > --

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399