Sage Website Style Guide


Index

Content

Architecture

Graphic Design

Writing for the Web

- Presenting Text on the Web
- Inverted Pyramid Style of Writing
- Plain and Clear Language
- Sentence and Paragraph Length
- Hyperlink Text
- Error Message and Form Validation Text

Microcontent

- Alt Tags
- Page Title Standards
- Meta Tags
- Headings
- Introductory Paragraphs
- Image Filenames

Miscellaneous

- Standardised Text
- Website Directory Guidelines
- Accessibility Guidelines
- Text as Images

Glossaries

- Glossary of Style
- Glossary of Terms

Alt Tags - Microcontent

Updated: 23rd July 2001

Every image on the web site must have an alt tag – without exception.

The alt tag must provide descriptive text which will replicate the function of the graphical image.

The following images do not require a descriptive alt tag but will still need an alt tag attached to them.

  • Shims
  • Spacers
  • Aesthetic background images (e.g. the green curves on the border of the uk.sage.com home page)
  • Non functional images (images used to enhance the appearance of the site – eye candy)

These images must have an alt tag but the alt tag will not contain any text.

For example, a spacer image may have the HTML code - <img src="shim.gif" alt="">

Bullet points which are represented using graphics (other than those which have a graphic assigned to them by using the "list-style-image" CSS attribute) should have an alt tag of <alt="*">

Where possible, try to use keywords in the alt tags as search engines will read alt tags and will, to a small degree, use them to rate the relevancy of the page. Don’t use transparent 1x1 pixel GIFs with alt tags full of keywords. Search engines consider this to be spamming.

If a graphic has contact details, don't use the text "Contact Details" as the alt tag. List the actual contact details in the alt tag. For example - "Telephone: 0191 255 3000, E-mail: feedback@sage.com".

Alt tags for buttons should mimic the button text.

We often use images which contain only text. The alt tags for these images should contain as much of the text from the image as possible. If the text needs to be shortened, replicate the message of the image in the alt tag text as much as possible.

Alt tags will be included within the wireframe with the following information:

  • File name of graphic
  • Alt tag text

Summary

  • Every image must have an alt tag
  • Describe the function of the image rather than the visual description
  • Use <alt=""> for "eye candy" images
  • Buttons will usually have the button text as the alt tag
  • For images containing only text, use as much of this text as possible within the alt tag.