WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: cb
Date: Dec 12, 2017 4:39PM

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