WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Wrap part of a word in <span>

for

From: Aditya
Date: Apr 26, 2021 1:13PM

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