WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Adding ARIA tag to "Click here" links?

for

From: Wolfgang Berndorfer
Date: Dec 15, 2017 11:16AM


Sorry, I am late!
But: The maual effort for coding aria-labbeledby correctly seems rather
great to me.
Don't have any idea about CMS tools to realise the necessary
ID-constructions. And if there are any, are they known?

So why not simply use aria-label="More about [something]" on the <a>-tag?
This is known by more authors, causes less tipping errors and shows
texting-efforts more intuitivelly by copy-and-past-coding.

No question that a labbeledby-construction would be smarter, if it could be
generated technically.

From the alps!

Wolfgang
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag
von Henry, Michael (IntelliDyne)
Gesendet: Mittwoch, 13. Dezember 2017 14:19
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Adding ARIA tag to "Click here" links?

Thank you all for the excellent feedback. Great suggestions.
Sean, I hadn't even considered what happens if the content is changed down
the road. That could really muddle everything up.

I think I'll stick the the "visiblyHidden" text... seems simpler and more
future-proof.


thanks again,

Mike


---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System
Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of
Birkir R. Gunnarsson < <EMAIL REMOVED> >
Sent: Wednesday, December 13, 2017 7:14:39 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Adding ARIA tag to "Click here" links?

I'd just go with the good old visibly hidden text )except I would move
it to after the visible "learn more" and add the word "about" new
item" (make sure to start the visibly hidden span with a whitespace).



On 12/12/17, cb < <EMAIL REMOVED> > wrote:
> I would hesitate to do something that would make the aria-label or
> aria-labeledby content significantly different from the visible content.
If
> you're using a combination magnifier/screenreader (such as for low
vision),
> or highlighter/screenreader (such as for certain cognitive disabilities)
it
> could be confusing to have what's read out loud for a link not match what
> you can see.
>
> Caroline
>
> On Tue, Dec 12, 2017 at 9:50 AM, Henry, Michael (IntelliDyne) <
> <EMAIL REMOVED> > wrote:
>
>> As for which aria attr to use, it looks like "aria-labelledby" fits my
>> situation best. It applies when there is an existing visible text node to
>> refer to, versus aria-label, which would apply when a label or
description
>> of some sort needs to be added.
>> Taken from this reference (https://www.w3.org/WAI/GL/
>> wiki/Using_aria-labelledby_for_link_purpose):
>>
>>
>>
>> With the aria-labelledby attribute, authors can use a visible text
element
>> on the page as a label for a focusable element (a form control or a
link).
>> For example, a "read more..." link could be associated with the text of
>> the
>> heading of the preceding section to make the purpose of the link
>> unambiguous
>>
>>
>> ---
>> Mike S. Henry
>> Creative Services Lead
>> IntelliDyne Contract Employee
>> Supporting Enterprise Infrastructure (formerly Military Health System
>> Cyberinfrastructure Services - MCiS)
>> Desk: (703) 882-3962
>>
>> >> From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of
>> Tim Harshbarger < <EMAIL REMOVED> >
>> Sent: Tuesday, December 12, 2017 12:43:28 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Adding ARIA tag to "Click here" links?
>>
>> The other option would be to use aria-describedby on the link instead of
>> using the aria-labelledby attribute.
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of JP Jamous
>> Sent: Tuesday, December 12, 2017 11:24 AM
>> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Adding ARIA tag to "Click here" links?
>>
>> Although I don't like that approach, you can use aria-label="" in the <a>
>> tag. That would override the actual link caption.
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Henry, Michael (IntelliDyne)
>> Sent: Tuesday, December 12, 2017 10:33 AM
>> To: <EMAIL REMOVED>
>> Subject: [WebAIM] Adding ARIA tag to "Click here" links?
>>
>> Hello all,
>>
>>
>> I'm trying to determine which is the better solution to providing context
>> for "Learn More"/"Click here" links. For static content (where I can
>> hardcode directly into the markup), I settled on this solution:
>>
>>
>> In this scenario:
>> <h2>Introducing this New Product!</h2>
>> <span>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</span>
>> <a href="any">Learn More</a>
>> </div>
>>
>>
>> I've added sr-only supplemental text. The class "visiblyHidden" positions
>> absolutely off screen:
>>
>> <h2>Introducing this New Product!</h2>
>> <span>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</span>
>> <a href="any">
>> <span class="visiblyHidden">Introducing this New
>> Product!:</span>
>> Learn More
>> </a>
>> </div>
>>
>>
>> Is this valid?
>>
>>
>> Or should I use an aria-labelledby attribute on the <a> and tie it to the
>> <h2> AND the <a>, via an ID, like so?:
>>
>> <h2 id="typeNode1">Introducing this New Product!</h2>
>> <span>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</span>
>> <a href="any"id="typeNode2" aria-labelledby="typeNode1
>> typeNode2">Learn More</a> </div>
>>
>>
>> Which is better?
>>
>>
>> thanks,
>>
>> Mike
>>
>>
>>
>> ---
>> Mike S. Henry
>> Creative Services Lead
>> IntelliDyne Contract Employee
>> Supporting Enterprise Infrastructure (formerly Military Health System
>> Cyberinfrastructure Services - MCiS)
>> Desk: (703) 882-3962
>>
>> >> >> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >> >> >> >> >> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.