WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings and link text

for

From: Michael Tangen
Date: Sep 8, 2014 9:32AM

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