E-mail List Archives
Re: Adding ARIA tag to "Click here" links?
From: Henry, Michael (IntelliDyne)
Date: Dec 12, 2017 10:50AM
- Next message: Jennifer Sutton: "status of jQuery and accessibility"
- Previous message: Tim Harshbarger: "Re: Adding ARIA tag to "Click here" links?"
- Next message in Thread: Sean Keegan: "Re: Adding ARIA tag to "Click here" links?"
- Previous message in Thread: Tim Harshbarger: "Re: Adding ARIA tag to "Click here" links?"
- View all messages in this Thread
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
- Next message: Jennifer Sutton: "status of jQuery and accessibility"
- Previous message: Tim Harshbarger: "Re: Adding ARIA tag to "Click here" links?"
- Next message in Thread: Sean Keegan: "Re: Adding ARIA tag to "Click here" links?"
- Previous message in Thread: Tim Harshbarger: "Re: Adding ARIA tag to "Click here" links?"
- View all messages in this Thread