Brand guidelines
Writing for the website
How to write and format content for the website.
As part of the public sector, our website has to meet specific accessibility requirements (gov.uk).
An important part of meeting this standard comes from the way we write and structure our content.
All content for the website should be in line with the main York St John University style guide. You should also follow the additional guidelines below.
If you have any questions about writing for the web please contact website@yorksj.ac.uk.
On this page:
Structuring your content
People do not read web content the same way they read offline. They are more likely to skim, skip forwards and backwards, and scan content.
We can help our users navigate the page quickly by using headings to organise the content. Text should be broken down into chunks around related themes and ordered to match the user's needs. Think about what the user of the specific page you are writing will be wanting to find out, and make sure this information is near the top of your page.
Further information on website headings:
Make your headings descriptive and clear. Headings (also known as subheadings) tell a user what content to expect if they keep reading. They should let your user know that they have found the content they are looking for.
Users will typically read just the first 11 characters of a heading before making a decision whether to continue reading.
Headings should:
- Describe the topics in the section
- Include key words at the start ('frontloading' the important information)
- Be a statement, not a question
- Be clear, concise and scannable
- Be written in sentence case, with only the first letter and proper nouns capitalised
Headings do not need closing punctuation such as full stops.
Examples
Do say:
- Moving in to your accommodation
- Careers support
- Access Wellbeing support
Do not say:
- When can I move in to my accommodation?
- Your career starts here...
- Register For a Session With a Wellbeing Advisor
Your headings need to be formatted properly as headings in the page structure. Making them bold, capitalised or using other ways of making the text stand out will not fulfil the same function.
Headings should be formatted as H1s, H2s, H3s and so on. This makes sure that assistive technologies can recognise the structure of a page.
The most important heading has the rank 1 (tagged as <h1> in the page html). The H1 is the title of the page and should be the only H1 heading on a page.
Below this you can structure your headings using ranks H2 to H6. Your main headings should be formatted as H2s. You can divide sections further by adding headings formatted as H3s.
Example
H1 - Open Days
H2 - How to book
H2 - What to expect on the day
H3 - Accommodation tours
H3 - Haxby Road tours
H2 - Contact us
Avoid skipping heading levels as this can be confusing for the user. An H2 should be followed by an H3, not an H4.
Adding links
Links are an important part of page navigation on the website.
Provide links at the point where they are useful to your readers on the page, not all at the bottom. Avoid links mid paragraph where possible. Finish your paragraph and add links at the end. This makes it easier for the user to read the paragraph without distractions.
Link text (the words that become the hyperlink) should indicate where a user will go or what information the user will find at the destination.
Further information on links:
Link text should be short, readable and descriptive.
It is a good idea to reference the destination Page Title within the link text. This helps confirm to users that the link has taken them to the correct location. Use the same capitalisation as on the page you are linking to.
If you are linking to a website's homepage you can refer to the website as a whole. For example if you were linking to https://ysjsu.com/ you could use 'Students' Union website' as the link text.
Avoid vague phrases such as 'click here'.
Examples
Do say:
- Read more about funding and scholarships.
Do not say:
- To find out about funding and scholarships click here.
- Find out about funding and scholarships on this page.
- Funding and scholarships are available. Find out more.
Avoid extra spaces or punctuation in your link.
Examples
Do say:
- Find out more on the Students' Union website.
Do not say:
- Find out more on the Students' Union website.
Avoid using https:// or www. at the start of website addresses.
Examples
Do say:
Do not say:
If you need to link to a document, let the user know the document name, file type and file size in the link text. If the link will start a file download then make this clear in the supporting text before the link.
This helps people who have limited bandwidth, data, or device storage. Remember that 40% of users access our website on mobile.
Examples
Do say:
- Download our booklet for more information: Accessibility Support Booklet (PDF, 0.6 MB)
Do not say:
- Download our booklet.
- Read our Accessibility Support Booklet.
- Read more guidance here.
Use shortened versions of links if you are writing them in print.
People reading links in print materials need to type the link into a browser to access the website. The shorter the link, the easier it is for people to type accurately.
Examples
Do say:
- yorksj.ac.uk/opendays
Do not say:
- https://www.yorksj.ac.uk/study/undergraduate/open-days/
Short links need to be set up by the website team before they can be used. If a short link does not already exist for your webpage, contact website@yorksj.ac.uk to ask the team to set one up for you.
Adding images
All images need to have alternative 'alt' text. This is a short written description of an image, which summarises the content of that image when it cannot be viewed for any reason.
Alt text also makes images accessible to visually impaired users who access webpages through screen readers, so it is important to provide an accurate description.
When you are writing alt text, think about the message you are trying to give to the user with the image.
Further information on writing alt text:
Alt text should:
- Be short. A few words are usually enough and some screen readers may cut off alt text after 125 characters.
Example: De Grey building - Be specific. Only include relevant information. When describing people, only include information on race, gender identity, age, disability, religion, sex, sexual orientation, socioeconomic status, religion or beliefs if it is relevant to the meaning of the image. In most cases it will not be needed.
Example: Student working in Library - Include text that is part of the image. Text information within an image will be lost unless it is included in the alt text.
Example: Student next to neon 'We are YSJ' sign - Provide brief context where helpful to describe the type of image. Sometimes explaining the mood or type of image can help someone understand its purpose better.
Example: Students laughing and smiling in the Students' Union.
