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 3:23PM

I see. I am confusing AT with keyboard only users. Is adding tabindex=0
on the abbr to get focus a bad thing?




On Mon, Apr 26, 2021 at 5:09 PM Aditya via WebAIM-Forum <
<EMAIL REMOVED> > wrote:

> The problem is still the keyboard only user. Without mouse or assistive
> technology that span is not accessible.
>
>
> Sent from my iPhone
>
> > On Apr 26, 2021, at 2:50 PM, Tom Livingston < <EMAIL REMOVED> > wrote:
> >
> > OK, thanks.
> >
> > Interesting. How about:
> >
> > <p><abbr title="Tom Livingston">TL</abbr><span
> > class="visuallyhidden">Tom Livingston</span></p>
> >
> > .visuallyhidden {
> > position: absolute !important;
> > height: 1px; width: 1px;
> > overflow: hidden;
> > clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
> > clip: rect(1px, 1px, 1px, 1px);
> > }
> >
> > I assume the span would be read as content to the <p> even though it
> > is visually hidden. Might be a bit odd or repetitive but acceptable?
> >
> >> On Mon, Apr 26, 2021 at 3:39 PM Peter Weil < <EMAIL REMOVED> > wrote:
> >>
> >> Not by default.
> >>
> >> If it's of any importance at to display the full names, the best option
> is to display the full name and dispense with the initials. That's the most
> straightforward, simplest, and accessible solution.
> >>
> >> If you still want to use the initials for your content, the most
> semantic way to do it might be to enclose the initials in an <abbr> element
> and use the title attribute for the expansion. But it still wouldn't be
> read by default by a screenreader.
> >>
> >> Peter
> >>
> >> --
> >> Peter Weil, Web Developer
> >> University Marketing
> >> University of Wisconsin–Madison
> >> <EMAIL REMOVED>
> >> (m) 608-220-3089
> >>
> >> On Apr 26, 2021, 2:25 PM -0500, <EMAIL REMOVED> < <EMAIL REMOVED> >,
> wrote:
> >> But wouldn't the AT read the title attribute, supplementing the visual
> hover?
> >>
> >>
> >> > >> > >> > >> > >
> >
> >
> > --
> >
> > 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