DEMOS Project - Accessibility Guide: Content

Content and Language (Writing for the Web)

Listening to your webpage being read by a screen reader can be an educational experience. But this is not the only reason to modify one's writing style for the web. Reading from the screen is a different experience than reading from paper. Users often only scan text for interesting or relevant information rather than read it thoroughly. Therefore it is a good idea to break up text into smaller paragraphs, apply a logical order of headers and subheaders, and use bullet point lists.

Readability and 'scanability' can be increased by "front-loading" paragraphs, stating the topic of the paragraph in the first sentence, and by using a good amount of 'white space' on the page to separate chunks of text. Keep pages uncluttered and keep distractions to a minimum.

Here are some tips:

give documents a meaningful page title.
keep paragraphs short.
limit each paragraph to one main idea.
highlight keywords.
use meaningful headings and sub-headings.
use bullet lists.
use clear and simple language.
avoid or explain technical jargon.
avoid the passive voice.
use spell and grammar checkers (eyes often compensate for spelling errors, screen readers don't).
indicate language changes (see below).
be aware of sensitive cultural issues.
label abbreviations and acronyms and ASCII art (see below).
provide alternatives to auditory and visual content (see chapter on Multimedia).
mark up documents with proper structural elements (see chapter on Structural mark-up).
give links descriptive titles.
be consistent with link colours.
avoid underlining. It is understood as an indication for a hyperlink.

Don't use 'Click here'

Don't ever use the phrase 'Click here', 'Click the icon below', 'Click on the link below to go to website XYZ' or similar. You don't want to patronize your users. They know what a link is and what it does. And refering to an icon or image that might not be visible in a text browser or does not follow directly will only be confusing.

Phrase links correctly. Make a link part of a sentence, make it a bullet point or use indentation if appropriate.

Example:

Don't use: "For information on XYZ click the link below."

Instead use:

Information on XYZ.

or:

Paragraph with some text about a subject (more information).

[Be aware, however, that you shouldn't use the same phrase for 2 links leading to different destinations So, don't use 'more information' more than once on one page.]

or:

Paragraph with some text about a subject.

There are endless options to avoid using 'Click here'.

Abbreviations, acronyms, ASCII art

<abbr title="et cetera">etc.</abbr>

<acronym title="Cascading Style sheet">CSS</acronym>

<acronym title="smiley">:)</acronym>

The ABBR and ACRONYM tags are only supported by the latest standard-compliant browsers (see the chapter on Standards). They are simply ignored by older browsers. Up-to-date browsers and screen reader software will, however, make good use of these tags.

Hover your mouse pointer over the following acronym: WAI

In a standard-compliant browser a tooltip should pop up displaying the content of the title attribute: 'Web Accessibility Initiative'. In addition, Mozilla and Netscape 6 show a dotted line under the acronym to indicate that there is more information available. Screen readers will read out the content of the TITLE attribute.

The first time an acronym appears on a page it should be fully and visibly expanded: Web Accessibility Initiative (WAI).

Globalization, localization, language changes

An important issue to consider is that of globalization and localization. The web revolution has spread to non-english speaking countries, which has triggered a variety of debates about multilingual web design.

In terms of accessibility it has become important to state the language of a document and to announce language changes within a page to avoid getting users of screen readers confused. Screen readers will switch to the according language where required.

The language of a document can be declared by including the LANG attribute in the HTML tag:

<html lang="en">

...by including the appropriate meta tag:

<meta http-equiv="Content-Language" content="en-gb">

Language changes within text can be specified as follows:

<span lang="fr">raison d'être</span>

A useful resource:
Code for the Representation of the Names of Languages

| Previous || Table of Contents || Next |