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:50PM

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