Formatting content

Headers

Headers are an important part of how you structure a web page. They are used by screen readers to help people with visual impairments navigate around a web page. If they are set up correctly they can help users jump to different sections. Headers should always be used in a descending order of header 1, header 2, header 3. 

The Header 1 is taken care of by header field on all our pages so the first header you should ever insert when editing is a header 2. Think of header 2 as starting a new section within the page and header 3's as subsections within them. For example;

Animals found on a farm

This section is about animals you might find on a farm.

Cows

This subsection is about cows. Some more content about cows...

Sheep

This subsection is about sheep. More content about sheep...

Crops found on a farm

This section is about crops that are found on farms.

Potatoes

This section is about potatoes. More content about potatoes...

Corn

This section is about corn. More content about corn...

 

In the above example the header 2's are used to emphasise new sections about animals and crops found on a farm. Header 3's are then used to create sub sections of 'Cows' and 'Sheep' in Animals and 'Potatoes' and Corn' in Crops.

Links

Links form the backbone of the web allowing you to send users to different places. It is important that we make it clear where a link is going to take a user or the behaviour of the browser once the link has been clicked. 

Phrasing

When creating a link you should make sure that the link phrase the user clicks on is descriptive. It helps if the user knows where they're being taken too! Ideally you should use the title of the destination page or document.

Link phrases such 'click here', 'here' and 'more information' are banned and you will be asked to change them! When you take the link out of the content of the page a phrase like 'click here' doesn't mean anything.  People with visual impairments that use screen readers will often tab through a list of links. A list of 10 'click here' links that all go to different places isn't very usable.

Do not use the website address as the link phrase. This isn't very user friendly especially if the link is being read out aloud by assistive technology. A link phrase of Council Financial Report 2019/20 is much more readable than https://www.councilwebsite/council/finance/reports/18787236576123.html.

External Links

Links to external websites should be marked with a postfix of [external link].  This lets the user know that they are going to be taken to a page not on our website.  External links should open in a new tab.

Document Links

Links to documents should have a postfix that includes the type of document that is being opened.  This lets the user know if they need to have a particular piece of software on their their device to open it.  

If the document is over 1mb in size you should add the file size.  Most of our site visits are by a mobile device so you need to let users know if the download is going to use a lot of their mobile data.  Form document link examples;

  • Park Cleaning Policy 2019 [PDF]
  • Transport Masterplan [Word Doc]
  • Medium Term Financial Plan [PDF, 2mb] 

Links to online forms and systems

Links to forms and online services should be styled as buttons so that they standout.  More information about this is cover in the buttons section further down this page.

Tables

Tables should only be used to present information, they should never be used to layout a page.  That's what the grid editor is for! Tables are a great way to present related data but they need a little bit of configuration so that they are accessible.

All tables should have headers as they allow users to see the flow of the data. Typically this is top to bottom or left to right.  To apply headers you don't just add bold to the text in the cell.  You need to change it from a data cell to a header cell.  This will also embolden the text.  To complete the header cell you need to set the scope.  The scope helps assistive technologies understand which way a table should be read.  If the header is at the top of the table the scope should be set to 'column' to show this is a column header.  If the header is in the left most column and the data should be read across the scope should be set to row.

Table example
Header col Header col
data data
data data

 

Header examples
Header row data data
Header row data data

Documents

Where possible content should be presented on a web page as it makes the content easier to find. Ideally documents should be supporting material, never a form. All new forms from October 2019 should be eforms. 

All documents that are now uploaded to this website need to be accessible.  To check for accessibility click on the review tab in Office and the the 'Check for accessibility' button. Any errors that are flagged will need to be fixed before the document is either uploaded or converted to PDF to be uploaded. The web team will not fix accessibility issues within documents. It is the responsibility of the author to make sure their documents are in an accessible format. 

Images

Images should not be used to display information.  If an image has information such as opening times in it, that information must also be available on the web page as html.

  • Alt text should be added to all images or where the image is used purely for decoration a blank alt tag should be used.
  • Add the responsive class to large images to make them fit smaller screens by clicking on the image > formats > images > Responsive

Buttons

Buttons should be used as a call to action. For instance to load a form or log into a service.  There are several button colours that are based on the Bootstrap[external link] framework.   

Primary

Default

Warning

Danger

Success

Info

As well as changing button colours you can also change the size by selecting 'large' or 'block' once a colour has been selected.

Contact Details

There are 3 types of contact details on this website, phone, email and postal.

  • Email addresses should be listed in full, for example [email protected]
  • Phone numbers should include the area code but do not put it in brackets.  01325 123456.
  • Postal address should list each part of the address on a new line. For example;

    Customer Services
    Town Hall
    Feethams
    Darlington
    County Durham
    DL1 5QT