There is a good reason not to specify the background colour (or provide an option to change it instead): dyslexics sometimes have their background colour set to something other than white as it helps them read on screen. Bad for aesthetics for everyone else, but this is an article about accessibility…

Is there anywhere I can get ahold of some screen reading software that uses the focus attribute. I normally just check websites I build, which thankfully isn’t very often as my codings a bit naff, in emulation software. If I could download something more appropriate would be good and should hopefully allow me to start getting my coding skills more accessible.

if you are choosing to go with underlined links, in whatever state, then remove the default underline and replacing it with a border that’s a couple of pixels away from the text.

That’s good advice, although on some occasions IE6 can choke on links with borders (it’s a form of the Peekaboo bug). Worth bearing in mind if things start going wrong in your cross-browser testing.

The border styles for replacing underlined links could be re-written like this:

border-bottom-style: solid;
border-width: 1px;

Then the border would pick up whatever colour’s already being used for links, without having to duplicate that value.

you can add an id of current (or something similar) in appropriate places in your navigation

I’ve used a strong or em element instead, so that there’s still some indication of the current page for screen readers and non-CSS folks..

Paul: it’s interesting that you’re using the strong or em element, but unfortunately, while it’ll do the job for non-CSS folks, screen reader users probably won’t get the benefit. I’m not aware of any screen reader which by default vocalises strong or em elements, and the main ones don’t even include options to turn that vocalisation on.

Screen reader users will get an indication of the current page from the usual things (e.g., page titles and headings) anyway, so they’re not particularly losing out from not getting the extra visual information that this technique offers.

Great article!

As pauldwaite rightly says you can miss off the colour value from the border as it defaults to the text colout, but you can still use the shortcut version: border: 1px solid; works as you might expect.

Thank you for your very nice article!

I wasn’t aware of IE’s problem with :focus (but you can use a keyboard with it? impressive!) but now that I know, :active is getting added! Though I wonder why you advice against removing the focus outline (or rather, replacing it with another visual cue) Aren’t we past the “all links should be blue and underlined” way of thinking by now?

I like your article :)
pixeldiva: You pointed out that paul’s strong/em wouldn’t be read out, but I’m interested to know if your idea (using id’s) are read out in screen readers, as in my experience they aren’t either.

Michael: You’re not the only one with a non-white default background colour :). It’s quite startling how many sites forget it, which is why I mentioned it.

Kilian: The reason to leave the focus outline is that it adds an extra element rather than just colour, in the event that someone is only distinguishing links with colour rather than underline or whatever. It can also help distinguish links even when extra effort has gone in to highlight the links, and is what most users expect to be displayed as they tab around the page. I’m not suggesting all links should be blue and underlined, but given that this is there to help users and it’s not heinously ugly, there’s no real reason to remove it.

Mike: you’re right in that screen readers won’t read out the id’s, but this technique is not aimed at screen reader users – it’s intended to give users can see a bit of a boost. Screen reader users aren’t being specifically disadvantaged by not getting this information, as I mentioned in my comment above.

My intention with this article was to give some tips that are predominantly intended to help those who can see the page and who are often forgotten about because it’s easy to focus on those who entirely can’t see the page.

Really interesting. It’s good to hear what a lot of people think are specialist ideas about accessibility getting an airing.

From past experience if you start with the principles of accessible CSS then you’re less likely to write unmaintainable CSS, or CSS where one specifier suddenly conflicts with another and you can’t work out why. Always pairing background and foreground colours in the same pair of braces is a must for clarity (even if it’s background-color:inherit), for example.

(I think Yahoo!‘s login page still has the no-background CSS bug. Tsk tsk.)

This is very interesting, and I must admit that I haven’t before considered moving underlines to make the text more readable. Something to play with in the New Year.

I’ve used the same sort of technique for reversing of links with focus but I still find there are some problems with it. Even in your Example navigation using location indicators it doesn’t quite work (at least in IE6.0 – which I know is probably the worst one to use but many people still do). If you hover over one of the links and then tab through the links with the keyboard, you get the old dotted lines round the link back.

Richard: I’m not sure what you mean by not quite working in relation to the dotted link surround – that’s supposed to be there. Can you clarify a bit?

Hi Ann,

Nice Article.

I hope this is not too late to comment.

Well I’m confused, I read somewhere else that “Hardcoding colors in your CSS would prevent the browser from using custom colors the user may define, which can be a problem with accessibility”, under some post where someone was using “color: #00f;” in a CSS class, I was still searching to get what he really meant until I found your article which didn’t kill my confusion, but increased it through that “must specify background-color” advice.

I’m not sure what he meant exactly, to never specify colors? Sounds a bit ridiculous. He got 25 likes (likes – dislikes to be more precise) which got me really interested.

What’s hardcoding colors Arghhhhhh my head.

Regards

Richard K is absolutely right. It’s important not to override the user’s stylesheet. It would be even better to give each user the opportunity to set the foreground and background of your site to a combination that works for them.

In doing so, you would be helping a lot of people—perhaps people who have dyslexia, but also people who have low moderate vision. Low moderate vision is anywhere between 20/70 and 20/200.

Some folks whose vision is in this range use screen readers, as do some people with dyslexia, because it’s easier for them. But others magnify the text as much as possible and get as close to the screen as possible to read your text.

“As close to the screen as possible” is where being able to set the color combination comes in. A white or very light background becomes a glare, so their eyes get tired quickly. White text on a black background is like oncoming headlights in the dark—visible, but blindingly so.

Ann, many would find your combination of medium gray on very light gray comfortable enough. But one of my friends with low moderate vision would still have to darken the background just a bit, and another would still find it uncomfortable to read.

This second friend uses a stylesheet with a combination of beige on khaki. I can barely make the text out—the color contrast ratio is 1.1. But my friend finds it easy enough to see and not uncomfortable for however long she needs to read.

All this is to say that it is impossible for us to accommodate the needs of every user with respect to color combination. So yielding control to the user is essential to making our websites fully accessible. And making it easier for the user to choose their own color combinations, perhaps even educating them to the steps they can follow to make every website easier to read, would show the utmost consideration for your reader’s needs.

By the way, please don’t go looking at my website as an example of accessible design. At least not until I rob someone else’s stylesheets. (I’m no designer, and whenever I think I have dressed myself in a really great color combination, my wife tells me to change. I can’t even use colorblindness to explain that problem away, because all the tests say I’m not.)

Thank you for mentioning to specify a background image. I use a non-white default background color, and the number of sites that assume I don’t is enormous. It looks quite unprofessional every time I come across one. Along the same thread, if you want your links to be blue, you need to specify that color as well. If you specify any one of text, background, or link colors, (or background image,) you need to specify all the others.