Accessibilty: Site Navigation

Left Sidebar

The following content is part of the left side-content panel.

Main Content

The following content is the main page content.

Styling tips for web pages

in
Using proper headings and clear and consistent styles will help your page flow.Using proper headings and clear and consistent styles will help your page flow.

Illuminate ICT spend a good deal of time working on your site designs. When they leave us, we're usually very proud of what we've achieved and we've given you a sturdy platform on which to build rich and beautiful content - I may be getting carried away! However, this is where one of the pitfalls of a Content Managed website rears it's fat, ugly head.

Try and keep it professional looking

A professional looking site design can quickly be spoiled by content that changes font size, colour and type on a whim. It quickly looks less professional, which can damage people's impression of you, as an organisation. It also makes it harder to read and a good deal less accessible, which could be a particular problem if you are providing services to older people or people with disabilities or impaired sight.

Accessibility

Many people who have impaired, or no sight, use what are called screen readers to access content. These interpret and read outloud the text on your pages. So, for these people, it's really important that you use the right format for your text. For example, don't format a paragraph of text as if it were a heading. We've found that many people use heading format types to increase the size of their text. This can make your text very difficult to interpret by screen readers, and so could make your web pages less useful to people who use assistive technologies, like screen readers.

Finally, the tips and tricks!

Here are some fabulous tips to help you create beautiful web pages that are as easy to read as they are accessible to people who use any kind of assistive technology.

  • Be consistent. Sites that change colour and font size or type all the time can be difficult to read.
  • Format paragraphs as paragraphs, not as headings.
  • Using proper heading formats for your headings helps people who use screen readers to interpret the text on your website. You can also use sub headings to help structure your page. The heading formats range from h1 to h6, but you probably only need to use h2 and h3 as the title at the top of each page is already h1 and anything beyond h3 suggests that you need to split your page into 2 or more pages.
  • When you edit a page on your site, the text that you type into the Title box will appear as the heading for that page. Therefore, there's no need to repeat the title on the first line of your page. For example, we've found that many people will create a page that has the title "About Us" and the first line of text is another heading that says "About Mrs Miggins special pie company". I'd say, get rid of one of these. As the 2nd is more meaningful, I'd ditch the rather bland "About Us" and use the more explanatory text as the title.
  • Don't overuse bold and italic text. You completely loose the effect if everything is bold or italic. If you want to emphasize a few words, then you should use them, but use them sparingly.
  • If you use images on your pages, use them in a consistent manner. Try and keep the size and shape of your images the same. This may mean working with the images on your PC, before you copy them to your site, but this is well worth the effort. Try also to keep the images in the same place on the page and not dotted throughout the text. Again, it's about consistency.
  • Do make sure that the text you write is clear and concise - get someone else to read it through...
  • ...And while they're at it, they can check your spelling too! Many people get very turned off web content if the spelling is bad. More importantly, screen readers may struggle with badly spelled words.
  • Split long pages into shorter ones whenever you can - there's no limitation on the number of pages you can use, so just don't create pages that go on and on and on......

But, just before I break my own style rules..!

Glossary of terms

By the way, if you're puzzled by any of the jargon I've used on this page, like Assistive Technology or Screen Reader, have a look at our Web Glossary pages, where we try to take some of the mystery out of the odd words people use when they discuss anything to do with the internet. If there's a term that you're confused about and you'd like it explained, why not get in touch!