Quiz 2.4.2: Now you see me, now you don’t
WCAG 2.0 has an interesting annotation on Guideline 2.4. In the level 2 success criteria, the guideline says:
3. Blocks of repeated material, such as navigation menus and document headers, are marked up so that they can be bypassed by people who use assistive technology or who navigate via keyboard or keyboard interface. [V]
See the [V]. That means visual. They are suggesting we make skip links visible. Why? Skip links help people other than just the blind. People who can’t use a mouse have to navigate another way, often with the TAB key. Imagine tabbing over dozens of links to reach that link in the middle of the page’s body. A skip link as the first or second link on the page saves all that tabbing.
Q. How should we make skip links visible?
- A Be very literal, and make the link visible all the time. Integrate it into the page header.
- B Use styling which keeps the link normally hidden, but makes it visible when it becomes active. Molly Holzschlag does this on molly.com. Hint: TAB twice.
- C Use a style sheet switcher to offer a separate sheet which displays all accessibility features.
- D Some other way. Please explain.
April 7th, 2005 at 7:04 am
B. There’s no excuse to add visual clutter for the majority. I’ve recently implemented something similar to option B for the HM Revenue & Customs web site (UK Government site).
April 7th, 2005 at 7:08 am
although i implemented the “visible only when focussed” approach on Molly’s site, there is of course an argument for having the links visible at all times. certain user groups may be using a mouse or other pointing device, but could still benefit from the skip link (i’m thinking low vision, for instance).
for things like skipping standard navigation/headers, i’d love to see more implementations based on LINK elements…but flaky browser support (ok, Internet Explorer) makes these slicker solutions obviously a moot point for “mainstream” sites.
April 7th, 2005 at 7:53 am
B, unless you can work it into the design as a consistent element throughout using, say, a small icon.
April 7th, 2005 at 8:25 am
I find skip links invaluable when accessing sites from my phone, but don’t use them enough myself. At my workplace we generally use a series of 1×1 transparent gifs (old school) wrapped with titled links - these are tabbable and work in screenreaders, but aren’t as neat a solution as :active{display:block;). So I really think it comes down to the initial design. If there’s a way to put a permenantly visable skip link in the header then this is probably the best option (A), but if not then Molly’s solution seems very nice.
April 7th, 2005 at 8:33 am
I’ve worked with people who had mobility problems, and use a pointing device rather than a keyboard. Visible skip links were useful to them. Even visitors who cycle through links using the keyboard could miss invisible skip links, as they would have to be paying attention, and often just repeatedly tab until they’re roughly where they want to be. Personally, I think skip links should always be visible. It seems strange to add something beneficial, and then hide it from groups of people that would benefit from it.
April 7th, 2005 at 9:23 am
I’d definitely say ‘A.’ Between the variety of navigation tools for the blind/low vision and it taking five minutes just to scroll through the navigation to get to content on my phone, those links should get integrated into the design.
Or I’d go with ‘C’ by way of including the content first in the markup, using CSS to position the navigation above it. This bypasses the need for skip links…actually, now that I write that, it doesn’t. You’d still need a skip to navigation link, but I think that could get hidden from view unless the user’s browser does not handle the CSS used to position the navigation in the first place.
April 7th, 2005 at 9:50 am
Mid-quiz revision!
Apologies to those who have answered so far. A few days ago, someone mentioned another option that I should have included here, having a separately styled page for those wanting to see all accessibility features. I’m sliding it in as choice C, making choice D the new “some other way.”
April 7th, 2005 at 10:12 am
In an ideal world ‘A’ would be the answer I’d choose. I’ve always liked this site http://openweb.eu.org/ for the way it includes skip links (and other useful stuff) visibly but in a way it’s outside of the design if you see what I mean. By using a design such as this the links are away from the initial focus of the page and less likely to be a barrier for anyone who can see them (i.e. stopping to wonder why they are there.)
Realistically though, not every design brief would accommodate this. And I agree that the requirement will vary depending on the audience and user agent. However I feel that thoughtful design should be able to accommodate them.
I can’t help but compare skip links with Access Keys. Access keys are hidden functionality (usually), there’s no standard set, of questionable merit and you generally need to set aside space to explain what they are.
There’s no standard usage for skip links (skip what? skip to where?) and there’s no agreement on visibility. However they are of use to many different user groups and when they are visible their function is clear.
(I’ve just seen the revised question and my choice remains the same though C could offer a solution for no-compromise designs)
Cheers
Kevin
April 7th, 2005 at 10:56 am
A, but it doesn’t have to be solely textual. I would love it if someone would come up with a really tiny (7×7?) universal ’skip to main content’ icon (I prefer ’skip to main content’ over ’skip navigation’ because it’s not always solely navigation I’m skipping at the beginning…it can be repeated text, ads, RSS blobs, or any number of things).
Then, the icon could be integrated with the visual design for sighted users who might want to use it, and explained with alternate text for users of text- or speech-based browsers.
If enough people were to use it, suddently, voila, grass-roots standard!
April 7th, 2005 at 10:58 am
Suddently. Buh. ‘Skip to main coffeepot.’
April 7th, 2005 at 11:44 am
Hmm, well for a start tabbing doesn’t reveal a skip to link in Molly’s site, so I guess its an issue of browser support for that one (I’m on Safari). Thats B out for me.
I decided on a visible skip link on my site, as I felt I could make it work as part of the design. However, I’ve used image replacement to style it, and I now wonder just a small plain text link would be more accessible? Option C doesn’t seem to solve the problem that skip links cater for, unless it placed the navigation after the main content.
My feeling is to go for A, keeping them as small unobtrusive text links, but its a real fight against the ‘minimal designer’ in me to include them!
April 7th, 2005 at 11:59 am
I would still choose option A (make skip links visible), even with the addition of option C (use a style sheet switcher). Option C would be a good fallback option if option A was rejected for whatever reason, but I still think option A is the best for accessibility. Option C requires extra work for visitors, unless the preferred style sheet made skip links visible.
April 7th, 2005 at 2:26 pm
I would like to choose D and say it is markup which should solve the problem. Currently that is not possible however, given the state of accessibility devices. I use some CSS hack that makes it invisible to see, but possible to read. (Using ‘text-indent’. I was told it should work and I believe it was also positively tested.)
I posted some follow-up thoughts on this particular checkpoint here: http://annevankesteren.nl/archives/2005/04/skip-links
April 7th, 2005 at 2:36 pm
Jon: You need to change a setting in Safari for that. Go to preferences, then in the advanced tab change “do not highlight links as you press the Tab key” to “Highlight links as you press the Tab key”.
I normally use A or B.
April 7th, 2005 at 4:38 pm
Somebody needs to explain to me the virtue of option “B.” I really don’t see how it promotes accessibility at all. (Is the intention to surprise the user with the skip link?) “A” seems like the only choice.
April 7th, 2005 at 4:41 pm
I’d have to go with option A. For devices with small screens (PDAs, cellphones, etc.), scrolling to the main content can be a chore, especially if the header contains a large logo and navigation. It really isn’t very difficult to implement a small graphic or text link into most headers, but if there is a problem in doing that, it may be time to consider redesigning your header.
April 7th, 2005 at 4:54 pm
D, some other method. 1×10 or 10×1 transparent gifs, and put the site navigation links at the semantic end of the content pages so there will be no need to skip them (helps search engines optimization, too).
Also,
Robin Says:
April 7th, 2005 at 8:25 am
“I find skip links invaluable when accessing sites from my phone, but don’t use them enough myself. At my workplace we generally use a series of 1×1 transparent gifs (old school) wrapped with titled links - these are tabbable and work in screenreaders,”
1×1 transparent gifs don’t necessarily work in all screen readers. Some versions or modes of JAWS ignore 1×1 transparent gifs. You need a 1×10 or 10×1 transparent gif to get all versions/modes of JAWS to speak it.
We don’t get a lot of visitors by cell phone (less than 1% of traffic), but I am noticing a bunch of brief visits by a wide variety of wireless user agents, both Blackberrys and cell phones. Since we’re a public transit agency, we might well get a lot more such visitors if we were easier to use via cell phone. At the moment, though, that’s a long term goal.
April 7th, 2005 at 5:08 pm
David Says:
April 7th, 2005 at 4:38 pm
‘Somebody needs to explain to me the virtue of option “B.” I really don’t see how it promotes accessibility at all. (Is the intention to surprise the user with the skip link?) “A” seems like the only choice.’
I’m not thrilled with things jumping around on the screen, either. It’s bad enough that thing bold and unbold as you cursor over them, which will sometimes produce a rapid bold/unbold cycle as it causes text to wrap and un-wrap.
April 7th, 2005 at 5:10 pm
A second thought on B, is that if it makes something appear that doesn’t affect the layout of anything else, it might work. But, you don’t know how fast someone is tabbing, or if they are even looking at the screen as they tab, and they might miss it.
April 7th, 2005 at 5:14 pm
Put the navbar on the right side and/or later in the code so you don’t have anything to skip. Radical!
April 7th, 2005 at 7:43 pm
Joe: What if I don’t want to read several pages of content to get to the “About Us” link? If I were to follow your suggestion(s), I would need a “Skip to Navigation” link instead. That doesn’t solve anything.
April 7th, 2005 at 8:32 pm
“Somebody needs to explain to me the virtue of option “B.” I really don’t see how it promotes accessibility at all.”
firstly, there seems to be a misunderstanding here…are we talking about doing it because it helps users, or as a visible mark to *promote* accessibility? if it’s the latter, of course you’d want it visible at all times to raise awareness.
now, in my view, option “B” is a compromise between offering a valuable help to users who are tabbing through your site’s links, and the constraints imposed by the visual design. the skip link is there for (at least a certain percentage of) users that benefit from it, but does not get in the way of those who don’t want/need it.
by the same token you could say that subtitles on tv programmes should always be visible, as they could benefit everybody…yes, they could, but a large number of viewers would rather not have them. nonetheless, they’re there in the signal (if you pardon the simplification) if you choose to view them.
additionally, you could have an alternate stylesheet that can make the skips permanently visible as a bonus.
April 7th, 2005 at 8:35 pm
D: more or less in line with Joe Clark, with main content first and navigation and “less important stuff” later in the source.
I may provide some quick-links for Lynx, if and when I see a problem on that level.
Would like to have some browser-support for “in-page” link-relations, but link-tabbing should work.
Generally: Accessibility-software should solve this issue, and I don’t think we should fill our pages with “patches” for poor software. In some “accessibility-software” we may get “double-up”, and in others we may get “nothing at all”.
April 7th, 2005 at 8:49 pm
Georg: Nobody likes adding “patches” to their site because of poor software design, but we shouldn’t leave our users (or a subset of our users) out in the cold. If their software didn’t fully clothe them, we should at least give them a pair of wool socks so their feet stay warm. :)
April 7th, 2005 at 11:11 pm
“A” or content first as Joe Clark said. Icons can be confusing and shrinking down the link just makes it a harder target for those with motor skill impairments.
How can you target a link (using a mouse) that you can’t see?
Making the user change settings in the browser is not a good idea.
You could always have an option to turn off the accessibility features on a site if they are unwanted…
April 7th, 2005 at 11:32 pm
Redux: Sorry, I guess I didn’t choose my words very well. By saying “promote accessibility,” I wasn’t talking about raising awareness of accessibility. I meant that I don’t see how an invisible link is useful. I suppose if you’re tabbing through links it could be alright. But then if the link appears and the user doesn’t notice it, a new problem arises, right? I’d still stick with “A.”
I’d also like to question an idea that some have brought up: that choice “A” can supposedly “clutter” or otherwise harm visual design. Honestly, I don’t see any room for compromise. You stick with what people can use, and then design around that.
April 8th, 2005 at 12:19 am
David said:
“You stick with what people can use, and then design around that.”
I concure completely — this comes back to that old argument about designers and stylists.
Though it could be more of an issue retro-fitting these ideas into an existing design.
April 8th, 2005 at 4:11 am
D. — I had one image in the page at the top left, and turned it into a skip navigation link, with the alt tag saying so.
A bit of a rough hack, but it seems to work.
April 8th, 2005 at 4:49 am
Personally I’d go for A (if the design would allow it) or option B.
Mainly I’d push for option A simply because, in general, accessibility features increase the usability of the site. (Not always true I know.)
Mike
April 8th, 2005 at 5:13 am
There are several people here suggesting that ordering your source with the content first gives instant compliance with the guideline. Maybe it satisfies it if you take it literally, i.e. you only need to provide a solution for repetitive content, but in my view it does not satisfy the spirit of the guideline. That is, you should facilitate ease of movement around the page.
I’m with Jordan Moore on this. What if you land on a page and the navigation is the thing you want to get to?
I’m a big fan of ‘content first’ and I prefer ‘Skip to…’ links rather than ‘Skip (over)..’. In fact you could argue that with a few prudent of ‘Skip to..’ links at the start of your page it doesn’t matter what order your source is in.
Cheers
Kevin
April 8th, 2005 at 5:24 am
additional thought: i agree with anne’s thoughts that this should really be a browser issue. skip links, the horrid [D] longdesc links, text resize widgets, style switchers…all the sort of functionality that browsers should implement; but because they don’t, we have to work around those issues. once again, we as developers have to compensate for a browser shortcomings.
sorry for the rant, but this is just something that irks me to no end.
April 8th, 2005 at 5:34 am
to put my rant more into the current context: “Blocks of repeated material, such as navigation menus and document headers, are marked up so that they can be bypassed by people who use assistive technology or who navigate via keyboard or keyboard interface.”
if browsers offered a simple way to skip functional blocks in a similar way to, say, JAWS (e.g. your caret/cursor is just in front of an unordered list…offer a simple way to jump past the entire UL with a single keystroke), this would be a non issue - and in line with how i interpret the User Agent Accessibility Guidelines’ checkpoint 9.9 (see the techniques http://www.w3.org/TR/UAAG10-TECHS/guidelines.html#gl-navigation )
April 8th, 2005 at 7:12 am
Patrick,
Your analogy of subtitles on TV being available to anyone who want them is inline with your further point that user agents should provide a means for regular users to bypass groups of links. Unlike TV, where there’s a common way to expose subtitles if they’re available, commonly used user-agents do not provide that mechanism. WCAG are desperately trying to avoid terms like, “until user agents”, but this definitely falls into the “until user agents” category. At the moment, there is no mechanism in common visual user-agents that allows visitors to bypass groups of related links, unless they purchase very expensive assistive technology, such as JAWS. As skip links are beneficial to people with mobility problems, they’re not likely to be using assistive technology unless they also have a visual impairment that would justify such a cost. There’s also the issue of people not being able to afford assistive technology, period, which is why I would like to see user-agent manufacturers incorporate this type of functionality for everyone.
I agree with your point that developers should not have to work hard to make up for the shortfalls in user-agents. Skip links are incredibly useful for people with mobility problems, but unless they’re visible, they’re only useful to those who stumble upon them, or have them exposed through expensive assistive technology. It’s also worth noting that Bob has pointed to the level 2 success criteria for WCAG 2.0 guideline 2.4. Level 2 success criteria requires:
1. Increase accessibility through one or both of the following:
a. further facilitating the ability of user agents to provide accessible content
b. recommending content and/or presentation that provides direct accessibility without requiring users who have disabilities or their user agents to do anything different from users without disabilities or their user agents
2. Can reasonably be applied to all Web resources.
It’s not unreasonable that the success criteria for guideline 2.4 requires skip links to be visible.
As for alternate style sheets, they’re only useful if there’s a common way for people to get to them. For example, if it was a de-facto standard that all websites contained an access key of [0] to get to an accessibility statement, which also provided a style sheet switcher (or similar), then I would believe there was a benefit to style sheet switching. There is no de-facto standard, making any suggestions short of a visual skip link, a hit or miss affair.
April 8th, 2005 at 12:51 pm
A .. definitely A - Mostly because skip links are helpful to lots of people (heck, I use skip links on the sites where I know they exist, and I have no serious disability at all, I’m just lazy ;)) But also because they advocate accessibility, particularly if they’re nicely styled. On one of my sites I have the skip icons at the very top right in a floated list - http://www.udm4.com/ - and although that’s not a particularly nice design, the core idea is sounds and I plan on extending it to future sites.
It’s also occured to me that “navigation” and “content” could be added as tags? If they were adopted widely, and included by vendors like Opera wh(o build a hard-coded link toolbar into the browser) then it could gradually be relied on.
April 8th, 2005 at 2:46 pm
I must admit to not having given the issue of visible skip links a lot of thought until now. Before reading the comments, I would have said I’d probably opt for B and C. I like the elegant approach of making the link visible only when necessary for the main design, and I also am a strong advocate of offering “accessibility friendly” alternative style sheets.
However, after reading the comments and seeing some nice implementation of visible skip links, I really like A as a viable option.
I waffle, therefore I am. :-)
April 8th, 2005 at 3:36 pm
I think the in discussions about the benefits of “content first” vs. “nav first” we seem to be narrowing our focus too much. Would it not be beneficial to have skip links to every major logical division of a page (navigaiton, content, footer, sidebars, etc.), and implement that intradocument navigation in a such way that those who would benefit would find useful? The ability to quickly visually assess a page’s contents and move my mouse immediately to a section of page is something that I find I take for granted (as I am reminded everytime I use Lynx and navigate via keyboard). After actually taking time to consider the discussions herein, it would seem to me that having such a “meta-navigation” is an desirable thing.
April 8th, 2005 at 6:46 pm
so, again, the chicken and egg problem: while browser manufacturers don’t follow UAAG, it’s once again up to us to shoulder the burden via WCAG…*sigh*
April 9th, 2005 at 4:31 am
I’m with Joe Clark on content-first. In a job I’m on, I can’t change the code order, so I’m fighting for a small icon that is a visible skiplinks. (My next door neighbour has terrible arthritis and hates having to tab-tab-tab-tab-tab to content, but she isn’t visually impaired and would miss an invisible skiplinks link).
Charles Belov said, “Some versions or modes of JAWS ignore 1×1 transparent gifs. “. Can you be more specific, Charles? Hard facts will help me win the visible/ invisible battle
April 9th, 2005 at 10:01 am
I just wanted to add a comment about keeping “skip links” visible at all times - my apologies if something similar has already been commented. Personally, I tend to use the “appear on focus” method.
Other times, when I have tried incorporating a visible link into a design, users have come back they don’t “get” it. OK, again, it’s down to education, but some people are still confused by it. Some of these users are Web-savvy too - one of which has come back saying that the navigation was broken. This was based on the fact that they expected to be taken somewhere by the skip link - they didn’t expect such an internal page link.
As far as I see it, if skip links are going to be visible, some sort of standard symbolisation would be the best way to go, with a link to an explanation for such additional meta navigation. However, then you’re getting even more visual elements to work into each page.
April 9th, 2005 at 10:26 am
I’d have to go with D, though the switcher seems like a good idea. On a site I’m building right now I have a visible skip navigation link top and left, first link, but from that point I incorporated tab indexes next to each headline. Seems like a decent way to hop around the page by-passing blocks of whatever. Another way to solve to is to make a visible jump link pulldown I suppose.
Regarding visibility, I say make it visible if the feature is useful to someone. The skip nav on my portfolio site doesn’t do much on a 1024×768 res monitor, but it does on an 800×600 or with styles turned off. Thus it’s visible. On that site I forewent that checklist requirement on every link block or link list as I felt it would overly clutter the site.
April 9th, 2005 at 4:25 pm
Mike says:
Oh boy, we’re going to have fun when we get to the quiz about making pulldowns accessible. In a couple of weeks.
April 10th, 2005 at 11:27 am
The best way to be sure that it will work for those who need it is A.
April 12th, 2005 at 11:59 am
I’d vote thoeretically for A but practically for B. We all want to do the best job we can for accessibility users but the vast majority of visitors to the vast majority of sites will be completely unaware that some people need the sort of help that skip links provide. Those folk will be confused and maybe even disoriented by the presence and function of this mystery link. I think it’s best to provide the link for ‘those in the know’ but keep the extras to a minimum for those who don’t. B allows you to offer extra functionality to those at the extremes (with screenreaders for example) who really need it and people savvy enough to spot it, but keeps things clean. That said, if you can integrate skip links nicely into the design, then great.
Incidentally, I’d be interested to know what wording people favour for skip links. I favour the positive ’skip to’ structure… Future quiz Bob?
April 14th, 2005 at 11:21 am
I don’t like a: Dotjay is right (cf. 39).
I’d prefer b.
I am not in favour of c: it should not be left to the designer to create multiple stylesheets with varying accessiblity features. If he would do so, how is he going to explain the differences among them? Will the user understand (a) that he has a choice, (b) what are his options and (c) which options fits best
I personally use D: content first and an 1×1 transparent image entitled “skip text and move to main navigation”. The skip link has the first tabindex and the link tot he homepage has the second tabindex. No more tabindexes are available.
January 5th, 2006 at 11:56 pm
I would have to go with b or c. Most users do not need the links, and “a” would just clutter the page. If a page doesn’t scroll on forever and if the navigation is well-planned, “a” would not be necessary.
July 8th, 2007 at 4:38 pm
Joe: What if I don’t want to read several pages of content to get to the “About Us” link? If I were to follow your suggestion(s), I would need a “Skip to Navigation” link instead. That doesn’t solve anything.