WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Aditya
Date: Apr 26, 2021 3:08PM

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