I have often settled for ‘skip navigation’ rather than ‘skip to content’ because Jaws and Kurzweil stress the second syllable of ‘content,’ as in satisfied. I was reading Sam Hasting’s Pure CSS Skip Links article and noticed that Jaws reads his ‘Skip to Content’ properly. The title case (capital ‘C’) makes the difference!
My primary audience is people with Learning Disabilities (often using a screen reader). Skip links are useful for this audience for the same reasons they are useful to keyboard navigators and screen reader users who are blind.
I think ‘skip to content’ is generally preferable:
- ‘Skip to Content’ is more specific. A specific destination is named. ‘Skip navigation’ usually really means ‘skip a bunch of stuff’ (the header image alt tag and text, the top navigation, the search bar, the links in the left column).
- ‘Navigation’ is usually not meant literally. As reason #1 suggests, you may be skipping over a bunch of stuff in addition to links and breadcrumbs. People with Learning Disabilities, who often interpret things quite literally, as well as less-frequent web surfers, will have to think about what ‘navigation’ means and what it is they will be skipping.
I suspect that forcing left-column navigation to appear after the content in the code is confusing for sighted screen-reader users. (In this country, when we look at a web page, we expect it to read left-to-right and top-to-bottom.) I’m hoping to test this out in our Usability Lab.
I did not realize that content-less anchor tags are “ignored by JAWS and several other browsers and screenreaders .” In this article, Communis mentions the difficulty in deciding what to put in the anchor (or rather put the anchor around, like some header). I looked at the W3C’s XHTML 1.0 specs and found a few interesting things:
nameattribute for the
aelement is deprecated in XHTML 1.0
- as long ago as HTML 4.0, you could link to an <id>. This is great because it means my ‘Skip to Content’ link with an
#contentwill take users to the
divwrapper with the
content(or it could be assigned to an
h2or some other appropriate element). This removes the need for an extra anchor tag, and for extra styling to remove the link styling which would otherwise be applied to that extra anchor tag.