WebAIM - Web Accessibility In Mind

E-mail List Archives

Adding ARIA tag to "Click here" links?

for

From: Henry, Michael (IntelliDyne)
Date: Dec 12, 2017 9:33AM

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