Thursday, September 29, 2005

Improving accessibility: portal interface use without a mouse

I tried hard during development to make our portal interface W3C accessible (sorry no guest logins at the moment). The current interface has been live for almost two years now. I had a fair head start in development by using Terence Ordona's Nested Div theme for uPortal. Even so, it wasn't that easy to get the design right but as a result CSS is now used extensively for layout. In development I ran the usual automated accessibility tests (Cynthia Says and WebXact [formerly Bobby] amongst others), validation tools and tried my best to implement the suggestions these tools made. I've tested it with the Lynx text browser (incidentally if you using Win2K you can get a nice Lynx installer from CSANT). I know the portal interface is not yet perfect but even so it works and I was quite pleased with it.

The other day a user told me that it was impossible to use the portal without a mouse. First this shocked me, especially after all the effort I had gone to in order to make sure it worked in a text browser. My initial knee jerk reaction was that "they must be wrong" but I gave it some thought and tried to use the portal without a mouse but in a "normal" browser mode (Images on, CSS on, JavaScript on). The user was right, it wasn't impossible but it was hard to see where the focus was when it was located on one of the portal control icons, so what to do. I noticed on the university front page that they were using the CSS focus pseudoclass, this means that whilst tabbing through the page, using a fully compliant CSS2 supporting browser [Not IE], it highlights each link in a different colour so that you always know where your focus is. The downside to this was the CSS focus pseudoclass is not implemented in IE.

I then found an article on making IE support the focus selector. I needed to tweak this solution slightly to improve performance. I only wanted the onfocus behaviour so I turned off the hover functionality and restricted the stylesheet scanned to a single file and that seems to have done the trick. You can now browse the portal without a mouse (assuming you are otherwise fully visually able).