Tweaking Firefox for user-side accessibility


Following Jakob Nielsen's Alertbox Top Ten Web Design Mistakes of 2005, in which the top complaint was illegible text…

About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.
while the first two recommendations for the second biggest complaint — non-standard links — were
  1. Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text).
  2. Differentiate visited and unvisited links.
I've updated an earlier post to reflect the user CSS that I'm currently using in Firefox.

Using this, along with the preference setting for a minimum font size, achieves the following things:

  • All text is black on a white background, never smaller than 12px.
  • All links are underlined (I had to disagree with using coloured links - I think it looks bad and underlining is otherwise used so rarely that it's reasonable to assume underlined text is a link).
  • Links change colour to blue on mouseover.
  • Visited links have a light grey background, which is enough to distinguish them without damaging the style of the page.

This can make pages with coloured backgrounds look a bit patchy, and anti-aliased images with transparent backgrounds that are used as links can also look bad, but I think this is a reasonable price to pay for the huge improvement in legibility.

One thing I'd like to see is a CSS attribute for setting the colour of the text-underline. Having a link underlined in grey, changing to black on hover, is a nice, unobtrusive way of highlighting links, but at the moment sites are forced to use a border-bottom hack to emulate this (which obviously conflicts with the forced underlining of links, so had to be disabled, and also makes Firefox gives image links an unwanted underline).