Designing accessible websites: my top design tips

Back to basics

By planning accessibility and usability into your design from the start you can create a web masterpiece! This article will be part 1 of 3 of ideas and suggestions when creating a website from design through to code. Remember, content is king. Your design should make it easy for visitors to find the information they want.

Before even opening PhotoShop, you should have gathered all the content elements that are required for your design. This will give you a good basis to start your design. There is no point starting a design without knowing what type of content you will use. By having an idea of what content will be required on the page, you can decide how best to lay it out ensuring elements are easily found in a prominent area of the page. You will need to decide what elements are the most important to your visitors.

Your design should be intuitive, attractive and easy-to-use by creating clearly defined areas of the page with good contrast. When a user sees your page for the first time, will they be able to clearly see where the navigation is? Are the important sections of your site clearly defined? By creating a clear layout your users will feel confident navigating around the site. Does your design make sense?

Choose your colours wisely

• Ensure there is enough contrast between the text/image and the background so that users with visual impairments can still read the text with ease
• Contrast should be very good for all areas of the site to ensure the text is easily readable. This is especially important when placing text over the top of images. Remember, some of your users might be colour blind or suffer from other visual impairments. Would they be able to see important information easily?

Promoting High Usability

• The design and layout of a page is critical to aid user experience. Different areas of content on the page should be clearly defined so that users can easily tell where content areas begin and end.
• Create good-sized "hit-areas" for all click-able elements where possible and ensure interactive elements are easier to use and recognise. Some users may have motor difficulties and find it hard to use a mouse so small links might pose problems.
• Pages that interact to user's movements are easier to use. "Rollovers" not only serve an aesthetic purpose, but are actually a visual indicator help the users see areas of a page that are interactive.

Web Typography

Some users may have difficulty reading small text sizes or elements on a page with poor contrast (light text on light backgrounds for example). When choosing typograpy for your website, remember the following:-

• Use a good sized, clear font in your design. Make sure your text is clearly spaced out and easy to read as a lot of users skim the text for the content they are interested in.
• Don't try and cram your text into a small space. White-space has an important part to play in a website. By having some "space" around your content you will make it easier for the visitor to scan.
• Make sure your links look like links! Don't be tempted to make your links wildly different from what users expect. Your links should be a different style and/or colour from the rest of your content.

Final thoughts

Your website should always be evolving and improving. Most websites never get it right in the first attempt, but by constantly looking at areas to improve, your site will should grow and develop! So, down to you. What other tips do you always keep at the front of your thoughts when designing?

• < Javascript: check if a UK postcode is valid
• Adobe Live 2007 - London >