Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

Accessibility Notes

September 12, 2003

Valid code = accessible sites? Problems with ‘skip navigation’ links, with solutions. Window Blinds training. Personal reflection.

Mike Pepper informed me this morning of a site he’s been working on. Not only was this his first XHTML/CSS site ever, but upon running it through Bobby we discovered that without even initially trying, he flew through Section 508 compliance and passed AAA with only one minor, corrected glitch. When you are questioned on the benefits of valid markup, relate this story.

Obligatory yadda yadda yadda: accessibility doesn’t stop with Bobby or Cynthia, they’re merely to be used as guides. As always, follow WCAG guidelines for everything the software validators can’t check. But you knew that, right? §

Bob Easton brought up a good point recently. For the same reasons that using display: none; makes classic FIR an accessibility headache, a few screenreaders won’t pick up carefully crafted “Skip Navigation” links that are specifically designed for them.

It’s a bit of a pickle, but Jon Hicks to the rescue! Although four lines of CSS is a bit messier than one, the following code solves the problem quite nicely:

.skipLink {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; /* for the benefit of IE5 Mac */

That’s not the end of it though. In his now-famous book, Joe Clark argues for making the “Skip Navigation” link viewable to all users anyway.

Look, no one ever said this web thing was going to be easy. §

Speaking of Joe Clark, he forwarded an interesting note from a WAI mailing list earlier this week that those around the MA area might be interested in:

GW Micro is pleased to announce that Amy Ruell of the Visually Impaired Blind Users Group and the Massachusetts Institute of Technology (MIT) are hosting Window-Eyes Basic and Intermediate Skills Training. The trainers will be GW Micro staff. The training will take place October 9-10, 2003 at the MIT Adaptive Technology (ATIC) Lab, 77 Mass. Ave, Cambridge MA.

Window-Eyes is the second-ranked product on the screenreader market after JAWS, and this training session is for everyone. More information can be found on the wai-ig mailing list. §

Yesterday marked the second anniversary of an immense tragedy. If I needed to excuse myself for commemorating it (the page I used was courtesy of Matt Haughey), perhaps those complaining might think to re-examine their priorities. Thank you Jai in particular for helping re-affirm my belief in humanity.

And after yesterday’s silence, take another moment to mark the passing of the Johns Ritter and Cash. §

Reader Comments

Shaun says:
September 12, 01h

Dave: reread my post. I said visibility not overflow. I’m aware of their differences. I tested this technique and with the addition of position: absolute it worked satisfactorily in all the major browsers I tested it in. Can you provide a link to Bob’s original page? By the way, who’s Bob?

Dave S. says:
September 12, 01h

Sorry Shaun, I’ve been known to mix up the two before – since the original used one method and you described another, I figured that’s what happened. My mistake. - display: none; and visibility: hidden; have equal problems in modern screenreaders.

Jai says:
September 12, 03h

Dave - you are more than welcome, my friend.

Nick says:
September 12, 04h

Well done, Mike. Looking bloomin’ great!

Alex says:
September 12, 04h

Ooh, thanks for the tip, Tom.

*adds to list of CSS accessibility tricks*

Jimmy Cerra says:
September 12, 10h

I’m a little confused. Are screen readers applying screen media types instead of or in addition to the required aural media types?

Shaun says:
September 12, 11h

Couldn’t that be reduced even further to .skipLink { visibility: hidden; position: absolute; } since the visibility style only applies to sighted browsing devices?

Dave S. says:
September 12, 11h

Nope, that’s not how it works. It’s using overflow: hidden; which only triggers when the content is larger than its bounding box. Since the boxes stretch to fit content by default, you need to contrain them - width and height are essential for this.

Note that Bob’s original page on this compared display: none; to visibility: hidden; and found equally unsatisfactory results for each. Also note that visibility: hidden; and overflow: hidden; are two different things.

Dave S. says:
September 12, 11h

Also note that overflow: hidden; *hasn’t*, to the best of my knowledge, been tested amongst the major screenreaders; it’s assumed to work. This could be a flawed assumption, since that’s how we got here in the first place……

September 12, 12h


.skipLink {
position: absolute;
overflow: hidden;
width: 0; height: 0;

.skipLink:active, .skipLink:focus {
position: absolute;
overflow: visible;
width: auto; height: auto;
/* extra styling here to make it stand out */

…is quite a nice way to hide it from most visual users, have it displayed to anyone tabbing through, and still be read out to screen readers.

Dave S. says:
September 12, 12h

I love your method, Tom. (everyone else - try tabbing down his weblog: )

Evan says:
September 12, 12h

Oooo! That’s pretty slick – and I think it addresses Joe Clark’s objection to invisible skip links.

Chris says:
September 12, 12h

Tom, I think I smell an A List Apart article from you. Get to writing!

September 13, 02h

They don’t apply aural style sheets. That’s the whole problem IMO with screen readers. But since they are ‘sreen readers’ they apparently only apply ‘screen style sheets’ and forget about the ‘readers’ part.

September 13, 02h

Jimmy: I’m no expert on screen readers, but from what I’ve read I think of them as literally *screen* readers – general-purpose interfaces for Windows and MSIE (although it appears they can suss out a bit of HTML structure).

They are *not* alternative web browsers.

Can anyone shed some more light on this view?

September 13, 08h

If anyone complained that they could not reach some content, there was a simple way around it (that I employed). Do a Google Search and used a use the cached copy of the front page to get to the archives. There was no need for any links on that version of the page.

Eric says:
September 16, 02h

This is basically OT, but what is up with “FIR”? I’ve seen the term, “Fahrner Image Replacement” bandied about, and I figured it was some temporary fad that would pass, but now its gone to the state of abbreviation. I don’t no who Fahrner is, and I mean no offense to him/her, but come on, this is hardly a “technique”, nevermind something worth naming. This is just one example of a “trick” among hundreds that CSS people use and create, on their own, every day.

MikeyC says:
September 16, 04h

“this is hardly a “technique”, nevermind something worth naming.”

Something might seem like a simple trick in retrospect, but it takes looking at a problem in unconventional ways in order to find the solution that was right in front of you all along.

I like the fact that these “tricks” get named as it makes referencing them much easier. If I refer to “Tantek’s Box Model Hack”, everyone (here) knows exactly what I’m referring to without going into depth… instead I would have to say, “that aural style sheet syntax junk that trips up pre-IE6 browsers because of a parsing bug, etc”…abbreviating them is even better as I always forget the correct spelling of… Farmer? …Farner? …oh forget it ;)