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 12:09PM

I was thinking something more along the lines of:

<p aria-label="Tom Livingston">TL</p>

p:hover,
p:focus{

&::before {
content: attr(aria-label) " ";
}

}



On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
< <EMAIL REMOVED> > wrote:
>
> Hello,
>
> It has to be interactive element if you are adding onhover to it. Without this "non mouse" using people cannot get information.
>
> To avoid span you can use aria-label on the button. On hover and on focus you can display the last name.
>
> If you have the freedom to change experience, make it a toggle button that shows the last name on click rather than onhover. (Use aria-pressed) in that case.
>
> Sent from my iPhone
>
> > On Apr 26, 2021, at 8:50 AM, Tom Livingston < <EMAIL REMOVED> > wrote:
> >
> > 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
> > > > > > > > >
> > > > --

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


#663399