Accessibility Notes
September 12, 2003Valid 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? §
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. §
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?
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.
http://eleaston.com/bob/screenreader-visibility.html - display: none; and visibility: hidden; have equal problems in modern screenreaders.
Dave - you are more than welcome, my friend.
Well done, Mike. Looking bloomin’ great!
Ooh, thanks for the tip, Tom.
*adds to list of CSS accessibility tricks*
I’m a little confused. Are screen readers applying screen media types instead of or in addition to the required aural media types?
Couldn’t that be reduced even further to .skipLink { visibility: hidden; position: absolute; } since the visibility style only applies to sighted browsing devices?
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.
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……
Alternatively…
.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.
I love your method, Tom. (everyone else - try tabbing down his weblog: http://blog.tom.me.uk/ )
Oooo! That’s pretty slick – and I think it addresses Joe Clark’s objection to invisible skip links.
Tom, I think I smell an A List Apart article from you. Get to writing!
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.
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?
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.
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.
“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 ;)