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.
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:
In a nutshell, effective web writing:
Once you have clear answers to the questions above, you are ready to write. But before you start, read the following guidelines
Staff development run a workshop, 'writing for the web' which offers a lot of practical advice to website publishers.
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.
Please note: if you are using the templates, the
<h1> will be generated automatically upon completion of the title field.
<h1>as the main page heading and use it only once per page.
<h2>s, to introduce each main section on the page, and if necessary
<h3>s to divide each main section, etc.
<ul>) when list items have no particular order.
<ol>) when the order of list items matters (eg steps in a process; instructions, etc)
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.
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.
|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?|
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.
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.
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>|
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.
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.
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:
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.
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" />
alttext should be left empty (ie
alt=""). Examples of such images include 'smiling faces', pictures of hand shakes, etc.
alttext should provide a succinct and accurate textual equivalent. If the image happens to contain text, then the
alttext should repeat exactly the same text.
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 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.
heightattributes of the HTML
<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.
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:
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.
|Room||Capacity||Full day||Half day||Evening|
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.
<td>) with the corresponding headers in one of the following ways:
idattribute in the
<th>tags and the
headersattribute in the
summaryattribute in the
<thead>tag to group the header row(s),
<tbody>tag for the data rows
<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>
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.
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.
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>|
Insert 'Back to top' links to break up long webpages of text. To do this, insert the following code:
|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).