Writing accessible web page content

 

Purpose of the page

The primary purpose of most pages in your web site is to communicate a message. It is important to bear in mind the following points when writing your text.

  • What is the aim of the page?
  • What you want to say?
  • Whom do you want to say it to?

Without clear objectives it is very hard to create an effective page that holds the readers interest and delivers your message in a way that the user understands.

If you are designing a web site for a client it is vital that you establish the above criteria at the beginning of the project. You should also obtain some samples of the text to be used so that, if need be, you can start any required education process.

Language style

Any web site needs clear, concise, readable content. Attention spans are short on the web, so a newspaper style is most appropriate - especially on the top level pages where you need to capture the visitor’s attention. For most pages this means having headlines at the top, followed by more information. It means putting the conclusion first and then supporting it. It means putting things in bite-sized chunks.

Once you've got the reader's attention and they want to know more you can lead them to more detail on this, or other pages. The key thing is getting the visitor interested enough to want to read the detail. This is particularly important for disabled people who have enough problems using the technology of the web without having to struggle to understand your content.

Be positive

In most cases a visitor arrives at your site because they have used a search engine and are searching for a product or service like yours. Their main question is not "do I buy?" but "who do I buy from?" They need objective information, like your product's features and pricing. Compare these two examples:

Example 1

WidgetSearch helps businesses to prosper in today's knowledge economy by giving employees timely access to the data they need.

Widget Search frees up time for end-users, IT managers, and senior managers.

Raise productivity! Our info-centric environment helps employees stay informed and contribute to your goals.

Example 2

WidgetSearch is an electronic document management system that people can use to:

  • search documents by keyword or phrase
  • search documents by date, or via custom searches in special fields like title, location, and author
  • find information even if the keywords are misspelled

Own WidgetSearch for the affordable price of $599. Optional support is available at $100 per year (includes upgrades).

The first example is full of benefits-talk, but leaves the reader with no clear idea what the product will actually do, or how much it costs. After reading this example, the user cannot answer the question "will this product do what I want?". By contrast, the second example concentrates on features and gives the reader a very specific idea of the capabilities of the product. The reader can answer the questions "will this product do what I want?" and "how much does it cost?" The use of clear, objective facts makes the content easy to understand and creates credibility in the mind of the reader.

The key to effective communication is to understand your visitors with the aim of providing them with the information they want in the clearest possible format.

Be concise

Remember that the web is a very different medium to traditional paper. If you do "cut & paste" text from a printed document to a web-page you will almost certainly need to cut it down by 75% if you want a user to read it "on-line".

There is a temptation for some content authors to use the web to demonstrate their ability to construct complex sentences, or to manipulate the English language. This is a particular temptation for people seeking to impress a supervisor, or their colleagues. However the Internet is a global medium and you could expect a large number of your visitors to have English as their second (or third) language. A skillful author will recognise this and construct documents using only language suitable for the widest audience possible. This does not mean "dumbing down" your content, but it does mean making sure that you have a clear, logical thread through the content. It means presenting your message in sufficiently short sentences that an expert in your subject can skim read the content whilst a non-expert can take the time to digest and understand each point as it is presented.

At the other extreme there is a temptation to get published as soon as possible without properly checking that the grammar and spelling are correct. Blind users may find your content impossible to understand if it is not spelt correctly. Screen readers are “dumb robots” that convert your text into audio, they cannot guess what the author meant to write. It only takes a few moments to run a spell checker over your text.

Readability Testing

A handy tool for checking (but not proving!) the readability of your text is to subject it to an automated tool such as a "Gunning-Fogg" test. These are reading algorithms developed in America to gauge the suitability of books for certain grades of student. These are automated tests that predict the potential readability by looking at the length of sentences and the number of syllables in each word. A typical tool for checking the readability of a web site is available from JuicyStudio at http://juicystudio.com/services/readability.php. If you just want to check a block of text you can use a service such as that provided by Online-Utilities at http://www.online-utility.org/english/readability_test_and_improve.jsp. Exactly which level of readability you need to aim for will depend upon your target audience.

Checking your style

A simple way to check that your writing style is suitable is to read the text out aloud to someone else and see if they can explain the content back to you easily. Do this after you have checked the spelling to pick up things that may have been missed by the spell checker, such as “there” instead of “their”.

It can be quite hard to write clear and concise text, so if you have made the effort (or need to justify it to your boss) consider registering for the Internet Crystal Mark  It can be quite expensive unless your organisation is already registered, but it is certainly worth following their guidelines.

Length of your pages

There is a school of thought that suggests that pages should be no longer than will fit into one screen view (i.e. not extend beyond the bottom of the screen, sometimes called the "fold"). However there is no hard evidence that people prefer jumping from page to page rather than scrolling down a single page. For users of assistive software one long page is easier to handle than a series of short pages as they don't have to keep "skipping" navigation links etc at the top of every new page.

If you have a long Web page that you want people to scroll through, you need to make sure you avoid scroll blockers. These are visual elements of your Web page that imply that the page content is over. These include elements like:

  • horizontal lines
  • lines of text links
  • short, wide graphics such as adverts that go across the page
  • navigation icons or social media links
  • anything that acts as a horizontal line across the entire width of the content area can act as a scroll block.

The optimal length for a page really depends upon your intended audience and the type of material that you are presenting. A useful guide might be, if your page requires more than two A4 pages when sent to a printer it is probably getting too long. This page that you are reading now is probably at the limit of acceptable length - but you are near the end!

Using images to support your text

Pages that only contain textual content can be hard to comprehend, particularly for people with poor reading skills, or whose first language is not English. Wherever possible you should make use of the potential for the web to include supporting images. We shall look at how to do this in lesson 7, but for now, whilst you are composing your content, you should also be thinking about what images you might be able to use to make it easier for sighted users to understand your content.

Presenting large or complex information

Sometimes you will want to supply information in more detail than the above guidelines allow. For example you may want to present a long report, a brochure or a technical manual. These sorts of document may not be easy to read or understand using a computer screen. The solution could be to provide a printable version as a separate file in a non-html format such as PDF so that the visitor can download and read at leisure. You should still provide a summary of the document in HTML as part of your web site so that visitors can decide if they want to download the full document. More information on creating and providing PDF files etc. are given in a later lesson, for the moment you should concentrate on letting your visitor know that the information contained in the document exists and is available.

HTML elements used to support your content

HTML/XHTML code provides a number of elements which can be used to make your content more accessible. They will have no visual effect upon your page but will particularly help screen readers and other assistive software to understand your content.

Language

The world-wide-web is a global medium and not everyone uses the English language. To let screen readers and robots know which language your pages are written in it is necessary to specify the language by adding the lang attribute to the opening HTML element. For example <html lang="en">. It is important to add this language attribute to the opening <html> element for every page on your web site as screen readers use it to make sure that they pronounce the words correctly. Search engines, such as Google, also use it to help them catalogue your site correctly.

If you use a different language within a page (for example include a phrase in French) you need to specify that you are doing so by using the lang attribute where this happens, with the relevant language value. For example <p lang=”fr”>Au revoir mes enfants</p>.

For individual words or phrases you will need to use the <span> element, but you can add the lang attribute to most block items such as paragraphs <p>, Lists <ul> and headings (h1 - h6) if the whole block is in a different language to the main language used on your site.

Abbreviations and Acronyms

It is good practice to always expand or explain an abbreviation the first time it appears on a page. For example we might say “Standards are set by the World-Wide-Web Consortium (W3C)” and then later in the text we need only refer to the “W3C” and expect our readers to understand that we mean the consortium. However there may be a reason why you are not able to do this, or you may think that the majority of your readers will understand the abbreviated form without the need to expand it. In these circumstances it is possible to use the <abbr> element to hide the full title from visual users unless they want to see it by focusing on the abbreviation. For example the code <abbr title="world wide web consortium">W3C</abbr> would only display "W3C" on the screen (some browsers may also display a dotted underline). A user can hover the mouse cursor over the abbreviation (W3C) to see the full name. Unfortunately this solution is not fully compatible with all screen readers and is difficult for keyboard users to manage (i.e. those without a mouse) so it is best to only use it if it really is impossible to provide the full title or name of the organisation in the body of the text.

Acronyms such as “NATO” or “scuba” are abbreviations that are pronounceable. These can be treated in the same way as abbreviations but using the <acronym> element instead. There is a much stronger case for using the acronym element as it is less likely that you would want to write the full title in your text. The code example here would be as follows,
<acronym title="self-contained underwater breathing apparatus ">scuba</acronym>.

The use of these two elements does help people with learning disabilities and those who have English as a second language. However people who use the keyboard with a standard browser such as Internet Explorer can have problems accessing the title attribute, so if the full name is important to your content it must still be presented as text the first time you use the abbreviation or acronym.

Quote, Cite and Blockquote

These three elements (<q>, <cite> & <blockquote>) are primarily for research purposes (they enable academics to find out how often a piece of research has been referred to, or how often a professor has been quoted within academic circles). These elements should not be used for creating a style such as putting speech marks around a piece of text. (in fact Internet explorer doesn’t do this properly anyway). If you are not running an academic research website then please do not use these elements. If you are running an academic website then these elements allow you to make sure that the proper credit is given to researchers and authors.

Punctuation and Grammar

The way that you use punctuation can have real benefit to people who use screen readers. For example, if you forget to finish a sentence with a full stop a screen reader will just keep reading the text of the next sentence as if it was a all one continuous sentence. Sighted users might guess that a new sentence has started by seeing the capital letter at the start of the new sentence, blind users do not get these visual clues.

Using brackets (parenthesis) can disrupt the flow of a screen reader because it reads out the bracket as "left parenthesis" text "right parenthasis". For this reason it is usually better to use a comma instead of brackets. Another annoying punctuation is the use of the vertical bar " | " or diagonal slash " / " to separate words and phrases. These may look "neat" on the page, but screen readers pronounce them as "bar" and "slash" without pausing. This can make your text meaningless at best, or rude at worst !

It is very tempting, in our hurry to get published, to forget the importance of accurate spelling and grammar. This is a big mistake as it reflects badly on your personal competence and makes your content harder for assistive software to understand and present properly to disabled visitors.


Organising page content for accessibility

Content organisation

Most web pages contain a number of elements

  1. The main content – the message that you want to deliver or a form that you want visitors to complete.
  2. Navigation links to pages relevant to the content of this page
  3. Navigation links to the other main parts of the web site (including a link to a site map)
  4. Advertisements or promotional material
  5. Company contact details

In an ideal world the above sequence is the order in which you might wish your visitors to read the page. For visual users this is quite easy to achieve as you can use colours and formatting to guide the eyes to the parts of the page you consider important. However, blind people, users of text-only browsers, and search robots do not have this luxury. Their software has to follow the text in the HTML code as it is written for the page. For this reason it is important that you actually write the HTML page in the order in which you want people to read it.

Most web authoring software allows you to create blocks of text and just pop them anywhere you wish on the page for visual display. Unfortunately the code generated by these programmes does not always follow the order in which you wish assistive technology such as screen readers to read the page. It is therefore very important that you check that the actual textual content of each page is presented in a logical fashion by previewing the page in a text-only browser (text-only browsers, such as Lynx, are explained in lesson 12). Infuture tutorials  we will learn how to rearrange your content visually for sighted users. For this lesson (and lesson 3) we shall concentrate solely on the way that your content is delivered as text in an HTML document.

Poor arrangement of the page content does not only affect blind users. Mobile phone users and people using text-only browsers would also have to scroll through the long list of clients before getting to the main message of the page. As you will see in later lessons it is quite easy to write your page content in a logical order and then use a style-sheet correctly to arrange the various page components for visual display.

One of the most common mistakes is to use the stylesheet (CSS) command to float a block of text to the right-hand side of the screen without thinking about the page reading sequence. In the diagram below we show a simple page layout that floats a list of clients to the right of the main content.

Banner and main navigation

Main body text

A lot more text all about us. All the useful information that you really want your visitors to read.

 

Our Clients

  • client 1
  • Client 2
  • client 3

Later on we shall look at using a table to acheive the above layout so that the reading sequence is more logical, but in this example where we have used the "float" css command many disabled users will see or hear the list of clients before they hear the main body text.

It is worth noting that the Google algorithm scores keywords higher if they are near the top of the page. In the example above Google would consider the list of clients to be more important than the message (About us). So it is not only blind people who benefit from the proper organisation of page content - everyone benefits because your pages will be catalogued correctly by search engines!

Section Summary

  1. Be clear about what your web site is supposed to do.
  2. Use language suitable to your target audience.
  3. Start with a simple introduction, then tell the story, then conclude.
  4. Break text up into manageable proportions and use a concise and positive style of writing.
  5. Check spelling and grammar carefully.
  6. If you include content in a different language specify the change.
  7. Provide the full title the first time you use an abbreviation.
  8. Structure your HTML/XHTML content in the order you wish the user to read it.
  9. Remember that the textual content is the foundation of the web site. No matter how good the visual display, if the textual message is confusing or meaningless the site will not perform.