Creating effective and accessible content

People come to a website for its content, either because they have a specific information need, seek entertainment or want to buy something. In the case of a University website, they are most likely to look for information that answers a question (eg What is it like to study in Bristol?) or helps them complete a task (eg I want to visit the University.). They expect this information to be easy to find, to access and to understand, as well as being accurate, up-to-date and credible.

This webpage offers you advice on how to achieve this by focusing on good practice when writing web copy.

Writing effective web copy
Wepage structure: headings, lists
Links and navigation
Creating accessible Word and PDF files
Using images
Data tables
Text size, broken links, back-to-top and UoB access only includes

1. Writing effective web copy

Although the rules of good writing apply equally to the web as they do to print, screen reading differs from print reading in several ways:

print is static and rigid whereas the web is dynamic and flexible: websites can be accessed on many devices (eg laptop, smart phone, etc) and browsing software (blind people may use a screen reader), all with different sizes and resolutions.
web readers skim and scan rather than read in detail: they look at headings, sub-headings and hyperlinks, they look for keywords, they jump around and scroll up and down.
web readers are constantly on the move: they are impatient, intolerant and critical and if they don't see something that grabs their attention within seconds they will look elsewhere.

In a nutshell, effective web writing:

is like a conversation - think as if you were talking to the reader, rather than writing.
answers people's questions (don't just rely on a Frequently Asked Questions section to do this)
lets people 'grab and go' - people rarely want to read everything on a website, they want to grab what they need and move on.

How?

Stop and think. Plan what you are going to write:

What is your key message? What are you trying to achieve?
What is its purpose/goal?
Eg to inform, to promote, to educate, to persuade, to inspire, etc.
Who is the target audience(s)?
Think of them in terms of age, language ability, level of education, level of expertise on the topic, etc.
Why are they coming to the website? What information are they looking for or do they need from the webpage?
Tip: Try to think as a member of your target audience and list the questions they need answers to. Write these questions as headings and under each make a note of the points that need to be covered.

Now write:

Once you have clear answers to the questions above, you are ready to write. But before you start, read the following guidelines

Cut the fluff: write for your target audience not for yourself (or anyone else who is not your target reader). As a general rule, web content should have half the word count of its paper equivalent.
Use clear and simple language:
- Adopt a conversational style (address your reader as you and refer to your organisation as we).
- Avoid complex sentence structures: ie have one idea per sentence.
- Write in the active form (most of the time): eg We did the research so that... instead of The research was done by us so that...
- Avoid slang or jargon.
- Use simple words where possible (eg end rather than terminate, because rather than in view of the fact, etc).
Have only one idea per paragraph.
Start both webpages and paragraphs with the conclusion, followed by explanations and details.
Use lists whenever possible (bullet lists when order is irrelevant and numbered lists when it is).
Divide your webpage into sections of a few paragraphs, introduced by clear headings and sub-headings.
Embolden key words and concepts (don't overuse this technique as it can lose its impact).
Systematically check the spelling and grammar of your webpages (ask someone to proofread them), and ensure they conform to the University house style guide.

Further information and resources:

Staff development run a workshop, 'writing for the web' which offers a lot of practical advice to website publishers.

(Back to top)

2. Webpage structure: headings and lists

The structural markup of your webpages (eg headings, paragraphs, lists etc.) contains very important information about content hierarchy. This information is used by assistive technologies (eg screen readers) to navigate through pages more effectively (for example, by skipping between sub-headings). If a page is not marked up correctly (for example, by using <p><strong>Heading text</strong></p> as a header instead of, for example, <h1>Heading text</h1>) this ability is lost.

There are six levels of headings in HTML, level 1 (<h1>) being the most important to level 6 (<h6>) and two types of lists: unordered (ie bullet) and ordered (ie numbered). Level 5 and 6 are rarely used.

How?

Headings:

Please note: if you are using the templates, the <h1> will be generated automatically upon completion of the title field.

Use headings for their intended purpose (ie as headings and not to emphasise a block of text).
Use them in their logical order (ie start with <h1> followed by <h2> followed by <h3>, etc).
Use <h1> as the main page heading and use it only once per page.
Use <h2>s, to introduce each main section on the page, and if necessary <h3>s to divide each main section, etc.
Make headings as descriptive of the section they introduce as possible, using keywords: eg Activity tips for parents.
Leave out as many prepositions and adjectives as you can.
Start with a verb when writing actionable content: eg Stay healthy or Staying healthy.
When appropriate use questions: eg What kind of activity is good for my heart?

Lists:

Do not put in your own numbers or bullets with a line break at the end of the line.
Use bullet (unordered) lists (<ul>) when list items have no particular order.
Use numbered (ordered) lists (<ol>) when the order of list items matters (eg steps in a process; instructions, etc)
Use lists as table of contents for long webpages, and link each list item to its corresponding heading.

Further information and resources

(Back to top)

3. Links and navigation

A clear and consistent style of presentation on each webpage allows users to locate navigation mechanisms (eg navigation bars, content lists, site maps, etc) more easily. Link text that is ambiguous, unclear or meaningless when taken out of context can be frustrating for anyone, especially blind people using a screen reader, and people with learning and reading difficulties.

How?

Make links meaningful:

Making link text as meaningful and descriptive of its target as possible is one of the most important things you can do to make your webpages more usable and accessible.

For this reason, do not use meaningless expressions or words like click here, read more, this, etc which don't say anything about the link target.
For example compare: To find out more about our products and services, click here and Find out more about our products and services.
In fact 'click here' is never necessary.
Compare What makes a good business plan? and Click here for information on writing a business plan.
For the same reason, make sure link text is unambiguous. For example does a link labelled Staff mean 'Information for staff' or 'information about staff? Clarify either by being more specific (eg Staff intranet or Meet the staff)
Do not embed too many links in a block of text, instead put the links in a bullet list at the end of the section.
Match link text to its target webpage title. For example:

Link text	Healthy lunchboxes for kids
Matching target webpage title	Top tips for healthy lunchboxes for kids
Non-matching target webpage title	What to put in your children's lunchboxes?

Absolute and root-relative links

There are two types of links: absolute and root-relative. The difference is the path used in the link. Absolute paths should only be used when linking to a webpage that is outside of the bristol.ac.uk domain, eg http://www.phy.bris.ac.uk or http://www.mrc.ac.uk.

A root-relative link should always be used when linking to bristol.ac.uk page, eg /accommodation/ or /maps/. Remember you must include the intial / so the web browser understands to search within the bristol.ac.uk domain. Specific filenames should be included (eg /study/mature/careers.html), with the exception of index.html to which the browser will default.

Links to non-HTML files

Specifying the file format and size as part of links to non-HTML pages (eg PDF, Word, PowerPoint, etc) improves accessibility and usability. When people see a link on a website, they expect it to be to another web page, therefore you should indicate when this is not the case. It also enables them to see what software they need to view the file and how big it is.

When creating links to PDF, Word, etc documents, make the document title followed by the format and size in brackets the link:
eg Undergraduate student handbook 2007-08 (PDF, 55kB)
If you provide documents in different formats (eg PDF and Word), then repeat the link for each format using a bullet list. For example:
- Undergraduate student handbook 2007-08 (PDF, 55kB)
- Undergraduate student handbook 2007-08 (Word, 75kB)

When a page contains links to PDF documents, you must include a link to the Adobe Acrobat Reader download. Use the following code:

Rendered include	Note: some of the documents on this webpage are in PDF format. In order to view a PDF you will need Adobe Acrobat Reader
Coding for CMS template	<include url="/includes/adobe.html" />
Coding for Zope template	<p class="adobe-reader"> <strong>Note:</strong> some of the documents on this webpage are in PDF format. In order to view a PDF you will need <a href="http://www.adobe.com/products/acrobat/readstep2.html">Adobe Acrobat Reader <img src="/images/getacro.gif" border="0" alt="Get Acrobat Reader" /></a> </p>

Email links

Email links should be formatted with the full email address used as the link text: ie firstname.surname@bristol.ac.uk

This ensures that if users do not have their email software configured with their browser, they have the opportunity to cut and paste the address into another package. Also, when a page is printed, the email address will appear in full. Please note that house style is for the email address to be in lowercase.

Miscellaneous

Do not force links to open in a new window as this can be confusing for some users (particularly the visually impaired).
Remove all links to webpages that are incomplete (ie under construction) as this looks unprofessional and can be frustrating for visitors to your website.
Finally, always test that the links on your website actually work: broken links look bad.

Further information

Beware of opening links in new window (Webcredible) - 5 reasons for not forcing links to open in a new window

(Back to top)

4. Creating accessible Word and PDF files

It's no longer just web pages that should be structured correctly for accessibility. The same standards should be applied to Word and PDF files, as many users read these documents electronically. Please see the further information section below for details.

Further information

Creating accessible Word documents - Microsoft's advice for creating accessible Word documents
The four levels of PDF accessibility - Outlines the four broad levels of PDF accessibility
Adobe Acrobat X accessibility - Adobe's guidelines for creating accessible PDF documents
Creating Accessible PDF from Microsoft Word

(Back to top)

5. Using images

Attractive and appropriate images enhance the visual appeal of webpages. However they can be problematic for users who, for one reason or another, cannot see them, and also because computers and assistive technology (eg screen readers) cannot analyse the content of images and determine what they represent. Therefore providing appropriate alternative text for images is essential for three reasons:

It can be read by screen readers, making the content and function of images accessible to blind users in particular.
It is displayed in place of images in browsers when the user has chosen to turn them off or in the case of non-graphical browsers.
It provides a semantic description to images that can be read by search engines.

Another important aspect of using images in webpages relates to file and pixel size. Images should be optimised to a suitable size for the web so that they are quick to download.

How?

Appropriate use of alternative text

All images on your website must have appropriate alternative text. Speech browsers or screen readers cannot 'see' the content of many file types (including images) found on the web, so alternative textual information is required.

Alternative text is inserted through the alt image attribute: eg <img src="image.jpg" alt="image description" />

The choice of appropriate alternative text depends on purpose, context and function:
- In the case of decorative images (ie images whose sole purpose is to add visual interest, but which do not present important information), the alt text should be left empty (ie alt=""). Examples of such images include 'smiling faces', pictures of hand shakes, etc.
- In the case of informative images (ie images that add useful information to the content of the page), then alt text should provide a succinct and accurate textual equivalent. If the image happens to contain text, then the alt text should repeat exactly the same text.
- In the case of a functional image (eg an image that is used as a link), the alternative text must also convey this function. For example if you use an image of Professor X to link to her personal blog, the alternative text should be 'Professor X's personal blog'
Do not use redundant phrases like 'Image of...' or 'Link to...' as part of the alt text.

Complex images

A complex image is an image that carries a lot of information that cannot be summarised using only the alt attribute, such as a graph or chart. Such images require a longer description which can be provided using one of four methods, as explained in WebAIM's article on creating long descriptions for complex images.

Optimising images for the web

Optimising an image just means resizing it to reduce its file size and pixel dimensions to a suitable format for the web without loss of visual quality. This will ensure that your pages load faster.

As a rule of thumb, try to keep the size of images under 50 Kilobytes (kB) with a maximum width of 600 pixels.
Always resize images to the pixel dimensions you want them to be on the page; do not resize them using the width and height attributes of the HTML <img> tag.
Always include the width and height in the <img> tag; if left out, the browser does not know how much space to keep for images and cannot load the text until the image is loaded entirely.
You can use a desktop image editor (eg Serif PhotoPlus, Adobe Photoshop), or an online one like Web Photo Resizer, which is free, quick and easy to use.

Sourcing images for your website

Before using an image on your website, you must ensure that you are not falling foul of copyright law. For this reason you should not just use any image that you find on the web without first checking that you are permitted to do so. It may be difficult to obtain permission to use an image by contacting the owner directly, but there are other ways you can obtain images for free or at relatively low cost:

Ask around you, your colleagues may have some suitable images that they have taken themselves (however make sure they are of a high compositional and technical quality).
We keep an archive of images related to University life which you can use. Contact us to make an appointment.
Use images that are covered by a Creative Commons licence (see Creative Commons Search)
Buy royalty free stock images from iStockphoto. These are relatively cheap and of good quality (for under £14 you can buy 12 credits, allowing you to purchase as many extra small images that are big enough for the web).

Further information

Appropriate use of alternative text (from WebAIM)
Guidelines on Copyright and Digital Images (from JISC Digital Media)

(Back to top)

6. Data tables

Until recently there were two basic uses of tables on the web: for webpage layout and for presenting tabular data. However using tables for webpage layout is nowadays strongly discouraged because it goes against the principle of separating structured content from its presentation, which is achieved through the use of Cascading Style Sheets (CSS). Also, a website using tables for layout can present accessibility problems for screen reader users and may be difficult to use for users of mobile devices.

Therefore the main use of tables is to present lists of items consisting of several categories of data in a grid or matrix, for example a list of contact names and telephone numbers, a list of services with different prices or a list of lectures with title, date, time, location, etc. Data tables are great for presenting sometimes complex information in a visually clear and concise way.

However data tables can also present particular accessibility issues to blind screen reader users if they are not coded properly.

For example, let's say you go to a webpage containing the following table and you want to find out about the options available for hiring a room for 40 people for an afternoon meeting.

Precinct faculty room hire
Room	Capacity	Full day	Half day	Evening
Avon	30	£76	£54	£98
Trym	50	£98	£66	£126
Frome	100	£137	£88	£148
Severn	200	£253	£159	£220

As a visually enabled person, it is easy to work out that Trym would be a good option and that it will cost you £66. However, if this table was not marked up for accessibility, this is what a screen reader user would hear:

Table with 5 columns and 5 rows. Room, Maximum room capacity, Full day, Half day, Evening, Avon, 30, £76, £54, £98, Trym, 50, £98, £66, £126, Frome, 100, £137, £88, £148, Severn, 200, £253, £159, £220.

This is potentially confusing as users could easily mix up the different prices; and it gets more confusing the more complex the table (imagine a table with more rows and columns, and containing numeric data). However if the table was marked up for accessibility screen readers would hear something like:

Table with 5 columns and 5 rows.
Summary: table showing prices for hiring precinct faculty rooms, including costs for full, half-day and evening board.
Caption: Precinct faculty room hire
Header row: column 1 header: Room, column 2 header: Capacity, column 3 header: Full day, column 4 header: Half day, column 5 header: Evening.
Data row 1: Room: Avon, Capacity: 30, Full day: £76, Half day: £54, Evening: £98
Data row 2: Trym, etc.

As you can see when the table is marked up properly, each piece of data is clearly associated with the corresponding column header, which makes its meaning much easier to identify. In addition when a summary and caption are provided, the screen reader will read this information first, so the user gets an idea of the type of information that is coming.

How?

Keep tables as simple as possible:
- Avoid more than one or two levels of column and/or row headers.
- Avoid spanned rows or columns.
- Do not combine two or more tables into one, keep them separate.
Identify row and column headers using the <th> element.
Associate the data cells (<td>) with the corresponding headers in one of the following ways:
- For simple tables (ie containing one header row or column), using the scope attribute.
- For complex tables (ie containing two or more header rows or columns, and/or spanned rows or columns ), using the id attribute in the <th> tags and the headers attribute in the <td> tags.
Provide a table caption using the <caption> element.
Indicate the purpose of the table, using the summary attribute in the <table> tag to
Use relative units (eg %) rather than fixed units (eg pixels) to set the width of tables and columns.
Optionally, for tables with many rows of data, group the rows using:
- the <thead> tag to group the header row(s),
- the <tbody> tag for the data rows
- and, if applicable, the <tfoot> tag for the footer row(s).

Accessible markup for the above table would look like (accessibility elements are in bold):

<table summary="Table showing prices for hiring precinct faculty rooms, including costs for full, half-day and evening board" class="data-table">
<caption>Precinct faculty room hire</caption>
    <thead>
        <tr>
            <th scope="col">Room</th>
            <th scope="col">Capacity</th>
            <th scope="col">Full day</th>
            <th scope="col">Half day</th>
            <th scope="col">Evening</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Avon</td>
            <td align="center">30</td>
            <td align="right">£76</td>
            <td align="right">£54</td>
            <td align="right">£98</td>
        </tr>
        <tr>
            <td>Trym</td>
            <td align="center">50</td>
            <td align="right">£98</td>
            <td align="right">£66</td>
            <td align="right">£126</td>
        </tr>
etc
    </tbody>
</table>

Further information

Creating Accessible Tables - Data Tables (WebAim)
Accessible tables (JimThatcher.com)
Providing a summary for tables (Mark Pilgrim - Dive into accessibility)

(Back to top)

7. Text size, broken links, back-to-top and UoB access only includes

To ensure consistency across the University website, the default text size of the templates' content area is set at 100%. This should not be changed. Exceptions can be made for homepages and highlighted information (often in boxes), but generally main body text should be left at 100% of the user's default text size. By keeping the text size at 100%, users are not suddenly faced with webpages where the text is smaller which can often force them to adjust the text size within their browser. If users aren't aware that they have this option within their web browser, they may just move away from your website.

Broken links

Have you tested all the links on your website? Remember to check the top and left-hand navigation bars, the main content area and the footer. University template users will also have to check global as well as departmental navigation bars. If you have a link to a webpage that is under construction, it is better to remove the link temporarily until the page is finished.

Linking to restricted-access webpages and files

Have you clearly marked any links to webpages that are only accessible to UoB staff (ie contained within an intranet folder)? To do this using the house style, use the following code:

Rendered include	(UoB access only)
Coding for CMS template	<include url="/includes/uobaccessonly.html" />
Coding for Zope template	<span class="uobaccess">(UoB access only)</span>

Breaking up long pages

Insert 'Back to top' links to break up long webpages of text. To do this, insert the following code:

Rendered include	(Back to top)
Coding for CMS template	<include url="/includes/backtotop.html" />
Coding for Zope template	<p class="screen"><a href="#top" class="btop">(Back to top)</a></p>

There is no need to add a target link at the top of your webpage (the template already contains one).

(Back to top)

Web guide

Web news

Creating effective and accessible content

1. Writing effective web copy

How?

Stop and think. Plan what you are going to write:

Now write:

Further information and resources:

2. Webpage structure: headings and lists

How?

Headings:

Lists:

Further information and resources

3. Links and navigation

How?

Make links meaningful:

Absolute and root-relative links

Links to non-HTML files

Email links

Miscellaneous

Further information

4. Creating accessible Word and PDF files

Further information

5. Using images

How?

Appropriate use of alternative text

Complex images

Optimising images for the web

Sourcing images for your website

Further information

6. Data tables

How?

Further information

7. Text size, broken links, back-to-top and UoB access only includes

Text size

Broken links

Linking to restricted-access webpages and files

Breaking up long pages