E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Wrap part of a word in

Number of posts in this thread: 22 (In chronological order)

From: Tom Livingston
Date: Mon, Apr 26 2021 7:07AM
Subject: Wrap part of a word in 
No previous message | Next message →

From: Steve Green
Date: Mon, Apr 26 2021 7:12AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Tom Livingston
Date: Mon, Apr 26 2021 7:17AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: John Hicks
Date: Mon, Apr 26 2021 7:19AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Tom Livingston
Date: Mon, Apr 26 2021 7:30AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Steve Green
Date: Mon, Apr 26 2021 7:33AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Tom Livingston
Date: Mon, Apr 26 2021 7:38AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Jonathan Avila
Date: Mon, Apr 26 2021 7:43AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Tom Livingston
Date: Mon, Apr 26 2021 7:50AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Aditya
Date: Mon, Apr 26 2021 8:34AM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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

From: Tom Livingston
Date: Mon, Apr 26 2021 12:09PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

I was thinking something more along the lines of:

TL

p:hover,
p:focus{

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

}

On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
< = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> >>
> >>

From: Laura Fathauer
Date: Mon, Apr 26 2021 12:17PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
>
> I was thinking something more along the lines of:
>
> TL
>
> p:hover,
> p:focus{
>
> &::before {
> content: attr(aria-label) " ";
> }
>
> }
>
>
>
> On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
> < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > >>
> > >>

From: Tom Livingston
Date: Mon, Apr 26 2021 12:20PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

Ah, thanks for that.

It doesn't make semantic sense to me to use an <a> or a button
(type=button I assume) for something that does nothing but show
additional secondary content on hover/focus. Thoughts?

On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
> >
> > I was thinking something more along the lines of:
> >
> > TL
> >
> > p:hover,
> > p:focus{
> >
> > &::before {
> > content: attr(aria-label) " ";
> > }
> >
> > }
> >
> >
> >
> > On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
> > < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > >>
> > > >>

From: Tom Livingston
Date: Mon, Apr 26 2021 12:38PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

How about this:

TL

p:hover,
p:focus{

&::before {
content: attr(data-fullname) " ";
}

}

On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
> >
> > I was thinking something more along the lines of:
> >
> > TL
> >
> > p:hover,
> > p:focus{
> >
> > &::before {
> > content: attr(aria-label) " ";
> > }
> >
> > }
> >
> >
> >
> > On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
> > < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > >>
> > > >>

From: Peter Weil
Date: Mon, Apr 26 2021 12:45PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

The reason aria-label cannot be used with a element is because naming the paragraph roles prohibited.

https://w3c.github.io/aria/#namefromprohibited

Regarding usage of aria-label with non-interactive elements, the most recent aria usage draft removes the blanket claim that it will be ignored with these elements.

https://w3c.github.io/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby

The list provided in

https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/

suggests that aria-label has good browser support for some non-interactive elements, such as <ul> and headings (h1>, <h2>, etc.

Peter

--
Peter Weil, Web Developer
University Marketing
University of WisconsinâMadison
= EMAIL ADDRESS REMOVED =
(m) 608-220-3089

On Apr 26, 2021, 1:38 PM -0500, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >, wrote:
How about this:

TL

p:hover,
p:focus{

&::before {
content: attr(data-fullname) " ";
}

}

On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:

I was thinking something more along the lines of:

TL

p:hover,
p:focus{

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

}

On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
< = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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

From: Tom Livingston
Date: Mon, Apr 26 2021 12:53PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

I am leaning towards this:

TL

p:hover,
p:focus{

&::before {
content: attr(title) " ";
}

}

On Mon, Apr 26, 2021 at 2:38 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> How about this:
>
> TL
>
> p:hover,
> p:focus{
>
> &::before {
> content: attr(data-fullname) " ";
> }
>
> }
>
> On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
> > >
> > > I was thinking something more along the lines of:
> > >
> > > TL
> > >
> > > p:hover,
> > > p:focus{
> > >
> > > &::before {
> > > content: attr(aria-label) " ";
> > > }
> > >
> > > }
> > >
> > >
> > >
> > > On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
> > > < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > > >>
> > > > >>

From: Aditya
Date: Mon, Apr 26 2021 1:13PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

Tom,

The p:focus will never happen because a 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 ADDRESS REMOVED = > wrote:
>
> I am leaning towards this:
>
> TL
>
>
>
> p:hover,
> p:focus{
>
> &::before {
> content: attr(title) " ";
> }
>
> }
>
>
>> On Mon, Apr 26, 2021 at 2:38 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> How about this:
>>
>> TL
>>
>> p:hover,
>> p:focus{
>>
>> &::before {
>> content: attr(data-fullname) " ";
>> }
>>
>> }
>>
>>> On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
>>>>
>>>> I was thinking something more along the lines of:
>>>>
>>>> TL
>>>>
>>>> p:hover,
>>>> p:focus{
>>>>
>>>> &::before {
>>>> content: attr(aria-label) " ";
>>>> }
>>>>
>>>> }
>>>>
>>>>
>>>>
>>>> On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
>>>> < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
>>>>>>>
>>>>>>>

From: Tom Livingston
Date: Mon, Apr 26 2021 1:24PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
>
> Tom,
>
> The p:focus will never happen because a 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 ADDRESS REMOVED = > wrote:
> >
> > I am leaning towards this:
> >
> > TL
> >
> >
> >
> > p:hover,
> > p:focus{
> >
> > &::before {
> > content: attr(title) " ";
> > }
> >
> > }
> >
> >
> >> On Mon, Apr 26, 2021 at 2:38 PM Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
> >>
> >> How about this:
> >>
> >> TL
> >>
> >> p:hover,
> >> p:focus{
> >>
> >> &::before {
> >> content: attr(data-fullname) " ";
> >> }
> >>
> >> }
> >>
> >>> On Mon, Apr 26, 2021 at 2:17 PM Laura Fathauer < = EMAIL ADDRESS 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 ADDRESS REMOVED = > wrote:
> >>>>
> >>>> I was thinking something more along the lines of:
> >>>>
> >>>> TL
> >>>>
> >>>> p:hover,
> >>>> p:focus{
> >>>>
> >>>> &::before {
> >>>> content: attr(aria-label) " ";
> >>>> }
> >>>>
> >>>> }
> >>>>
> >>>>
> >>>>
> >>>> On Mon, Apr 26, 2021 at 10:34 AM Aditya via WebAIM-Forum
> >>>> < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> >>>>>>>
> >>>>>>>

From: Peter Weil
Date: Mon, Apr 26 2021 1:39PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

Not by default.

If it's of any importance at to display the full names, the best option is to display the full name and dispense with the initials. That's the most straightforward, simplest, and accessible solution.

If you still want to use the initials for your content, the most semantic way to do it might be to enclose the initials in an <abbr> element and use the title attribute for the expansion. But it still wouldn't be read by default by a screenreader.

Peter

--
Peter Weil, Web Developer
University Marketing
University of WisconsinâMadison
= EMAIL ADDRESS REMOVED =
(m) 608-220-3089

On Apr 26, 2021, 2:25 PM -0500, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >, wrote:
But wouldn't the AT read the title attribute, supplementing the visual hover?

From: Tom Livingston
Date: Mon, Apr 26 2021 1:50PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

OK, thanks.

Interesting. How about:

<abbr title="Tom Livingston">TL</abbr>Tom Livingston

.visuallyhidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

I assume the span would be read as content to the even though it
is visually hidden. Might be a bit odd or repetitive but acceptable?

On Mon, Apr 26, 2021 at 3:39 PM Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:
>
> Not by default.
>
> If it's of any importance at to display the full names, the best option is to display the full name and dispense with the initials. That's the most straightforward, simplest, and accessible solution.
>
> If you still want to use the initials for your content, the most semantic way to do it might be to enclose the initials in an <abbr> element and use the title attribute for the expansion. But it still wouldn't be read by default by a screenreader.
>
> Peter
>
> --
> Peter Weil, Web Developer
> University Marketing
> University of WisconsinâMadison
> = EMAIL ADDRESS REMOVED =
> (m) 608-220-3089
>
> On Apr 26, 2021, 2:25 PM -0500, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >, wrote:
> But wouldn't the AT read the title attribute, supplementing the visual hover?
>
>
> > > > --

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

#663399

From: Aditya
Date: Mon, Apr 26 2021 3:08PM
Subject: Re: Wrap part of a word in 
← Previous message | Next message →

The problem is still the keyboard only user. Without mouse or assistive technology that span is not accessible.

Sent from my iPhone

> On Apr 26, 2021, at 2:50 PM, Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
>
> OK, thanks.
>
> Interesting. How about:
>
> <abbr title="Tom Livingston">TL</abbr> class="visuallyhidden">Tom Livingston
>
> .visuallyhidden {
> position: absolute !important;
> height: 1px; width: 1px;
> overflow: hidden;
> clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> clip: rect(1px, 1px, 1px, 1px);
> }
>
> I assume the span would be read as content to the even though it
> is visually hidden. Might be a bit odd or repetitive but acceptable?
>
>> On Mon, Apr 26, 2021 at 3:39 PM Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Not by default.
>>
>> If it's of any importance at to display the full names, the best option is to display the full name and dispense with the initials. That's the most straightforward, simplest, and accessible solution.
>>
>> If you still want to use the initials for your content, the most semantic way to do it might be to enclose the initials in an <abbr> element and use the title attribute for the expansion. But it still wouldn't be read by default by a screenreader.
>>
>> Peter
>>
>> --
>> Peter Weil, Web Developer
>> University Marketing
>> University of WisconsinâMadison
>> = EMAIL ADDRESS REMOVED =
>> (m) 608-220-3089
>>
>> On Apr 26, 2021, 2:25 PM -0500, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >, wrote:
>> But wouldn't the AT read the title attribute, supplementing the visual hover?
>>
>>
>> >> >> >> >
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> > > >

From: Tom Livingston
Date: Mon, Apr 26 2021 3:23PM
Subject: Re: Wrap part of a word in 
← Previous message | No next message

I see. I am confusing AT with keyboard only users. Is adding tabindex=0
on the abbr to get focus a bad thing?

On Mon, Apr 26, 2021 at 5:09 PM Aditya via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> The problem is still the keyboard only user. Without mouse or assistive
> technology that span is not accessible.
>
>
> Sent from my iPhone
>
> > On Apr 26, 2021, at 2:50 PM, Tom Livingston < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > OK, thanks.
> >
> > Interesting. How about:
> >
> > <abbr title="Tom Livingston">TL</abbr> > class="visuallyhidden">Tom Livingston
> >
> > .visuallyhidden {
> > position: absolute !important;
> > height: 1px; width: 1px;
> > overflow: hidden;
> > clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> > clip: rect(1px, 1px, 1px, 1px);
> > }
> >
> > I assume the span would be read as content to the even though it
> > is visually hidden. Might be a bit odd or repetitive but acceptable?
> >
> >> On Mon, Apr 26, 2021 at 3:39 PM Peter Weil < = EMAIL ADDRESS REMOVED = > wrote:
> >>
> >> Not by default.
> >>
> >> If it's of any importance at to display the full names, the best option
> is to display the full name and dispense with the initials. That's the most
> straightforward, simplest, and accessible solution.
> >>
> >> If you still want to use the initials for your content, the most
> semantic way to do it might be to enclose the initials in an <abbr> element
> and use the title attribute for the expansion. But it still wouldn't be
> read by default by a screenreader.
> >>
> >> Peter
> >>
> >> --
> >> Peter Weil, Web Developer
> >> University Marketing
> >> University of WisconsinâMadison
> >> = EMAIL ADDRESS REMOVED =
> >> (m) 608-220-3089
> >>
> >> On Apr 26, 2021, 2:25 PM -0500, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >,
> wrote:
> >> But wouldn't the AT read the title attribute, supplementing the visual
> hover?
> >>
> >>
> >> > >> > >> > >> > >
> >
> >
> > --
> >
> > 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

E-mail List Archives

Thread: Wrap part of a word in <span>