Links on this page that end with an asterisk (*) will take you to our glossary. Use your browser's Back button to get back to this page.
Follow these checkpoints and you should end up with a well-designed site that'll be a pleasure to browse and revisit.
Clean, uncluttered design
Don't be tempted to squash too much information on to your pages, even if you have a lot to get across. Many of your users, including people with poor sight or cognitive issues, will appreciate a clean, uncluttered, well differentiated interface.
You can also make good use of background colour, patterns, borders and spacing to differentiate between the various sections on your pages.
Use good colour and contrast
Good crisp colour contrast makes most colour combinations accessible to the majority of users. If there's a perceived need to use low contrast corporate colours though, you can still make your design work for everyone by providing a style switch option that allows users to choose their own colours.
We'll talk more about style switching in the Build section.
Choose easy-to-read fonts
Font size
Although it makes sense to choose a font size that translates to at least 12pt on screen, the most important thing is to declare all font sizes in relative units that will scale up and down when users change the zoom or text size options in their browsers. We'll cover this in more detail in the Build section.
Font style
Since most of users' time on your website will be spent reading text, make sure the font you choose is clear and easy to read on a computer screen or handheld device, so that users can concentrate on your message rather than struggling to read the text.
Choose a sans-serif font as they're the easiest to read on a screen. Verdana, Arial, and Helvetica are the most widely used.
The font you choose will be a compromise between the look you're trying to achieve, the font's readability, and the availability of a particular font across various platforms. It's best to specify more than one font in the code to cover as many bases as possible, and to include a generic style of "Sans-serif" to cover any platforms that might not support your chosen styles.
We'll cover font declaration in more detail in the Build section.
Left-justify text
Screen magnification users, who can only see a small chunk of the screen at once, often use the left margin as a ruler when reading down a column of text, so try to use left justified rather than centred text.
Fully justified text has a straight edge on both the left and right. To achieve this, extra space is put between some of the words. These extra spaces can appear to create a pattern to people with dyslexia, called rivers of white. This makes it very much harder to concentrate on the words, because the pattern acts as a distraction.
Keep your line lengths short
Long lines of text are difficult to read for people with dyslexia or using screen magnification. So if possible keep your line lengths to at most 80 characters.
Avoid deeply nested menus
Using a nested accordion-style menu system for your left-hand navigation may seem ideal, but try using it with a keyboard or speech software and you're likely to find it frustrating and disorientating. We'd recommend no more than two levels of nesting in any tree-style menu.
Follow well-known conventions
On most websites, users expect to find the logo, strapline and global navigation at the top of the page, contextual navigation down the left-hand side, a search box in the top right, etc. If you come up with a wacky new design that doesn't follow these basic conventions, users with cognitive impairments or people using screen magnification who can only see a small chunk of the page at any one time may struggle to use the site.
Consider accessible wireframes
If you're planning to have disabled users give feedback on your wireframes*, don't forget these may need to be in an accessible format, perhaps HTML or a linked suite of word-processed documents.