Accessible Web Design and Appearance

It's becoming increasingly common to put special controls on web pages that let users change the appearance of pages, ostensibly to make it easier for them to read: set font sizes, colour schemes, that sort of thing. There is also a great deal written on the need to write pages so that their appearance allows for the needs of users with disabilites, so you should define a certain font size or you should apply a particular colour scheme.

The implication is that there exists a particular appearance, a colour scheme or font, that is best for accessibility and that web designers should provide ways to let users who need something else to change a website's appearance using Javascript-powered embedded functions.

This is wrong. You should not restrict yourself to a particular colour scheme or font, nor provide user-settable appearance features. This is the job of the user's client (web browser), not your website.

There are many different disabilities and they have different, incompatible, competing needs. Dyslexic people like low-contrast pages, vision-impaired people like high-contrast pages. Some dyslexic people like sans serif fonts, some prefer serif fonts (because it's easier to tell i and I and 1 apart). There is an optimum number of words per line for most people for readability and ease-of-use, but this might not fit with the big font preferred by some users. Some people with cognitive problems want lots of sounds and pictures, some find them distracting. You cannot address all, most or a significant proportion of people's accessiblity needs with a single design. Ten years ago things were different: web browsers respected web designers' settings, so Internet Explorer would not scale text as the user requested. Modern browsers like Firefox or IE7 are smarter, and will happily take your grey-on-grey 8pt Times webpage and render it in lime green on black at 48px bold Verdana. And that's great. Your corporate client gets their pretty website, users with particular needs get their needs met by their client.

That doesn't mean you can do whatever you like. You want people to use your site, right? Your paying clients certainly do. So remember, the biggest proportion of people with a relevant disability on the web are older people with some vision impairment. They need a decent high contrast. But while you plan your yellow-on-black design, also recall that the second-biggest disability of your users is probably dyslexia, and many or most dyslexics are better at reading text with a lower contrast, like dark grey on cream. So, are you doing a site for "Golden Oldies International" or one for "Kidz Teaching Solutions Incorporated?" Use your professional judgement, speak to your client, and keep abreast of the user groups that might be affected. But don't believe there is a one-size-fits-all solution.

The one thing you must still do, however, is to worry not about how a page looks but how you code it. A user's client can only work with what you give it. If you use images instead of text the words can't be scaled or read out or searched. If you don't associate text labels with form elements then it can't make sure they are kept together. If you don't use H1/H2/H3 elements it can't identify sections and subsections of your page. If you don't use UL for lists it can't let people skip over navigation sections. So use correct semantic HTML rather than code that looks right when put on the screen but doesn't make any sense internally. Here are the basics:

  1. Use H1 to H6 for headings (not just make headings bold and bigger, and even when you use an image)
  2. Give a page a good TITLE element (great for Google)
  3. Put LABEL elements and attributes on forms
  4. Put alt attributes on every image (even if "")
  5. Use P to create paragraphs (not just BR)
  6. Use OL and UL for lists (not just BR) including navigation bars

Remember, the same things that make the content work for blind users also make it work for Googlebot and other spidering programs that you really want to work well on your site!

Examples of correct coding (that doesn't mess up your lovely design)

Putting in alt attributes

First, the classic:

<a href="mypage?handler.php?234234"><img src="234234.gif"></a>

It's the old problem of missing alt attributes. The user has to know there is a link there, because it is probably important. But what can they get? "handler.php", "234234.gif", none of it useful. Add an alt attribute, it doesn't change your design at all, but it's suddenly accessible.

<a href="mypage?handler.php?234234"><img src="234234.gif" alt="Contact us!"></a>

Impact on your design: none

Javascript

Here's a funky bit of design. Mouse over a confirmation image and a popup DIV appears to let you click it:

<img onmouseover="moveHiddenDivOnScreen()" src="conf.gif">
moveHiddenDivOnScreen() {
	doc.getElementById("fmess").style.left = 100;
}
<div id="fmess">Click here to submit your details</div>

Not much use if you never move the mouse because you're the Googlebot or a blind user. Here's the accessible version, still has your popup but now works for blind people:

<input onmouseover="moveHiddenDivOnScreen()" type="image" alt="Submit your details" src="conf.gif">
moveHiddenDivOnScreen() {
	doc.getElementById("fmess").style.left = 100;
}
<div id="fmess">Click here to submit your details</div>

Impact on your design: none

Code for meaning not appearance

Finally, here's a less obvious illustration of how appearance doesn't matter but code does. This renders just fine for a sighted user who can see the output, but it's impossible to understand the meaning of the code:

<p class="1">Biology</p>
Neuroscience<br>Anatomy<br>Genetics

This (with CSS) can look exactly the same to a sighted person but can allows lots of extra features for other users - like skipping links, or pulling out headlines to make sense of the page - at no extra cost for you:

<h1>Biology</h1>
<ul><li>Neuroscience</li><li>Anatomy</li><li>Genetics</li></ul>

Impact on your design: none