E-mail List Archives
Thread: Adding ARIA tag to "Click here" links?
Number of posts in this thread: 9 (In chronological order)
From: Henry, Michael (IntelliDyne)
Date: Tue, Dec 12 2017 9:33AM
Subject: Adding ARIA tag to "Click here" links?
No previous message | Next message →
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
From: JP Jamous
Date: Tue, Dec 12 2017 10:23AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
Although I don't like that approach, you can use aria-label="" in the <a> tag. That would override the actual link caption.
From: Tim Harshbarger
Date: Tue, Dec 12 2017 10:43AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
The other option would be to use aria-describedby on the link instead of using the aria-labelledby attribute.
From: Henry, Michael (IntelliDyne)
Date: Tue, Dec 12 2017 10:50AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
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 ADDRESS REMOVED = > on behalf of Tim Harshbarger < = EMAIL ADDRESS 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.
From: Sean Keegan
Date: Tue, Dec 12 2017 4:27PM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
> Or should I use an aria-labelledby attribute on the <a>
> and tie it to the <h2> AND the <a>, via an ID,
I did this for a site and it worked just fine...until content editors made
an update. Their approach was to delete the entire paragraph of text and
hyperlink and then copy/paste into the editor the new content. As they were
not familiar with aria attributes or dealing with code, the whole thing
fell apart quickly.
So, it works fine as long as the content does not require regular editing
or updates by others.
Take care,
Sean
From: cb
Date: Tue, Dec 12 2017 4:39PM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> Tim Harshbarger < = EMAIL ADDRESS 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.
>
>
From: Birkir R. Gunnarsson
Date: Wed, Dec 13 2017 5:14AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
>> Tim Harshbarger < = EMAIL ADDRESS 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.
>>
>>
From: Henry, Michael (IntelliDyne)
Date: Wed, Dec 13 2017 6:19AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | Next message →
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 ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
>> Tim Harshbarger < = EMAIL ADDRESS 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.
>>
>>
From: Wolfgang Berndorfer
Date: Fri, Dec 15 2017 11:16AM
Subject: Re: Adding ARIA tag to "Click here" links?
← Previous message | No next message
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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
Birkir R. Gunnarsson < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
>> Tim Harshbarger < = EMAIL ADDRESS 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.
>>
>>