WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Peter Weil
Date: Apr 26, 2021 12:45PM

The reason aria-label cannot be used with a <p> 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 REMOVED>
(m) 608-220-3089

On Apr 26, 2021, 1:38 PM -0500, <EMAIL REMOVED> < <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