Skip Links (Full Version)

All Forums >> [Web Development] >> Accessibility



Message

davidrandall -> Skip Links (8/1/2005 5:10:05)

Hi all,

What are people's views on "skip" links? Where do you put them? How do you word them? Do you even use them?

Dave



jaybee -> RE: Skip Links (8/1/2005 5:15:28)

My main problem is remembering to use them. I have a couple of sites to go back and correct.

It depends on the site design as to where and how. I try to set the page up using css so that the links turn up as the last thing on the page when viewed in text mode.

If that's not the case then I'll either stick a text link somewhere obvious or, in one case, have it as the first link in the menu.

I haven't, as you can tell, any hard and fast plans. Are there any recommendations?

I tend to use "Skip Navigation"



Tailslide -> RE: Skip Links (8/1/2005 5:16:34)

Yeah I use 'em (or have done on the last two sites I've done and will do in future).

Depending on the site and the structure I call them either "skip to contents", "Jump to contents" or "skip to navigation" if that's appropriate. I put them in first thing and usually leave them visible although sometimes fairly low contrast to the background. They'll always become stronger on focus to make them more obvious and I mention them in the accessibility statement where there is one.

Reason I leave them visible rather than make them invisible? Firstly I think that they might be useful to PDA viewers (not that there's loads of them) plus people who use keyboards rather than text viewer. Oh and because I haven't found a method I like to make them invisible!! (now the truth comes out!).

Edit: make that used on three sites including my own.



davidrandall -> RE: Skip Links (8/1/2005 5:29:03)

My use of skip links has evolved immensely over the past few months, based on user feedback. I'm following the format as seen at http://www.jackanorynursery.co.uk at the moment as I feel it's most user friendly.

I use the phrase "Skip to Content" so as the user knows what they are skipping to.

In future sites I'm going to use "Skip to main Content".

The reason for this is that when using "Skip to Content", Jaws places most emphasis on the "tent", rendering it as "Skip to content". Adding the extra word changes the emphasis to the whole word - "Skip to main content"



Tailslide -> RE: Skip Links (8/1/2005 5:35:16)

Wonder if sticking an "s" on the end of content helps with the pronounciation at all?



womble -> RE: Skip Links (8/1/2005 5:36:17)

A a couple of articles on the topic which Tailslide passed on elsewhere:
http://www.jimthatcher.com/skipnav.htm
http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html

If I remember rightly one author said that if you've got five or more navigation links above your main content, then you need a skip link.

...or, if you're using CSS you can use it to control the placing of your content on screen so that for example in your code, the main content would come first, catering for screen readers etc. with the navigation further down - 'just' using css to shift it up the page visually (of course that's if you're confident with css positioning)



davidrandall -> RE: Skip Links (8/1/2005 5:44:51)

quote:

Wonder if sticking an "s" on the end of content helps


I've tried that in the past but the issue is how Jaws renders the second syllable of the word.

I always try and place my menu before content - it gives users the option of choosing where they want to go straight from the start.



jaybee -> RE: Skip Links (8/1/2005 10:20:02)

quote:

I always try and place my menu before content - it gives users the option of choosing where they want to go straight from the start.


Ah now that's what I thought initially and I designed my own site to do that but then someone pointed out "How do they know where they want to go when they haven't read the content and don't know what the site is about".

I tend to look at the content of the first page to decide whether I want to bother with the rest of the site.



Donkey -> RE: Skip Links (8/1/2005 10:46:04)

quote:

I tend to look at the content of the first page to decide whether I want to bother with the rest of the site.
That's only true the first time you visit. On subsequent visits you might prefer the navigation to be more easiliy accessible than the content.



Tailslide -> RE: Skip Links (8/1/2005 10:49:58)

That's the beauty of skip links.

If you've got your content first then you can offer a skip to navigation option and if your navigation is first then you offer a skip to contents option - everyone's happy!



jaybee -> RE: Skip Links (8/1/2005 10:59:27)

quote:

On subsequent visits you might prefer the navigation to be more easiliy accessible than the content.


True but does that also apply to someone who is blind? How do they know that the page content hasn't changed?

I rather like Tailslide's idea of the option. I have to admit I've only ever used Skip Navigation which takes you straight to the content but that did seem a bit superfluous when the navigation is last on the page and positioned with css.

Nice one Helena. I'll have a think about that.



Tailslide -> RE: Skip Links (8/1/2005 11:09:32)

I've seen sites that have both on there next to each other like this:

Go to Main Contents | Go to Main Navigation

Ah here's an example: http://www.usability.com.au/index.cfm

I seem to remember seeing a site with a further skip link directed towards the secondary nav.



jaybee -> RE: Skip Links (8/1/2005 11:14:18)

Smart, love the tools down the right hand side.



Donkey -> RE: Skip Links (8/1/2005 11:34:13)

Excuse me if I'm not understanding the concept, but it looks to me that skip links used in the way shown are only really useful to someone who is visually impaired and using a special browser. So why not use visibility:hidden;? Surely there is not much point in using skip links with a normal browser because if you are able-bodied enough to click on the link or use the access key then it is just as easy to scroll down or use the up/down arrows? So if it is superfluous for all except the visually impaired why complicate matters for everyone else by leaving it visible?

<edit>typos and bad spelling</edit>



Tailslide -> RE: Skip Links (8/1/2005 11:42:48)

Not entirely - although lots of people do hide the link.

Possible advantages of showing the skip link (IMO):

1. For people who are using a visual browser but not a mouse - they can tab straight to the contents/navigation.
2. For those using PDAs - they can do the same.
3. Methods of hiding stuff can lead to problems - SEs don't like hidden things but more importantly depending on the method you choose some text readers don't like one method, some don't like another method - you might end up defeating the whole purpose of it. Sticking the link off the side of the page could lead to problems in the future if screens get much wider. Blooming everything's got a downside as well as an upside far as I can see!!
4. I suppose it raises awareness of accessibility in websites too which is a positive in my book.

I don't think it's a clear cut argument either way currently - there are perfectly reasonable arguments on both sides - so it ends up being personal preference.



davidrandall -> RE: Skip Links (8/1/2005 11:47:23)

quote:

So why not use visibility:hidden;?


I keep mine visible for 3 main reasons:


  • users who are navigating by keyboard don't get confused
  • I'm advertising that the site is accessible by placing it in a group with the accessibility statement and sitemap
  • Search engines may penalise a site with hidden text as it may interpret it as keyword spamming.


Just my opinion as to what works best for me



Reflect -> RE: Skip Links (8/1/2005 16:05:40)

I am wondering what the SEs think about this (thinking out loud here only)? Here is one common example I see for this "link"...

<a href="#main">
<img src="spacer.gif" width="1" height="1" alt="Skip Navigation"></a>

Now a few years back I was told most SEs feed off of 1X1 pixel GIFs as possible bad SEO practices (I won't go heavily into this just Google it ((1X1 pixel GIFs+seo))). I wonder if the SEs still use this as a warning sign for "dirty SEO practices"?

This is backwards of what I did when using tables to "bump" my content ahead of the links by using a empty cell. Times change and so do we need to adapt.

Interesting reads.

Take care,

Brian



jaybee -> RE: Skip Links (8/2/2005 6:02:22)

I don't use gifs for the link. Either it's a proper button on the menu or it's a text link

<a tabindex="1" href="#title" class="skip" title="skip to content">Skip Navigation</a><br />



Nicole -> RE: Skip Links (8/9/2005 0:58:27)

Just some more thoughts on this subject:

I've added "Skip to Main Content" and "Skip to Navigation" to the top of this template today (Yes it's the same old template, but as I'm in the middle of a learning frenzy lately I thought I'd practice everything on it).

I know I don't need both at the top of such a simple page, especially as the navigation appears first anyway, but to me "Skip to Main Content" up there all by itself looked out of place. It needed something else alongside it so that's why the "Skip to Navigation" is there also.

But it had me thinking a little more about some other things that could also appear above the main content for anyone who wants to add this feature but doesn't like how it might stand out so much. I've always wondered why on a website as opposed to printed material, a link to a sites "Terms of Use' and Privacy Policy" might appear at the end of a page in the footer, when it's really information you legally should know before reading or otherwise using a website. You don't begin reading a book by opening it at page 370 to see the author's information or who the book's designed for, so why should "Terms of Use" and "Privacy Policy" info on a website appear at the bottom of a page? So what I'm saying is that info could also appear alongside the "Skip Link" at the top of a page to help balance it out.

The other thing is that a lot of websites have information like that at the top of a page, most people (including me until very recently) have no idea what it's there for and don't really take any notice of it anyway, so I'm wondering whether it really looks out of place anyway. I guess if you had more than one line of "Skip Links" above the page contents it may begin to look a little odd.

Anyway, just some thoughts I had today.

Nicole

Edit: My jury's still out on how to present skip links really, this example was just something I tried today but I've read many other ways of presenting them on Jim Thatcher's site already mentioned in this thread. I'm wondering though, how clients react to what would seem to them until explained, an unnecessary distraction at the top of their website. And if they understand your explanation, whether they tend to say "yeah, but can't you do it another way"?



Tailslide -> RE: Skip Links (8/9/2005 3:51:06)

Nicole

I like that a lot - it looks good. I'd maybe take off some of the left-padding so it lines up exactly with the left-hand edge of the box below but that's just me being picky!

I've used this technique on two client sites so far (plus my own). Both were fine with it when I explained and both were happy for it to stay there. If they were unhappy with it I'd use the hidden skip link technique instead but I'd still include them.



jaybee -> RE: Skip Links (8/9/2005 4:57:51)

Very nice Nicole.



davidrandall -> RE: Skip Links (8/9/2005 5:02:31)

quote:

"Skip to Main Content" up there all by itself looked out of place.


I've taken to using the top section to also provide a link to the accessibility information, the sitemap if there is one and possibly the contact page (to reduce clutter in the main navigation).

Attached is a site I'm currently working on as an example

Dave




Nicole -> RE: Skip Links (8/9/2005 5:06:35)

My next question is:

What do you all think about putting them on templates?

On one hand i'm thinking it'd be a good way of showing that efforts have been made to make a site more accessible, and in come cases people who buy templates will leave them there and just change the wording of the link they go to (with the "Skip to navigation" especially).

But on the other hand if someone changes a link and forgets that the "Skip to..." is linked to it, the "Skip to...." info stays there and gives the impression that the site is accessible when in reality the "Skip to..." goes nowhere.

So, what do you think?

Nicole




Nicole -> RE: Skip Links (8/9/2005 5:11:14)

That looks good David, that's what i meant by having extra info up there with the "Skip to..." link.

The thing is, all sites i've seen so far with skip links have been using light backgrounds. Maybe that's why I had second thoughts about how it would look on a darker page background with the main content on a light background?

Nicole



caz -> RE: Skip Links (8/9/2005 5:13:18)

You could put it in the general instructions to go with the template, something like "If you change links remember to change their targets too"
But I am sure that you would word it better. [;)]



Tailslide -> RE: Skip Links (8/9/2005 5:32:12)

quote:

ORIGINAL: Nicoleoz

That looks good David, that's what i meant by having extra info up there with the "Skip to..." link.

The thing is, all sites i've seen so far with skip links have been using light backgrounds. Maybe that's why I had second thoughts about how it would look on a darker page background with the main content on a light background?

Nicole


I did this on a dark background: http://www.bsg03fanfic.com/


Edit: This site is mainly maintained by the client so I don't expect it to validate anymore (before some smartypants checks!).



spitfire -> RE: Skip Links (8/9/2005 5:42:20)

quote:

ORIGINAL: davidrandall
What are people's views on "skip" links? Where do you put them? How do you word them? Do you even use them?

My take on skip links - fwiw.
My main site, currently in design upgrade, is 3 columns source ordered, content first in the source code. There are two *apparently* invisible (to sighted visitors) links at the top of the page, which become visible when tabbed to i.e on focus. I find visible "focus" impossible to achieve on titchy little 1x1 gifs. The skip links say "go direct to resources menu" and "go direct to tutorials menu". Terms like Skip and Navigation can confuse some non-techie people, according to a surprisingly large number of my site visitors. Then at the bottom of the resources menu there are two similarly styled links: "go direct to main content", "go direct to tutorials menu" with relevant wording at the bottom of the tutorials menu.

Thay way, visitors get the opportunity to do nothing and go straight into the information on the page, or choose to explore either groups of links and/or go to the content/the other menu when they get to the bottom of the list. On another site I use three skip links, one for each of the three discrete areas of the screen.

I do not use visibility:hidden or display:none. Apart from the fact the search engines could penalise the site for so doing, screen-reading software (all those that I know of, that is) does not "see" anything in those styles either.



Donkey -> RE: Skip Links (8/9/2005 7:39:12)

Is it worth adding skip links to a framed site. I know frames are not liked, but as a temporary measure before the site is reworked without frames would the skip links have any benefit. There are two frames lhs for navigation and main for content.



Donkey -> RE: Skip Links (9/3/2005 18:01:25)

I am trying to get my head round skip links and how I would apply them to my site. So far it seems to me that they will cause more confusion than they will alleviate. I can't post a link because it is only on my test server but my basic layout is :
main site navigation on the left (fixed in compliant browsers- scrolling in IE)
main content on the right
section specific navigation in the footer (fixed in compliant browsers- positioned below content in IE)
In addittion there is occasionally a row of product specific navigation at the bottom of the content.

So I'm thinking that I would need skip links to 3 different navigation areas and content. Visually this is going to be a problem as it is effectively adding another navigation area which is illogical to a normal able bodied visitor.

Could I get by with skip links just to the main navigation and content?

Low res images of the top and bottom of a typical page viewed in FF are here
Top of Page
Bottom of page
The vertical product logo on the right is a graphic also fixed in compliant browsers and scrolling in IE.



Nicole -> RE: Skip Links (9/3/2005 19:13:12)

Hi Donkey,

My understanding is (and I may be incorrect here), that skip links are designed to allow visually impaired viewers to skip over the irrelevent information (irrelevent to them) and jump straight to the info they're after (i.e. the content).

If it appears that a common navigation (or anything else for that matter) appears before the main content, then a screen reader is going to read through that on each page before it gets to the main content.

If you use the Fangs screen reader simulator you should be able to see whether your content is coming after common navigation etc and therefore should include skip links, I use includes a lot and a banner include does come before the content so I've used them. With Frames i'm a little unsure, but i'd imagine they're similar in effect to includes.

I wouldn't worry about any navigation that appears at the bottom of a page as it's likely that the screen reader has already read the content. I also believe that skip links should be used if it's reasonable to do so, in your case it IS reasonable to skip over the main navigation, but to skip over other navigation that appears on individual pages is possibly going to leave the viewer scratching their head if they then can't understand where the individual page links are that you may be referring to in your content.

Now that's even confused me! If a sub-directory has say 5 pages each with those 5 links at the top as well as the main navigation on the left, I wouldn't skip those 5 links as they may be missed otherwise, but I would use a skip link to get over the main navigation.

Hope that helps.

Nicole



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.140625