Designing for the web

Inaccessible by design

One of the main tasks web developers face on a regular basis is the challenge of turning a design storyboard into accessible HTML/CSS templates for a website. This task is made more difficult when the web designer has not thought about accessibility. Trying to create accessible templates from a poorly thought out storyboard can be a frustrating experience. It is one that can be easily avoided if the web designer has thought about the medium they are designing for, the web.

Things to consider

The Web Content Accessibility Guidelines (WCAG) 1.0 is the basis for accessibility on the web. There are several checkpoints which need to be checked at the design stage by the web designer. Getting things right at this early stage will avoid unnecessary issues further into the web development process. To demonstrate the importance of designers checking their work for accessibility issues, we will use the design for a fictional website, Highbury University in the examples provided. 

Using Colour Alone

The first checkpoint web designers should consider is ‘ensure all information conveyed with colour is available without colour.’  If colour alone is used to convey information, people who can not distinguish between certain colours may not be able to understand the information provided on the website. For the Highbury University site, the designer has specified that links relating to Undergraduate courses are blue on a white background and links for Postgraduate Courses are blue on a light blue background throughout the site. Course links are often written as just ‘Economics and Philosophy’. A normal sighted user will be able to tell whether the link is an ‘Undergraduate’ or ‘Postgraduate’ course from the background colour of the link. However blind, partially sighted users or people with colour deficiencies would not be able to tell which type of course ‘Economics and Philosophy’ was, unless they followed the link. If a long list of courses was present on the site, following each one to determine which type of course it was would be a very time consuming and frustrating experience. Undergraduate and Postgraduate courses are conveyed by colour alone. Web designers should make sure that information is not reliant on colour alone. One way of checking this is to view the design on a monochrome monitor to make sure all information can be conveyed without colour.

Foreground and Background Colours

Web designers should make sure foreground and background colours in the design have sufficient colour contrast when viewed by people with colour blindness or partial sight. Poor colour contrast can affect the ease with which most people read content on a web page. On the storyboard for the Highbury University website, there are several foreground and background colours which have insufficient contrast. The headings ‘About Highbury University’, ‘News & Events’, ‘Student Access’ and Useful Links’ are in a light blue colour on a white background which falls below the recommended World Wide Consortium (W3C) colour brightness and colour difference values. Using the NILS Colour Contrast Analyser it is possible to check whether colours used on a design reach the required level or not. Web designers should make sure all colours on their storyboards meet the required levels.

Use mark-up rather than images

Using images to display text is another issue which should be considered at the design stage. Many designers will often use non-standard fonts such as Futura, Gill Sans and Helvetica in their designs rather than web-safe fonts such as Arial, Verdana or Trebuchet. Web safe fonts are those which the vast majority of people will have installed as standard on their computers. The main problem when using text in images is that the text cannot be resized to make reading easier for people with mild visual impairments. It is also more difficult to update the site as new images have to be created each time the information changes. Designers should make sure that any text in a non-standard font is clearly defined and at least 16pts in size to allow people to read the information in the image easily. If 16pts is too large for a particular piece of text the designer should consider using a web-safe font which can be easily rendered across all browsers using HTML. The ‘Highbury University’ website shows two occurrences of non-standards fonts. The first is the use of the Futura font for the text ‘Courses for 2007’. To create this font effect on the web would require the use of an image. This would be acceptable as the text required is above 16pts in size.

The small text is below 16pts in size, whereas the large text is above the recommended size. The second occurrence of non-standard fonts is the use of ‘Futura’ for the ‘Undergraduate’ and ‘Postgraduate’ headings. Both headings would have to be created using an image to achieve the same font affect.  These headings are currently below 16pts and would not allow people to read them easily, meaning they would fail the WCAG checkpoint ‘use mark-up rather than images’.

The small text for ‘Undergraduate’ and ‘Postgraduate’ is below 16pts, whereas the larger text shows the headings at the correct size, 16pts. Web designer should make sure that where non-standards fonts are used in the design they are over 16pts in size.

Relative Units

Creating a flexible website can only be achieved using relative units (percentages or ems), or a combination of relative and absolute units (pixels, points). Using a flexible design reduces the amount of horizontal scrolling necessary to read the page. Web designers need to consider how flexible their designs are and whether they will work at different screen resolutions and/or different font sizes. If the web designer has not considered how their design will scale in a browser this can cause numerous problems for a web developer trying to code the design. This includes thinking about how images will work when the page is wider and how columns will appear when the page is smaller. The ‘Highbury University’ website has been designed on a 1028x768 canvas. People will view the site at any size from 800x600 to 1280x1024 or larger. In this example the full width of the main image of the university building is 1024px wide. Viewing the site on a larger screen will mean the image will ‘run out’.

The blue line indicates a 1024px width, and the red line indicates a 1280px width. To solve this problem the web designer should prepare the image to fade into a solid background colour which can then be applied using CSS. When the image does run out at larger resolutions, this will no longer be noticeable. Another issue web designers should take into consideration is the fact that the web is a flexible medium. Some web designers require certain lines of text to be on the same line, while this may fulfil the design requirements; it isn’t always practical or possible on the web. For the ‘Highbury University’ website, the designer has specified that the text ‘Course Search’ and ‘Applying & Enrolling’ should always be on the same line. In practice this is not possible. Both pieces of text are in columns which are percentage based; meaning the width of the column will change depending on the size of the browser window. This means the available space for the heading will change. In some instances (larger screen size, smaller font size) there will be enough space in the column allowing the heading to remain on one line, whereas in others (smaller screen size, large font sizes) the available space will be reduced meaning the heading must wrap onto the next line. It is better that the information available on the site is readable and usable for people, and doesn’t break the layout of the page.


Link Targets

Links are an important aspect of the web. Ensuring link targets are clear and concise will help people navigate through a website with greater ease. Links should accurately reflect the target of the link, without a user having to read the surrounding content to understand where the link will lead. Common examples of poor link text include ‘click here’ and ‘more'. The style of links is also important as people recognise which pieces of information are links and which are not. Links are usually styled differently to regular content. The ‘Highbury University’ design shows links with poor link phrases such as ‘click here’ and links with the full path of the link written out, for example, ‘’. It also has ten different types of styling for links including those which are underlined, those which aren’t, black links, blue links, links with bullets, links with arrows, white links and tabbed links.

Different styles of links for the Highbury University website Using so many different styles for links may lead to the following problems:

  • The web developer will need to write more CSS to style all the links, leading to style sheets with larger file sizes;
  • Content authors may not know which style of links to use;
  • Users will find it difficult to understand what pieces of content are links and those which aren’t.


Web designers are part of the accessibility lifecycle. Getting things wrong at the design stage can lead to numerous problems down the line when trying to correct accessibility issues on your website. Making sure the design of your website has suitable colour contrast, doesn’t use colour alone to convey information, and allows the layout to scale will not only make your site more accessible in the long term but will save you both time and money in the future.