WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings and link text

for

From: cb
Date: Sep 8, 2014 10:13AM

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 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 REMOVED> [mailto: <EMAIL 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 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 REMOVED> <mailto: <EMAIL 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 REMOVED>
>>
> > > > >