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 1:24PM

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 REMOVED> > wrote:
>
> Tom,
>
> The p:focus will never happen because a <p> 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 REMOVED> > wrote:
> >
> > I am leaning towards this:
> >
> > <p title="Tom Livingston">TL</p>
> >
> >
> >
> > p:hover,
> > p:focus{
> >
> > &::before {
> > content: attr(title) " ";
> > }
> >
> > }
> >
> >
> >> On Mon, Apr 26, 2021 at 2:38 PM Tom Livingston < <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
> >>>>>>>
> >>>>>>>