WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Skip Nav and the <link> tag

for

Number of posts in this thread: 11 (In chronological order)

From: Sandy Clark
Date: Tue, May 11 2004 7:09AM
Subject: Skip Nav and the <link> tag
No previous message | Next message →

I recently got a question from someone who is trying to figure out whether
their parent site is using something correctly.


<link rel="skip to content" href="#page-content" title="Jump to this page's
content" /> <link rel="skip to navigation" href="#page-navigation"
title="Jump to this page's navigation links" />


And respectively in the body:


<td valign="top" rowspan="2" id="page-content"></td>
<td valign="top" id="page-navigation"></td>


They referenced an article found here
http://www.wats.ca/articles/extendinglinkrelationships/53


The problem as I see it is that in some (albeit limited) testing, I found
that neither Home Page Reader nor Lynx even acknowledges that these things
exist. While they show up in Mozillas Site Navigation Bar I don't think it
is a truly accessible situation.



Does anyone have some comments or insights on this? I want to make sure I
give people asking me questions good information.


Thanks


Sandy Clark

From: julian.rickards@ndm.gov.on.ca
Date: Tue, May 11 2004 7:23AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

There are two issues you are dealing with: the link to an id and the link
using the <link> tag. Unfortunately, neither are fully supported except by
the most current browsers, Gecko-based and Opera and possibly Safari/KHTML
although I can't test them as I am neither on a Mac, nor on Linux (KDE).


The <a name="xxx"></a> construct has been deprecated: name is now replaced
by id (in most circumstances, not in the case of forms where <input
type="text" name="firstname"> is still valid). Therefore <a href="#content">
in current browsers will jump the user to <div id="content">. This is the
first issue.


The second is the use of the <link> tags which while valid are only seeing
use and support in recent years (1 or 2 years) with Opera 7+ and Gecko
browsers. To see the links in Firefox, you need an extension which will show
you them in the status bar and allow you to link to them. In Opera, they are
displayed at the top of the document window.


Regarding accessibility, they are perfectly fine except that IE doesn't
display the <link>s and doesn't support a link to an id such as <a
href="id_name"> --> <div id="id_name">. Essentially, what you accomplish by
using these is to provide additional methods of navigating your pages and
site using valid and legal techniques but, just like the p>a child selector,
may not be supported by all browsers.


If it is important that <a href="#content"> be supported, then you need <a
name="content"></a> so that IE6 and older browsers can use it.


---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



> -----Original Message-----
> From: Sandy Clark [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, May 11, 2004 9:08 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Skip Nav and the <link> tag
>
>
> I recently got a question from someone who is trying to
> figure out whether
> their parent site is using something correctly.
>
> <link rel="skip to content" href="#page-content" title="Jump
> to this page's
> content" /> <link rel="skip to navigation" href="#page-navigation"
> title="Jump to this page's navigation links" />
>
> And respectively in the body:
>
> <td valign="top" rowspan="2" id="page-content"></td>
> <td valign="top" id="page-navigation"></td>
>
> They referenced an article found here
> http://www.wats.ca/articles/extendinglinkrelationships/53
>
> The problem as I see it is that in some (albeit limited)
> testing, I found
> that neither Home Page Reader nor Lynx even acknowledges
> that these things
> exist. While they show up in Mozillas Site Navigation Bar I
> don't think it
> is a truly accessible situation.
>
>
> Does anyone have some comments or insights on this? I want
> to make sure I
> give people asking me questions good information.
>
> Thanks
>
> Sandy Clark

From: Mike Stenhouse
Date: Tue, May 11 2004 7:26AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

Hi Sandy


<snip>
I recently got a question from someone who is trying to figure out
whether their parent site is using something correctly.


<link rel="skip to content" href="#page-content" title="Jump to this
page's content" /> <link rel="skip to navigation"
href="#page-navigation" title="Jump to this page's navigation links" />


And respectively in the body:


<td valign="top" rowspan="2" id="page-content"></td>
<td valign="top" id="page-navigation"></td>
</snip>


That use for the <link> element is intended as a logical link between
documents, not a hyperlink within a doc. As far as I know, none of the
browsers currently do anything particularly useful with <link rel="home"
href="/home.html" />... It's a suggestion for future-proofing that will,
at some point, be used to give the user some idea of the page's position
within a set of pages and perhaps be used to generate some alternate
navigation. I could be wrong about that...


For skip links you'd be better off using <a href="#page-content"
title="jump to the page's content">skip to content</a>.


Cheers


Mike
web developer | designer
www.donotremove.co.uk

From: Chris Heilmann
Date: Tue, May 11 2004 3:38PM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

> Hi Sandy
>
> <snip>
> I recently got a question from someone who is trying to figure out
> whether their parent site is using something correctly.
>
> <link rel="skip to content" href="#page-content" title="Jump to this
> page's content" /> <link rel="skip to navigation"
> href="#page-navigation" title="Jump to this page's navigation links" />
>
> And respectively in the body:
>
> <td valign="top" rowspan="2" id="page-content"></td>
> <td valign="top" id="page-navigation"></td>
> </snip>
>
> That use for the <link> element is intended as a logical link between
> documents, not a hyperlink within a doc. As far as I know, none of the
> browsers currently do anything particularly useful with <link rel="home"
> href="/home.html" />... It's a suggestion for future-proofing that will,
> at some point, be used to give the user some idea of the page's position
> within a set of pages and perhaps be used to generate some alternate
> navigation. I could be wrong about that...


It is actually nothing new, as it had been around for some while[1], and
is meant to link documents together to a big document.


Opera 7.5 displays the links in an extra toolbar, and there are extensions
for Mozilla[2] and IE[3] available to do so.


The nice thing about mozilla is that it caches next and prev pages, which
speeds things up a bit when browsing a big bunch of documents.


I wrote a small Javascript that generates a dropdown with all the
navigation links, I'll show it soon here, as part of a site check, if
anyone is interested, mail me about it.


> For skip links you'd be better off using <a href="#page-content"
> title="jump to the page's content">skip to content</a>.


Full ACK, also, as skip links should be visible.


[1] http://www.w3.org/TR/REC-html32#link
[2] http://cdn.mozdev.org/linkToolbar/
[3] http://www.draig.de/LinkBar/index.en.html


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: Derek Featherstone
Date: Tue, May 11 2004 10:06AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

Sandy Clark wrote:
> They referenced an article found here
> http://www.wats.ca/articles/extendinglinkrelationships/53


<snip />


> Does anyone have some comments or insights on this? I want to make sure I
> give people asking me questions good information.


Hi Sandy,


A few comments -- when I wrote the article, there were a few key points that
I included, and will highlight here, just for clarity to all:


1. "Many sites use invisible skip navigation links, or visible skip
navigation links to allow for users to quickly access the different content
areas of their sites. We like the functionality behind this, but would love
to see a more semantic means for indicating this relationship -- after all,
indicating the start of the content of a page, or any other sections, really
is metadata isn't it?"


2. "These items are available via Mozilla's Site Navigation bar, as well as
that of Opera. Unfortunately, this functionality isn't readily exposed in
Internet Explorer. The bookmark link definitions already exist, so this is
possible today. The only problem with this, is that it is essentially
"invisible" to users, as most don't know that site navigation bars even
exist, nor are they easy to access using keyboard navigation."


3. "Further, with a standardized set of bookmarks to indicate navigation,
content and other important sections of a document via the link element and
by Allowing Keystroke access to Link Relationships, we would allow users
quick keystroke access to these sections based on their own preferences,
eliminating the need to provide visible or hidden skip navigation links."


We are considering whether or not we will move back to visible skip links in
the next version of our site. If we do so, however, we will maintain the
semantic relationships that we have established with the <link
rel="bookmark" /> elements to provide the "best of both worlds". We use a
similar strategy within our articles on our site -- as an example, in the
article you referenced, we have defined <link rel="" /> for related articles
on the same theme, but also listed them in the body of the articles so that
they are more readily "available" to people using browsers that don't
support <link> properly.


Hope this helps to clarify. It is also important to note that some of the
code samples included in this article and other articles on our site are
code samples that show how we'd like to see things done in the future, but
can't currently use today.


Best regards,
Derek.
--
Derek Featherstone = EMAIL ADDRESS REMOVED =
phone: 613.599.9784; toll-free: 1.866.932.4878 (North America)
Web Accessibility Specialist / Co-founder of WATS.ca
Web Accessibility Testing and Services http://www.wats.ca

From: Sandy Clark
Date: Tue, May 11 2004 10:28AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

Thanks for replying Derek.


Unfortunately, in this case, the people took your samples, applied them to
existing code an d are telling the person asking me that it is fully
accessible. It looks like a great concept for future thought, but not with
today's user agents.


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On
Behalf Of Derek Featherstone
Sent: Tuesday, May 11, 2004 10:06 AM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Skip Nav and the <link> tag


Sandy Clark wrote:
> They referenced an article found here
> http://www.wats.ca/articles/extendinglinkrelationships/53


<snip />


> Does anyone have some comments or insights on this? I want to make
> sure I give people asking me questions good information.


Hi Sandy,


A few comments -- when I wrote the article, there were a few key points that
I included, and will highlight here, just for clarity to all:


1. "Many sites use invisible skip navigation links, or visible skip
navigation links to allow for users to quickly access the different content
areas of their sites. We like the functionality behind this, but would love
to see a more semantic means for indicating this relationship -- after all,
indicating the start of the content of a page, or any other sections, really
is metadata isn't it?"


2. "These items are available via Mozilla's Site Navigation bar, as well as
that of Opera. Unfortunately, this functionality isn't readily exposed in
Internet Explorer. The bookmark link definitions already exist, so this is
possible today. The only problem with this, is that it is essentially
"invisible" to users, as most don't know that site navigation bars even
exist, nor are they easy to access using keyboard navigation."


3. "Further, with a standardized set of bookmarks to indicate navigation,
content and other important sections of a document via the link element and
by Allowing Keystroke access to Link Relationships, we would allow users
quick keystroke access to these sections based on their own preferences,
eliminating the need to provide visible or hidden skip navigation links."


We are considering whether or not we will move back to visible skip links in
the next version of our site. If we do so, however, we will maintain the
semantic relationships that we have established with the <link
rel="bookmark" /> elements to provide the "best of both worlds". We use a
similar strategy within our articles on our site -- as an example, in the
article you referenced, we have defined <link rel="" /> for related articles
on the same theme, but also listed them in the body of the articles so that
they are more readily "available" to people using browsers that don't
support <link> properly.


Hope this helps to clarify. It is also important to note that some of the
code samples included in this article and other articles on our site are
code samples that show how we'd like to see things done in the future, but
can't currently use today.


Best regards,
Derek.
--
Derek Featherstone = EMAIL ADDRESS REMOVED =
phone: 613.599.9784; toll-free: 1.866.932.4878 (North America)
Web Accessibility Specialist / Co-founder of WATS.ca Web Accessibility
Testing and Services http://www.wats.ca

From: Jon Gunderson
Date: Tue, May 11 2004 8:56AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

This is a feature that I would put on our to do list for the
IEAccessibility plug-in which adds accessibilility features to
Internet Explorer and the Mozilla accessibility extension
which would integrate accessibility features into one plug-in.
The current beta release is available at:


Internet Explorer Accessibility Plug-in
http://cita.rehab.uiuc.edu/ieaccessible


Mozilla Accessibility Extensions
http://cita.rehab.uiuc.edu/mozilla


Jon
Jon Gunderson, Ph.D., ATP
Coordinator of Assistive Communication and Information Technology
Division of Rehabilitation - Education Services
MC-574
College of Applied Life Studies
University of Illinois at Urbana/Champaign
1207 S. Oak Street, Champaign, IL 61820


Voice: (217) 244-5870
Fax: (217) 333-0248


E-mail: = EMAIL ADDRESS REMOVED =


WWW: http://cita.rehab.uiuc.edu/
WWW: http://www.staff.uiuc.edu/~jongund

From: Jim Thatcher
Date: Tue, May 11 2004 1:27AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

> If it is important that <a href="#content"> be supported, then you need
> <a name="content"></a> so that IE6 and older browsers can use it.


I just tried <a href="content">Skip to content</a> with a target <div
id="content"></div> in IE 6 and to my surprise it works.


Jim
Accessibility, What Not to do: http://jimthatcher.com/whatnot.htm.
Web Accessibility Tutorial: http://jimthatcher.com/webcourse1.htm.



-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On
Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Tuesday, May 11, 2004 8:24 AM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Skip Nav and the <link> tag


There are two issues you are dealing with: the link to an id and the link
using the <link> tag. Unfortunately, neither are fully supported except by
the most current browsers, Gecko-based and Opera and possibly Safari/KHTML
although I can't test them as I am neither on a Mac, nor on Linux (KDE).


The <a name="xxx"></a> construct has been deprecated: name is now replaced
by id (in most circumstances, not in the case of forms where <input
type="text" name="firstname"> is still valid). Therefore <a href="#content">
in current browsers will jump the user to <div id="content">. This is the
first issue.


The second is the use of the <link> tags which while valid are only seeing
use and support in recent years (1 or 2 years) with Opera 7+ and Gecko
browsers. To see the links in Firefox, you need an extension which will show
you them in the status bar and allow you to link to them. In Opera, they are
displayed at the top of the document window.


Regarding accessibility, they are perfectly fine except that IE doesn't
display the <link>s and doesn't support a link to an id such as <a
href="id_name"> --> <div id="id_name">. Essentially, what you accomplish by
using these is to provide additional methods of navigating your pages and
site using valid and legal techniques but, just like the p>a child selector,
may not be supported by all browsers.


If it is important that <a href="#content"> be supported, then you need <a
name="content"></a> so that IE6 and older browsers can use it.


---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



> -----Original Message-----
> From: Sandy Clark [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, May 11, 2004 9:08 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Skip Nav and the <link> tag
>
>
> I recently got a question from someone who is trying to
> figure out whether
> their parent site is using something correctly.
>
> <link rel="skip to content" href="#page-content" title="Jump
> to this page's
> content" /> <link rel="skip to navigation" href="#page-navigation"
> title="Jump to this page's navigation links" />
>
> And respectively in the body:
>
> <td valign="top" rowspan="2" id="page-content"></td>
> <td valign="top" id="page-navigation"></td>
>
> They referenced an article found here
> http://www.wats.ca/articles/extendinglinkrelationships/53
>
> The problem as I see it is that in some (albeit limited)
> testing, I found
> that neither Home Page Reader nor Lynx even acknowledges
> that these things
> exist. While they show up in Mozillas Site Navigation Bar I
> don't think it
> is a truly accessible situation.
>
>
> Does anyone have some comments or insights on this? I want
> to make sure I
> give people asking me questions good information.
>
> Thanks
>
> Sandy Clark
>
>

From: julian.rickards@ndm.gov.on.ca
Date: Wed, May 12 2004 6:31AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

> -----Original Message-----
> From: Jim Thatcher [mailto: = EMAIL ADDRESS REMOVED = ]
>
> I just tried <a href="content">Skip to content</a> with a target <div
> id="content"></div> in IE 6 and to my surprise it works.


Weird because it didn't for me - I used my personal site
(http://jrickards.ca/portfolio.php) and the Skip to Content link should go
to <div id="content"> but although it works in Opera and Moz, it doesn't in
IE6.


Jules


---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690

From: julian.rickards@ndm.gov.on.ca
Date: Wed, May 12 2004 6:36AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | Next message →

OK, now it is getting really wierd. First of all, I presented the wrong
link, it should have been http://jrickards.ca/portfolio_websites.php#content
which I couldn't get to work but strangely, a link to a div further down the
pages, http://jrickards.ca/portfolio_websites.php#thorneloe, does work.


I don't think it is a coding issue but I am curious as to why it doesn't
work.


---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Wednesday, May 12, 2004 8:31 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: RE: Skip Nav and the <link> tag
>
>
> > -----Original Message-----
> > From: Jim Thatcher [mailto: = EMAIL ADDRESS REMOVED = ]
> >
> > I just tried <a href="content">Skip to content</a> with a
> target <div
> > id="content"></div> in IE 6 and to my surprise it works.
>
> Weird because it didn't for me - I used my personal site
> (http://jrickards.ca/portfolio.php) and the Skip to Content
> link should go
> to <div id="content"> but although it works in Opera and Moz,
> it doesn't in
> IE6.
>
> Jules
>
> ---------------------------------------------------------
> Julian Rickards
> Digital Publications Distribution Coordinator
> Publications Services Section
> Ontario Ministry of Northern Development and Mines
> Phone: (705) 670-5608
> Fax: (705) 670-5690
>

From: Jim Thatcher
Date: Wed, May 12 2004 7:59AM
Subject: RE: Skip Nav and the <link> tag
← Previous message | No next message

Julian, I haven't checked more yet, but wanted to raise the issue of what it
means for an in-page link to "work." I think that means that when you follow
the link (enter or click on it), visual focus changes to that point (duh) -
BUT it also means that keyboard focus changes too. So the next tab after
activating the in-page link should take you to the first link AFTER the
target of the in-page link. This is broken generally in IE6. It seems that
if the target is an empty link (Yuk) (<A href="content" name="content></A>)
it always works in IE 6. Sometimes when the target in a table cell it works
(true on my site, http://jimthatcher.com). But in flat text, in-page links
don't work for tabbing. I have for years pointed to http://acb.org as an
example of a visible skip link - it is one of the first. Try if, it doesn't
work in the sense defined here.


Jim
Accessibility, What Not to do: http://jimthatcher.com/whatnot.htm.
Web Accessibility Tutorial: http://jimthatcher.com/webcourse1.htm.



-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On
Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Wednesday, May 12, 2004 7:36 AM
To: = EMAIL ADDRESS REMOVED =
Subject: RE: Skip Nav and the <link> tag


OK, now it is getting really wierd. First of all, I presented the wrong
link, it should have been http://jrickards.ca/portfolio_websites.php#content
which I couldn't get to work but strangely, a link to a div further down the
pages, http://jrickards.ca/portfolio_websites.php#thorneloe, does work.


I don't think it is a coding issue but I am curious as to why it doesn't
work.


---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690



> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Wednesday, May 12, 2004 8:31 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: RE: Skip Nav and the <link> tag
>
>
> > -----Original Message-----
> > From: Jim Thatcher [mailto: = EMAIL ADDRESS REMOVED = ]
> >
> > I just tried <a href="content">Skip to content</a> with a
> target <div
> > id="content"></div> in IE 6 and to my surprise it works.
>
> Weird because it didn't for me - I used my personal site
> (http://jrickards.ca/portfolio.php) and the Skip to Content
> link should go
> to <div id="content"> but although it works in Opera and Moz,
> it doesn't in
> IE6.
>
> Jules
>
> ---------------------------------------------------------
> Julian Rickards
> Digital Publications Distribution Coordinator
> Publications Services Section
> Ontario Ministry of Northern Development and Mines
> Phone: (705) 670-5608
> Fax: (705) 670-5690
>