Skip Links in Action

A couple weeks back I talked about skip links and made mention I’d implement something on the Bridgewater State College web site.

I’m a man of my word.

Go to the web site and move your mouse cursor towards the top-middle of the layout, just near the point where the mouse would exit the viewport. You should see a dark, transparent bar appear with the text “Skip to content”. This is it.

It’s the first link you’ll see if you browse through the page using your tab key (something used quite a lot in screen readers). It will be read by screen readers even if they’re using IE or Mozilla as the rendering engine as the link itself is just moved slightly off screen using negative margins.

I use a transparent PNG for the background so that 1) the layout isn’t altered when the link appears and 2) we have different ‘themes’ on the web site, each with its own colors, and by doing this I don’t have to create separate rules under each theme’s stylesheet for this link.

I didn’t have to make the link appear. I could have kept it off screen. But I decided making it appear like this is a nice little reminder to the public that we do actually think about accessibility when it comes to the web site. And it’s proven to be a talking point when people I work with discover it. They ask me “what’s that” and I explain the whole thing and the usual response is “Cool! Maybe we need to think about that a little too.”


Here We Go Again

There’s a new Flash vulnerability out in the wild today. It appears that it’s already being put to use to install malware.

A few weeks back Aviv Raff disclosed a vulnerability in IE 7 and 8 that could also be used to install malware on a system.

This continues to prove my point that features like noscript will have to become native to web browsers in future generations. This idea of browser security from an “only approved” approach rather than a “everyone except” approach. This, in turn, will mean users see your web site first without any Flash or Javascript enabled. Will your web site still work? It better, otherwise these people won’t bother enabling these features if they can’t know to trust your site.

On a side note, I attempted the exploit Aviv Raff detailed on a few of my own computers (as well as those of friends) and immediately noticed that Vista would warn users before any external applications were run. So even if you were browsing an exploited site you remained fairly well protected on Vista (as long as you don’t just click “allow” automatically which, I fear, is exactly what Vista users learn to do within their first week of exposure to the OS.

Still, chalk one up for Vista that if your browser fails you still have a chance at keeping yourself protected.

Linux Mint

Linux Mint is a Linux distribution based on Ubuntu (which is based on Debian). I only learned of it recently when a faculty member here at the college brought it up. I went and downloaded a live cd of the latest version (5 beta 032) and gave it a go.

The interface, while seemingly not that different from a stock Ubuntu install, is miles ahead of any other distro I can think of in terms of quality interface. For starters their boot loader is not only styled nicely (not just simple text), but includes a nice help section explaining some of the more popular boot option to include. Ubuntu certainly has help sections to offer in their boot loader, but the way Linux Mint presents theirs just makes it feel miles ahead.

The login screen feels more polished too. It’s not really different from Ubuntu in terms of functionality (again, it’s really just their own skin applied to GDM, which Ubuntu uses), but it FEELS more polished.

The desktop has the system menu at the bottom of the screen much like Windows. The “start menu” is fairly similar to what you would find in Vista. Except, again, it just feels more polished. I think part of that is that they haven’t over-stylized this menu system. It’s something that has to be simple and functional. This is something Windows had until Microsoft went style crazy with XP. I also really like how the “start menu” navigation works. I like how, instead of a giant, screen-high list of programs, you get a short list that is scrollable with your mouse wheel. You can get something like this in Vista, sure, but the responsiveness is so much faster with Linux Mint.

It just feels better.

What you have in Linux Mint is the user-friendly package management system of Debian with the user-friendly interface of Ubuntu polished to a level that makes the system absolutely ready to be installed on the desktops of the general public.

Maybe it’s not all rosy minty, though.

It’s just the interface. That’s the only thing about Linux Mint that makes it stand out. All the underlying bits are still the same old Linux complete with all the hoops any Linux desktop user has to jump through.

For example my wireless card isn’t natively supported so I had to setup ndiswrapper. There’s an app in Linux Mint to handle this, but getting the drivers was a pain in the ass (it’s a NetGear, meaning you have to download the Windows install then copy the relevant files over to Linux).

Even once it was working it wouldn’t connect to my AP. I’m not sure if this is a driver or Linux Mint issue. It’ll connect to non-encrypted networks just fine, but WPA2 seems to create problems. (Not for my Ubuntu install, which connects just fine.)

The stock video driver had some corruption issues on my system. If I tried to drag a window more than a couple inches the screen started to become corrupt and would eventually freeze up entirely. I had to use EnvyNG from the terminal to get the nVidia drivers installed before I had a stable desktop.

And they’ve gone and mucked with their FireFox 3 package. Instead of the search box using Google directly it goes through their own kind of proxy to give you a Linux Mint kind of Google interface. I don’t like that at all and can’t find an easy way to remove that “feature” (other than using a different search engine entirely).

Still. This is a distribution worth taking a peek at. If you’ve got some hardware laying around that you can drop this on and try out I highly recommend giving it a go. Even if it’s just downloading the live CD and running off that for a couple hours. It’s worth the time.

Skip Links

Among one of the more common, but less implemented ideas on creating accessible web sites is the inclusion of a “skip link”. This is something that users, particularly those aided by a screen reader, can use to skip the repetitive navigation elements and jump to the content unique to the page they’re viewing.

In the past I thought I could get away with a simple link at the start of the page then use screen-media CSS to hide it. This, however, has proven to be a bad assumption. I’ve found many screen readers will first render the web site in the same manner as any web browser like IE or Firefox would. The screen reader then goes through the page looking for text to read back to the user. Thus those hidden elements are also hidden from the screen reader.

So what we need to do is include a link that’s rendered on screen that allows users to skip to the content.

But that’s going to probably just confuse users who aren’t aided by a screen reader. And it might not make sense to others who then might complain that valuable “above the fold” space is being wasted on a link they don’t need.

Enter The Web Standards Project web site. They do precisely this. Except I hadn’t noticed it before today because they simply hide the link by setting the text color of the link to the background color of the page. The link is there. It’s rendered. The screen readers will pick it up, but to the visual user it’s effectively invisible.

Now their solution places the link along the gutter space at the top of the web site. However some web sites don’t really have that kind of gutter space to hide such a link.

So my solution is to use an absolutely positioned element at the top of the HTML document. This removes the element from the flow of the document effectively leaving the layout visually unaltered. I can then position the element wherever I want, including off the page (position-left: -100000px). The link is still there and if you tab through the page you’ll find it’s the first link your browser hits.

However in some situations I may want to make the link visible as a means of advertising that I care about accessibility. Or maybe the link still provides some functional use to visual users, especially for those web sites with a very tall masthead or maybe for those users on mobile devices that only have a two-inch screen.

One option might be that if you have some gutter space on your web site (say five to ten pixels at the to of the page) you might position the element up some number of pixels so that the bottom N pixels of the element are still visible (but the same color as the background). Then perhaps apply a :hover state in your CSS that moves the element down to the page whenever a user hovers over it. In this case users would see the element whenever their mouse crossed the upper five to ten pixels of your layout. Visual users would find it by accident, but then know it was there. I don’t think the popping-out would become an annoyance to users since it’s such a small space to activate that they’d be able to easily avoid it.

Another option might be to just keep the link the same color as the background of the web site, but make the color change in hover state. Again, visual users would only discover this link by accident (or via tabbing), but when they find it they would always know it was there. It’s not as blatant an advertisement on your web site’s focus on accessibility (since the hit space would be so small), but at the very least it’d be something you could at least show/demo for others.

The point is you have options. All of them derived from a simple link and a bit of CSS. It’s a small effort and well worth it to help make your web site more accessible to others.

Virtual Linux

Found a post over at Arcane Code about installing Ubuntu 8.04 under MS Virtual PC 2007.

I’ve done this and have Ubuntu 8.04 running in MS’s own VM on my XP desktop. It’s very nice. Now I can test in Konqueror (as well as play with various Linux toys that I find invaluable) while maintaining my XP OS for work (and not have to repartition or reboot for that matter).

A couple of notes to share.

I could only boot off the live CD by manually adding the noreplace-paravirt option. I then had to add this option into the bootloader as well after the OS was installed. I find including vga=791 helpful as well, but not required.

In my xorg.conf file I had to add the following to my screen section:

DefaultDepth 16
SubSection "Display"
  Depth 16
  Modes "1280x1024"

This got me at the intended 1280×1024 resolution I wanted. The color depth is needed because Ubuntu will default to 24 bit color depth which Virtual PC has problems with.

I also added the following to my monitor section:

DisplaySize 338 277

Which changed the DPI of the screen to 96 (X defaults to 75dpi I believe) which makes small text much more readable.

I had to add snd-sb16 on its own line to /etc/modules in order to get sound working. However the sound is very scratchy. From what I’ve read this is common and there’s probably nothing that can be done through module options to improve this. That’s unfortunate.

I also had to add options psmouse proto=imps to /etc/modprobe.d/options in order to get the mouse wheel recognized by the OS. With that done I then had to add the following the inputdevice section for my mouse:

Option "Protocol" "ImPS/2"
Option "ZAxisMapping" "4 5"

And now the scroll wheel works in the Ubuntu VM.

Give it a try. Both Virtual PC 2007 and Ubuntu are free downloads and you don’t have to worry about mucking with your host OS or partitioning drives.

My setup now is that I have dual monitors and on one I’ve got the Ubuntu VM in full screen mode and on the other I have my XP desktop.

FYI: To free your mouse from the VM all you need to do is press the RIGHT ALT KEY. It must be the right one, the left alt key won’t work.

Oh. Duh.

A little “oh, duh” moment to share.

I had an anchor within a web page. It was an empty anchor, but nonetheless I decided to set it with a style of display:none; so that some random browser doesn’t add an extra line of whitespace to the document where the anchor is.

But as it turns out, by hiding the anchor the bookmark is removed from the document. So URLs like index.htm#bookmark would no longer jump to the bookmark within the page. Once the anchor was displayed again the bookmark would work.

Now if I really cared about browsers getting silly and adding space where there shouldn’t be any I could always apply a style of line-height: 0;. (visibility:hidden; doesn’t work because the space generate by the element is still there even if the content is hidden.) But I didn’t bother replacing the style with something new, I just removed the original CSS. I figure I was being just a little too anal there.

The point: setting display:none; on anchors will remove their bookmark capability.


Last week I talked about a rounding error with IE related to active scaling. In it I included some CSS to work around this.

* html #content-column,
*:first-child+html #content-column {
margin-left: -1px;

This is wrong. The correct CSS should be:

* html #content-column {
margin-left: -1px;
*:first-child+html #content-column {
margin-left: -1px;

The reson being that IE 5 doesn’t like the *:first-child+html IE7 hack and will ignore the entire rule set. So you have to keep them separated.