Web content

Making your website more user-friendly and accessible

Writing for the web

Use

Simple content
Clear, sans-serif font (Arial or Helvetica)

Do not use

Jargon
Hard to understand words
Complex sentence structures
Justified text
Bold, italic or underlined text
Fixed font sizes

Limit

Graphical text

Images

Images, icons and other media make a web page more engaging and can make information easier to understand.

Use

Alternative text (also known as alt text).

Limit

Graphical text

Alternative text

Make sure all images have meaningful alt text. Alt text is read out by screen readers to describe the image shown on screen to users.

Graphical text

Images of text cannot have their appearance altered by the user. Unlike normal text, images of text become pixelated when enlarged by magnification software (particularly at higher levels). Users who rely on this method of access will have difficulty reading any information given as graphical text.

Links and navigation

Use

Large clickable areas.
Good-sized, well-spaced links and images.
Separate by several pixels - not just one or two.
Descriptive links, which give a clear idea of the destination and make sense read out of context.
Site map
‘Skip navigation’ option
‘Back to top’ option
Full keyboard functionality

Do not use

‘Click here' and other non-descriptive links.

Site map

A site map will allow users to gain an overall feel for the layout, whilst also allowing direct access to any page on the website. If possible, include images or icons to visually sign post the different areas.

‘Skip navigation' and ‘Back to Top' options

This enhances the accessibility for users accessing the website via the keyboard as they will be able to select one link to jump over the navigation into the main page content instead of laboriously tabbing through each link.

Keyboard functionality

Make sure all functionality is available through the keyboard as well as the mouse. Check by tabbing through links and forms using the keyboard. Some users may interact with websites only through their keyboard.

Layout

Use

Consistent design.
Cascading style sheets.
White space to separate page elements.

Do not use

Cluttered pages.

Cascading style sheets

Cascading style sheets allow reuse of the same layout and design for each page of a website. This benefits all users but can be particularly helpful for those with learning disabilities.

Colour

Use

Good contrasting colours.

Do not use

Fixed colours.
Rely on colour to convey information.

Avoiding fixed colours

Users with different impairments may have background/text colour preferences. Make sure colours can be changed in the browser and have not been enforced by the web developer.

If your website has been built using cascading style sheets (CSS) for the layout and colours, consider offering alternative style sheets.

Colour contrast

Colour contrast can be measured. Juicy Studio offers a colour contrast analyser which checks the colour combinations on your web page against the W3C recommendations.

Multimedia

Use

Animation which can be deactivated.
Captions or transcripts for audio content.
Text equivalents for film content.

Moving content

Animation can be distracting and can make it difficult for users to read content. Provide a way to disable any movement. Alternatively, allow it to loop for a few seconds and then stop automatically.

Text equivalents

Provide text equivalents for a film where it can be conveyed using single text. Examples include simple animation, banner adverts and any complex multi-media that cannot be made accessible in another way.

Flash films

The text equivalent is assigned using the accessibility panel. Place the text equivalent in the name field. Make the description short and focused. Some screen readers will read this content by default. Long descriptions can result in an application that is tedious to listen to.

In cases where a single text equivalent is used for an entire film clip, the ‘child' objects of the film should be made inaccessible. This will prevent animations within the film from causing frequent updates to the screen reader. It also assists automated testing of the content for accessibility.

Read detailed information about creating accessible Flash movies - Adobe Accessibility Resource Centre.

Print stylesheets

Use

Style sheets to optimise web page content for printing, which follow accessibility guidelines for printed documents.