Fish eye image of a cute nerd with his thumbs up.

Web Design Tips

Link text and removal of the link

Make link text flexible enough so that it 'survives' the removal of the link.

Make a long form seem shorter

Break a form into manageable chunks to make it seem shorter by putting relevant fields (e.g. Personal Details) together.

Vertical forms, not horizontal

Because users find it easier to complete forms from top to bottom rather than from left to right, you should use a vertical layout for your forms rather than use multi-columns.

Create a custom 404 page

Mistakes happen! Set up a custom 404 error page that includes your main navigation elements to help users find their way back to your site.

Visited links

Change the color of visited links so that users don't have to remember where they've already clicked.

Links for keyboard-only users

Ensure you apply :focus styles to your hyperlinks and not just :hover and assign a background colour to focused links so that keyboard-only users tabbing through web pages can clearly see the links.

Identify the language of your web page

A screen readers such as JAWS needs to know what language your pages are written in, so it can pronounce the words properly when it reads them aloud. It also helps Google users when they search in languages other than English.

Use 'skip navigation'

Screen readers users have to read the content of a web page from top to bottom. They can't skip elements they're not interested in. The 'Skip navigation' link allows screen reader users and people who can’t use a mouse to skip long lists of links such as the main navigation of a website.

Put important links at the top of the page

Take the example of the 'Skip Navigation' link, if it's placed at the top left hand side of the page, users who can’t use a mouse and rely solely on a keyboard to navigate their way through your site won't need to press the tab key like crazy to access the main content.

Use meaningful title attributes

Title attributes can be really useful when used as short summaries that describe where the hyperlink will take the user who clicks on it. Think of them as a way to promote the content of the destination page.

Links read out of context

Use text that makes sense when read out of context. For example, avoid "Read more" and instead use "Read more about web accessibility".

Make your multimedia accessible

Make your videos and podcasts accessible by providing captioning and transcripts of audio, and descriptions of video.

Full stop to the end of alt attributes

By adding a full stop to the end of the alt description of images, this will help a blind person who uses a screen reader to differentiate between the image label and the surrounding text.

Download time and usability

Try to keep the download time of your home page to a maximum of 8 seconds in order to reduce the bounce rate.

Colour blindness

Ensure that dark red links are underlined when they are adjacent to black text because dark red text cannot be distinguished from black text by colour blind users.

Javascript and navigation links

Avoid using JavaScript as part of your website navigation, because search engines cannot index the links contained within it.

Did You Know?

Dyslexia

It is estimated that approximately 4% of the population have mild to moderate dyslexic tendencies, and a further 6% are severely dyslexic (Source: British Dyslexia Association)

 

Subscribe to Our Newsletter

Please complete all the fields (read our privacy policy)

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
3 + 16 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.