WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Tom Livingston
Date: Apr 26, 2021 12:20PM

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