E-mail List Archives
Thread: Headings and link text
Number of posts in this thread: 6 (In chronological order)
From: Liko, Todd
Date: Mon, Sep 08 2014 9:18AM
Subject: Headings and link text
No previous message | Next message →
Hello all.
I am looking for others interpretation of Success Criterion 2.4.4 Link Purpose (In Context). I had a lengthy discussion with content owners this morning.
Here is the scenario. We have a page with multiple <h2> headings. Under each heading there are links. The issue is under some of the heading there are links using the same link text. For example:
Publications
· Transport Canada
· Fisheries and Ocean
Act and Regulation
· Transport Canada
· Fisheries and Ocean
Success Criterion 2.4.4 Link Purpose (In Context) says:
In some situations, authors may want to provide part of the description of the link in logically related text that provides the context for the link. In this case the user should be able to identify the purpose of the link without moving focus from the link. In other words, they can arrive on a link and find out more about it without losing their place. This can be achieved by putting the description of the link in the same sentence, paragraph, list item, the heading immediately preceding the link, or table cell as the link, or in the table header cell for a link in a data table, because these are directly associated with the link itself.
My concern is how does someone using assistive technologies differentiate between both links when viewing only a list of links or tabbing through the page. The links on their own are not descriptive and link to different pages.
One proposition is to add invisible text at the end of each link so that screen readers will read out and identify each link.
Any thoughts on this?
_______
Todd Liko
Communications Advisor | Conseiller en communications
Web Services | Services Web
Communications and Marketing | Communications et Marketing
427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5
e-mail / courriel: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
blackberry: 613-796-6375
Government of Canada | Gouvernement du Canada
From: Mallory van Achterberg
Date: Mon, Sep 08 2014 9:55AM
Subject: Re: Headings and link text
← Previous message | Next message →
On Mon, Sep 08, 2014 at 11:18:44AM -0400, Liko, Todd wrote:
> One proposition is to add invisible text at the end of each link so that screen readers will read out and identify each link.
I've seen this technique used in a similar setup, a sourceforge-like
page where the heading stated the document version of each file.
h2
MS Word
- foo (so actually foo.doc)
- bar
h2
PDF
- foo (so actually foo.pdf)
- bar
And they did just that:
[a]foo[span] Word doc[/span][/a]
...
[a]foo[span] PDF[/span][/a]
Spans were eiter clipped or pulled offscreen, I forget which.
Important was the spaces: visually the user shouldn't have seen
an extending underling from a space, but a space was needed between
filename and type, so it goes in the span.
Normally I like hidden text to come first, because people skim, but
with names like these, even visually we're used to them being tacked
at the end.
I think also it was a bad idea here-- file types should also just
be in the link name anyway. But that might just be too much clutter
on the site you're referring to.
_mallory
From: Michael Tangen
Date: Mon, Sep 08 2014 9:32AM
Subject: Re: Headings and link text
← Previous message | Next message →
The Bootstrap uses this class (sr-only) for screenreader only text:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
put a span tag after your menu item for the supplemental text and make sure
that span tag has .sr-only.
On Mon, Sep 8, 2014 at 10:18 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
> Hello all.
>
> I am looking for others interpretation of Success Criterion 2.4.4 Link
> Purpose (In Context). I had a lengthy discussion with content owners this
> morning.
>
> Here is the scenario. We have a page with multiple <h2> headings. Under
> each heading there are links. The issue is under some of the heading there
> are links using the same link text. For example:
>
> Publications
>
>
> · Transport Canada
>
> · Fisheries and Ocean
>
> Act and Regulation
>
>
> · Transport Canada
>
> · Fisheries and Ocean
>
> Success Criterion 2.4.4 Link Purpose (In Context) says:
>
> In some situations, authors may want to provide part of the description of
> the link in logically related text that provides the context for the link.
> In this case the user should be able to identify the purpose of the link
> without moving focus from the link. In other words, they can arrive on a
> link and find out more about it without losing their place. This can be
> achieved by putting the description of the link in the same sentence,
> paragraph, list item, the heading immediately preceding the link, or table
> cell as the link, or in the table header cell for a link in a data table,
> because these are directly associated with the link itself.
>
> My concern is how does someone using assistive technologies differentiate
> between both links when viewing only a list of links or tabbing through the
> page. The links on their own are not descriptive and link to different
> pages.
>
> One proposition is to add invisible text at the end of each link so that
> screen readers will read out and identify each link.
>
> Any thoughts on this?
>
> _______
> Todd Liko
> Communications Advisor | Conseiller en communications
> Web Services | Services Web
> Communications and Marketing | Communications et Marketing
> 427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5
> e-mail / courriel: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
> blackberry: 613-796-6375
> Government of Canada | Gouvernement du Canada
>
> > > >
From: Liko, Todd
Date: Mon, Sep 08 2014 9:39AM
Subject: Re: Headings and link text
← Previous message | Next message →
The success criterion also says:
"It is a best practice for links with the same destination to have consistent descriptions (and this is a requirement per Success Criterion 3.2.4 for pages in a set). It is also a best practice for links with different purposes and destinations to have different descriptions."
However in reading Success Criterion 3.2.4. it applies more to multiple pages than on a single page.
Todd.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Michael Tangen
Sent: Monday, September 08, 2014 11:32 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headings and link text
The Bootstrap uses this class (sr-only) for screenreader only text:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
put a span tag after your menu item for the supplemental text and make sure that span tag has .sr-only.
On Mon, Sep 8, 2014 at 10:18 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
> Hello all.
>
> I am looking for others interpretation of Success Criterion 2.4.4 Link
> Purpose (In Context). I had a lengthy discussion with content owners
> this morning.
>
> Here is the scenario. We have a page with multiple <h2> headings.
> Under each heading there are links. The issue is under some of the
> heading there are links using the same link text. For example:
>
> Publications
>
>
> · Transport Canada
>
> · Fisheries and Ocean
>
> Act and Regulation
>
>
> · Transport Canada
>
> · Fisheries and Ocean
>
> Success Criterion 2.4.4 Link Purpose (In Context) says:
>
> In some situations, authors may want to provide part of the
> description of the link in logically related text that provides the context for the link.
> In this case the user should be able to identify the purpose of the
> link without moving focus from the link. In other words, they can
> arrive on a link and find out more about it without losing their
> place. This can be achieved by putting the description of the link in
> the same sentence, paragraph, list item, the heading immediately
> preceding the link, or table cell as the link, or in the table header
> cell for a link in a data table, because these are directly associated with the link itself.
>
> My concern is how does someone using assistive technologies
> differentiate between both links when viewing only a list of links or
> tabbing through the page. The links on their own are not descriptive
> and link to different pages.
>
> One proposition is to add invisible text at the end of each link so
> that screen readers will read out and identify each link.
>
> Any thoughts on this?
>
> _______
> Todd Liko
> Communications Advisor | Conseiller en communications Web Services |
> Services Web Communications and Marketing | Communications et
> Marketing
> 427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5 e-mail /
> courriel: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
> blackberry: 613-796-6375
> Government of Canada | Gouvernement du Canada
>
> > > list messages to = EMAIL ADDRESS REMOVED =
>
From: cb
Date: Mon, Sep 08 2014 10:13AM
Subject: Re: Headings and link text
← Previous message | Next message →
The W3C recommends aria-labelledby or aria-label for Success Criterion
2.4.4. It will replace the link text with the text of the element used
as the label (for aria-labelledby) or the contents of the attribute
(for aria-label). See http://www.w3.org/TR/WCAG20-TECHS/ARIA7.html and
http://www.w3.org/TR/WCAG20-TECHS/ARIA8.html. You can specify multiple
elements with aria-labelledby, and that will concatenate them.
You could also look at aria-describedby. It's not one of the W3C
recommended techniques, but it should work. It will append the text of
the element used for description to the text of the link.
Caroline
On Mon, Sep 8, 2014 at 8:39 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
> The success criterion also says:
>
> "It is a best practice for links with the same destination to have consistent descriptions (and this is a requirement per Success Criterion 3.2.4 for pages in a set). It is also a best practice for links with different purposes and destinations to have different descriptions."
>
> However in reading Success Criterion 3.2.4. it applies more to multiple pages than on a single page.
>
> Todd.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Michael Tangen
> Sent: Monday, September 08, 2014 11:32 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Headings and link text
>
> The Bootstrap uses this class (sr-only) for screenreader only text:
>
> .sr-only {
> position: absolute;
> width: 1px;
> height: 1px;
> margin: -1px;
> padding: 0;
> overflow: hidden;
> clip: rect(0,0,0,0);
> border: 0;
> }
>
> put a span tag after your menu item for the supplemental text and make sure that span tag has .sr-only.
>
>
> On Mon, Sep 8, 2014 at 10:18 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hello all.
>>
>> I am looking for others interpretation of Success Criterion 2.4.4 Link
>> Purpose (In Context). I had a lengthy discussion with content owners
>> this morning.
>>
>> Here is the scenario. We have a page with multiple <h2> headings.
>> Under each heading there are links. The issue is under some of the
>> heading there are links using the same link text. For example:
>>
>> Publications
>>
>>
>> · Transport Canada
>>
>> · Fisheries and Ocean
>>
>> Act and Regulation
>>
>>
>> · Transport Canada
>>
>> · Fisheries and Ocean
>>
>> Success Criterion 2.4.4 Link Purpose (In Context) says:
>>
>> In some situations, authors may want to provide part of the
>> description of the link in logically related text that provides the context for the link.
>> In this case the user should be able to identify the purpose of the
>> link without moving focus from the link. In other words, they can
>> arrive on a link and find out more about it without losing their
>> place. This can be achieved by putting the description of the link in
>> the same sentence, paragraph, list item, the heading immediately
>> preceding the link, or table cell as the link, or in the table header
>> cell for a link in a data table, because these are directly associated with the link itself.
>>
>> My concern is how does someone using assistive technologies
>> differentiate between both links when viewing only a list of links or
>> tabbing through the page. The links on their own are not descriptive
>> and link to different pages.
>>
>> One proposition is to add invisible text at the end of each link so
>> that screen readers will read out and identify each link.
>>
>> Any thoughts on this?
>>
>> _______
>> Todd Liko
>> Communications Advisor | Conseiller en communications Web Services |
>> Services Web Communications and Marketing | Communications et
>> Marketing
>> 427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
>> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5 e-mail /
>> courriel: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
>> blackberry: 613-796-6375
>> Government of Canada | Gouvernement du Canada
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
> > > > >
From: Liko, Todd
Date: Mon, Sep 08 2014 11:45AM
Subject: Re: Headings and link text
← Previous message | No next message
Thank Caroline and all who replied.
Often there are multiple recommended techniques and for me, they key is determining which is the best, both in terms for assistive technology and in time, effort and resources.
An when I say time, effort and resources, I do not mean by if it is worth it, but more how to streamline the time, effort and resources required.
Todd.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of cb
Sent: Monday, September 08, 2014 12:13 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Headings and link text
The W3C recommends aria-labelledby or aria-label for Success Criterion 2.4.4. It will replace the link text with the text of the element used as the label (for aria-labelledby) or the contents of the attribute (for aria-label). See http://www.w3.org/TR/WCAG20-TECHS/ARIA7.html and http://www.w3.org/TR/WCAG20-TECHS/ARIA8.html. You can specify multiple elements with aria-labelledby, and that will concatenate them.
You could also look at aria-describedby. It's not one of the W3C recommended techniques, but it should work. It will append the text of the element used for description to the text of the link.
Caroline
On Mon, Sep 8, 2014 at 8:39 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
> The success criterion also says:
>
> "It is a best practice for links with the same destination to have consistent descriptions (and this is a requirement per Success Criterion 3.2.4 for pages in a set). It is also a best practice for links with different purposes and destinations to have different descriptions."
>
> However in reading Success Criterion 3.2.4. it applies more to multiple pages than on a single page.
>
> Todd.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Michael
> Tangen
> Sent: Monday, September 08, 2014 11:32 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Headings and link text
>
> The Bootstrap uses this class (sr-only) for screenreader only text:
>
> .sr-only {
> position: absolute;
> width: 1px;
> height: 1px;
> margin: -1px;
> padding: 0;
> overflow: hidden;
> clip: rect(0,0,0,0);
> border: 0;
> }
>
> put a span tag after your menu item for the supplemental text and make sure that span tag has .sr-only.
>
>
> On Mon, Sep 8, 2014 at 10:18 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hello all.
>>
>> I am looking for others interpretation of Success Criterion 2.4.4
>> Link Purpose (In Context). I had a lengthy discussion with content
>> owners this morning.
>>
>> Here is the scenario. We have a page with multiple <h2> headings.
>> Under each heading there are links. The issue is under some of the
>> heading there are links using the same link text. For example:
>>
>> Publications
>>
>>
>> · Transport Canada
>>
>> · Fisheries and Ocean
>>
>> Act and Regulation
>>
>>
>> · Transport Canada
>>
>> · Fisheries and Ocean
>>
>> Success Criterion 2.4.4 Link Purpose (In Context) says:
>>
>> In some situations, authors may want to provide part of the
>> description of the link in logically related text that provides the context for the link.
>> In this case the user should be able to identify the purpose of the
>> link without moving focus from the link. In other words, they can
>> arrive on a link and find out more about it without losing their
>> place. This can be achieved by putting the description of the link in
>> the same sentence, paragraph, list item, the heading immediately
>> preceding the link, or table cell as the link, or in the table header
>> cell for a link in a data table, because these are directly associated with the link itself.
>>
>> My concern is how does someone using assistive technologies
>> differentiate between both links when viewing only a list of links or
>> tabbing through the page. The links on their own are not descriptive
>> and link to different pages.
>>
>> One proposition is to add invisible text at the end of each link so
>> that screen readers will read out and identify each link.
>>
>> Any thoughts on this?
>>
>> _______
>> Todd Liko
>> Communications Advisor | Conseiller en communications Web Services |
>> Services Web Communications and Marketing | Communications et
>> Marketing
>> 427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
>> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5 e-mail /
>> courriel: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
>> blackberry: 613-796-6375
>> Government of Canada | Gouvernement du Canada
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
> > > list messages to = EMAIL ADDRESS REMOVED =
> > > list messages to = EMAIL ADDRESS REMOVED =