Creating Accessible Websites

Dealing With Text

Disabled users are able to change the way a website looks by altering their browser settings. This allows them to change the font type, colour and size as well as the background colour of the page. Please refer to section on "Customising Web Pages" to see how this is done. Web pages should be built using Cascading Style Sheets (CSS).

 

General Points

Don't create text as images. If a user enlarges the page, the quality of the image will distort and become illegible.

Do not convert Word documents into HTML using Microsoft Office - it doesn't produce clean code.

<Font> Tag - don't use it!

Never format text using HTML tags such as<font size> <font color> etc. If your existing web pages contain these tags, remove them and replace with a style sheet.

Dreamweaver users can remove unwanted <FONT> tags by doing the following: Select any text of identical formatting (font type, colour, size etc.) Set the text properties to the default settings (i.e. Default font, size = none, colour = no value). You should then go into the code view and run "Edit>Find and Replace" on the <FONT> tag to check that they have all been removed.

 

Font Size

Text must be scalable - choose relative units such as %. Avoid pixels and points. Define the font size and other text attributes using a style sheet.

 

Text in Tables

If you have placed text inside tables make sure the page makes sense. Screen readers generally start reading at the top left and read across the page, cell by cell. Arrange the text so that linearised reading makes sense.

Be careful when writing style sheets - text inside table cells will reduce in size if the style is not applied correctly.

 

Headings

Use HTML to give your text structure - <H1> should be used for the page heading.<H2> for the sub headings and so on - they should never be used to format text size.

e.g.

H1 - Main Page Heading

H2 - subheading

H3 -

H3 -

H2 - subheading

H3 -

H3 -

<<Back to list :: Next>>

Intro | SENDA | Disabled Users | Accessible Pages | Testing | Further Info | Getting Help