The Forgettable Mister Ruthsarian

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"
EndSubSection

This got me at the intended 1280x1024 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.

Addendum.

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.

XP SP3 Locks Users In To IE7

This article over at Computer World tells the tale.

If you have Windows XP and install SP3 you will be locked into IE7. You will not be able to downgrade to IE6.

Now I'm willing to bet within a few weeks of SP3's release we'll see instructions on how to get IE6 up and running. At the same time I don't see this as an entirely bad thing. IE7 is certainly better than IE6 in terms of standards compliance. But I'm not a fan of locking users in like this.

I wonder, though, why you're locked in. Is IE7 some how integral to SP3? I thought Microsoft was suppose to separate its browser from its OS. If they're integrated again that might break certain judgements made in the EU.

Of DPI and Microsoft's Lazyness

Windows uses a DPI of 96 when rendering objects on your screen. It's been set at this value since the dawn of time. Why 96? Only the great gods of computers know.

But now we've got higher resolution screens. Screens that are 15 inches in physical size but support up to 1280x1024 in resolution. At that resolution things look very tiny and are almost unreadable on a 15 inch screen.

The solution is to increase the DPI. In doing so Windows will increase the size of the fonts and other window objects (buttons, bars, etc) making letters at 1280x1024 @ 120 dpi look the same as letters at 1024x768 @ 96 dpi. The added benefit is that fonts will have an increased resolution, meaning more space to draw it, meaning they'll look stronger, crisper, and in general a whole lot better.

However, images still don't scale. A 190 pixel wide image is still 190 pixels wide. At 1024x768 it will eat up 10% of the screen's width, while at 1280x1024 it'll eat up only 7%. This means user interfaces that use images, icons, video, etc. may wind up looking odd or (worst case) breaking entirely under a DPI different from the one it was designed at.

This includes web pages.

Thus Microsoft created something I've seen unofficially called active scaling. It's a little known feature that's been around since IE 6.0 which, when enabled, will resize images to fix the same physical space on screen as they would have at a lower DPI. The math is [image resolution] * ( 120 / 90 ). So in the case of a 190 pixel wide image you'd get 190 * 1.25 = 237.5 pixels wide.

Uh oh.

A decimal point.

IE does not do well with decimal points.

And this time IS NO DIFFERENT!

Two users contacted me about the Bridgewater State College web site not loading properly. The body of the page was being pushed down below the left-hand column. They sent me screenshots and it was immediately apparent they had done something to increase their system font sizes.

However I notice the edges of the images were blurry or jagged. It became obvious there was something more that just increased font sizes at work here.

Through some luck I was able to track the source of the problem to a rounding bug in IE related to active scaling.

Since I've had more than my fair share of rounding bugs in IE I knew immediately what the fix for it was. Simply add a -1px margin to the opposing side of any floated element. Meaning if you've got an element floating right, you set -1px to the left-margin of that box. Or if it's left floated, -1px margin to the right side of the box.

Here's a simple CSS hack that targets IE for this purpose:

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

Obviously replace #content-column with your element's selector and change margin-left to margin-right as needed.

These rounding bugs have been with IE since it's creation. They are something Microsoft has known about for years, and yet they are either unable or unwilling to fix them. I believe they are part of a larger issue, related to all the hasLayout bullshit. I think the rendering engine for IE needs a complete rewrite. But Microsoft won't do that. They haven't yet, why start now? I think the reason for this is because they don't care. Why waste resources resolving a bug that only a handful of web developers are annoyed by? Web developers have been working around IE for years, they can keep working around IE.

I wish we, as web developers, could simply say "Fuck IE!"; to leave these bugs rather than hack around them. Tell our users to simply use a different browser because IE is so poor.

But we can't.

If we do this we're out of a job. IE still has the majority share of the browser user base. And why? Because it comes free with the most installed desktop OS on the planet. If we don't work around it our web site become ugly or even inaccessible to the majority of the internet population. This is simply bad business.

And I fear any attempt to educate users about the problematic Internet Explorer will fall on deaf ears. The only thing that will rid us of IE is the same thing that rid us of Netscape 4: time. A lot of time.

New Template (of sorts)

Last week the new Bridgewater State College layout was unveiled. This has a lot of my work in it. The design of the layout was produced by a consulting firm the college hired to help develop the new layout.

Once we got a template that Institutional Communications (the new name for the Public Affairs dept) was happy with it was handed off to me to convert into something usable. IE/Mac users will not have a great experience (still working on that), but it should be good back to IE 5.0. There are lots of areas where I see improvements being made over the next year. Besides compatibility I see adding some extra style-switching bits to the left of the font-size/search bar at the top right such as picking what font to use for the base of the layout. I also see going through the CSS and trying to greatly compact it to cut down on the amount of data people have to download.

I've already started doing that with the images. Originally many of the "brand images" were 300-400k in size. I've cut a lot of that down to well under 100k per image. A lot of the second-level pages still need to be re-compressed and I'll eventually get to them. Right now there's still a lot of back-end coding to work on and that's my primary focus for the next few weeks.

I was thinking about producing a version to post on my site for the world to use, but decided fairly quickly that would be a bad idea. It's a design that is certainly wholly unique to BSC and it should probably stay that way for at least a little while.

We opened a demo version to people on-campus for a few weeks prior to going live. In that span of time we really haven't had much in the way of negative feedback. The actually day we rolled it out into production we had virtually zero feedback. This, in my opinion, was a good sign. It's rare that you'll hear about the good things you do, but you'll always hear (very loudly) about the bad things you do. The calm of the roll-out seems to indicate we've got a layout people like.

There are some things I don't like, such as color and typographical choices in some parts of the web site, but I am not alone in creating nor maintaining this web site and so it can't be only about what I think is best.

I still believe it's not a bad idea to stay away from using Calibri in web sites (even though we use it for most of the headings). The size differences between Calibri and Arial mean people who don't support Calibri will have a much different experience on your web site.

Well just wanted to post a note about that (it's turned into a novel).

Have fun!