WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Laura Fathauer
Date: Apr 26, 2021 12:17PM

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