JavaWoman considers…

Skip navigation - whatever for?

Every page on My Opera starts with a top bar with a bunch of useful links to get to various sections of the site, some of them neatly wrapped up (by means of CSS) in dropdown menus. You probably don't see that, but if you're not logged in there are 18 links in all. The top bar is then followed by a banner, and below that is a menu bar in which the number of links depends on the member's settings for their site, but 6 more links is not unusual.

If you look at the page, you take all that in at a glance. In fact, if you're just browsing a member's site, you probably don't pay much attention to it, except maybe the menu bar below the banner. We are very good at not noticing what isn't important to us. If you want to see someone's photo albums, a single click on “Photos” will get you there.

Now imagine you cannot click. Think for a moment about what your fingers, and hand, a whole bunch of muscles, and a string of nerves and your brain actually do when you move your mouse and click on something. Some people can't use a mouse, because their hands aren't as nimble-fingered as yours, but they may be able to hunt-and-peck at a keyboard. Now, using only the keyboard, how do you get to the header of the first blog post on a page, so you can follow that link to read the full post? With a lot of keystrokes, is how. In most browsers that means using the TAB key to move from one link to the next, until you get to the one you want, and then you hit the Enter key to follow that link. Opera (and with it a few other browsers) does it a little differently, but it's still a lot of keystrokes to get past those 24 links. *) That soon gets boring (or even tiring) if you're going to read more than a single page on a site, because you have to repeat that whole string of keystrokes again on every page before you can start reading.

That's the kind of situation a “Skip navigation” link was invented for: so that people who are dependent on the keyboard because they cannot use a mouse need to get only to the first link which will take them in one big jump past all the other navigation right at the start of the actual content. So obviously such a “Skip navigation” link has to be right at the start of the page, and link to the start of the actual content.

There are other groups of people for whom a “Skip navigation” link is useful. For instance people who have bad eyesight but can still use a graphical browser provided everything on the screen is blown up really large: most of them use special screen magnification software. But that way you may be able to see only a few words at a time, so you cannot take in the whole top area with top bar, banner and menu “at a glance”. A Skip navigation link allows them to jump straight to the actual content. And then there are people who cannot see at all, and depend on a screen reader: a program that either reads text on-screen aloud, or sends it to a Braille device (or both at the same time) to use a computer and browse the web: they depend on the keyboard as well, so they profit from “Skip navigation” instead of having to TAB through (and listen to) all those 24 links on every single page here. It's for them as well.

So why can't you see it on your blog?

My Opera has a “Skip navigation” link in exactly the right place (see above) in the HTML code, but then uses CSS to hide it for everyone (see below), which is rather disappointing. As a result, the link will be visible (or audible) only for those who use a browser that does not support CSS.

There is still a wide-spread misunderstanding that “skip” links are only for blind people, and that even if you hide such a link with CSS, they will be able to use it.

Now some blind people use a text-only browser like Lynx, so they'll benefit, but they form only a small part of our target group. While some older versions of screen readers still read text hidden by CSS ‘display: none;’, the current versions are standards-compliant and correctly ignore content that is hidden this way. Why My Opera is hiding it this way, thus breaking the (in principle) provided accessibility, I can't fathom, but there is still a wide-spread misunderstanding that “skip” links are only for blind people, and that if you hide such a link with CSS, they will be able to use it. But as I explained, such links are useful for a lot of people who are not blind (who won't find it if it's hidden); and if you hide it with CSS, screen readers won't read it either. (Maybe Fred should have a chat with Chaals? ) But the code can easily be repaired, and I'll show you how.

Making it accessible

That will make the link appear above the top bar, pushing the rest of the page down. It's usable now, but it looks ugly. The aim is to put it on the top bar; putting it before the My Opera logo will look ugly, too, so let's put it on the right-hand side:

That works - but now we have a problem: the link is no longer clickable! Floating the link takes it “out of” the text flow, so the whole top bar moves up again; but because it comes after the link in the source code, it ends up on top of the link: we can see it through the transparent top bar, but not reach it. There are various solutions for that, but what I added was this:

Now things are nicely balanced: with a wide screen, the top bar menu shifts all the way to the left, while the Skip navigation link shifts to the right, to the edge of the browser window. With a smaller window (I have mine always 800px wide), it's quite obvious though that the Skip navigation link doesn't sit on the same base line as the top menu, so let's shift it down a little by giving it a top margin. Also, the link appears in my default text font while the top menu is different; to make it fit in, we give it the link the same styling. Finally, we also hide the stupid period after the link, by giving the paragraph a little negative margin, and making the color the same as the background (for those browsers that don't support negative margins). We end up with this CSS code then:

    /* accessibility */
body > p.hide
{
  display: inline !important;      /* make link visible */
  float: right;                    /* position at right */
  margin: 12px -5px 0 0;           /* same baseline as menu links, hide the dot */
  color: #DDDDDD;                  /* hide the stupid dot again */
}
body > p.hide a
{
  padding: 3px;
                                   /* same styling as #myo */
  font-size: 75% !important;       /* approximate match with menu (#myo has 12px) */
  font-family: 'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif !important;
  font-weight: bold;
}
    /* top bar menu */
#myo2
{
  float: left !important;
  width: 80% !important;           /* orig: 920px */
}

This is what I ended up with in Firefox (not logged in) and Opera (logged in) - all nicely lined up:

A quick test with the WAVE toolbar now also points out our Skip navigation link as an "accessibility feature":

Actually, I did a little more (like making the top bar narrower), but after the March release *) I had to redo that whole lot again, no use describing that now.

To be continued…

#top-search {display: none;}

Tagged: My Opera, tweaks, accessibility, CSS