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 1:24PM

But wouldn't the AT read the title attribute, supplementing the visual hover?

On Mon, Apr 26, 2021 at 3:13 PM Aditya via WebAIM-Forum
< <EMAIL REMOVED> > wrote:
>
> Tom,
>
> The p:focus will never happen because a <p> tag is not part of tab sequence.
>
> Unfortunately it will not be accessible to people using keyboard only.
>
> Finally, if there is an option to add one button control to the component, by toggling which you can change presentation to show/hide last name too.
>
> Doing so, you can get away with just one extra tabstop instead of n.
>
> You can even add bootstraps sr-only sr-only-focusable classes to not affect visual experience.
>
> Hope that works for you.
>
>
> Sent from my iPhone
>
> > On Apr 26, 2021, at 1:53 PM, Tom Livingston < <EMAIL REMOVED> > wrote:
> >
> > I am leaning towards this:
> >
> > <p title="Tom Livingston">TL</p>
> >
> >
> >
> > p:hover,
> > p:focus{
> >
> > &::before {
> > content: attr(title) " ";
> > }
> >
> > }
> >
> >
> >> On Mon, Apr 26, 2021 at 2:38 PM Tom Livingston < <EMAIL REMOVED> > wrote:
> >>
> >> How about this:
> >>
> >> <p data-fullname="Tom Livingston">TL</p>
> >>
> >> p:hover,
> >> p:focus{
> >>
> >> &::before {
> >> content: attr(data-fullname) " ";
> >> }
> >>
> >> }
> >>
> >>> On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < <EMAIL REMOVED> > wrote:
> >>>
> >>> The recommendation is " Don't use aria-label or aria-labelledby on any
> >>> other non-interactive content such as p, legend, li, or ul, because it
> >>> is ignored." Screen readers may or may not read the label when reading
> >>> the content.
> >>>
> >>> From the ARIA guide, section 2.10.
> >>>
> >>> Laura
> >>>
> >>>> On Mon, Apr 26, 2021 at 2:10 PM Tom Livingston < <EMAIL REMOVED> > wrote:
> >>>>
> >>>> 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
> >>>> > >>>> > >>>> > >>>> > >>> > >>> > >>> > >>> > >>
> >>
> >>
> >> --
> >>
> >> 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