WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Aditya
Date: Apr 26, 2021 1:13PM


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
> > > >