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