By law, the University needs to ensure our website is accessible to all visitors. Much of this is done by web developers behind the scenes. However, there are still several key things you need to remember when writing content to make it accessible.
Note: we’ve added the headings used in brackets at the end of the title. This will help visualise how titles should be used in page structure.
Jump to:
Creating an accessible page structure (h2)
Headings communicate the organisation of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
A page must have a proper heading structure. Headings must not be duplicated and should only be used to provide a logical structure.
Headings that are clear and descriptive help users find information on a page quickly. Headings that are inappropriately used for appearance or are duplicated will have the opposite effect and can make navigating a page difficult for users.
Things to note: (h3)
- heading styles (h1,h2,h3 etc.) should not be used for aesthetic reasons
- bold font should not be used as a heading
Example heading structure (h3)
Below is an example heading structure for a page about family pets. This allows the user to easily navigate a page and understand how each section relates to the document as a whole.
Family pets (heading 1)
Dogs (heading 2)
Types of dogs (heading 3)
Labradors (heading 4)
Springer spaniel (heading 4)
Jack Russell (heading 4)
Cats (heading 2)
Types of cats (heading 3)
British shorthair (heading 4)
Bengal (heading 4)
Moggie (heading 4)
Using accessible hyperlinks (h2)
Link should be informative out of context.
Screen readers have the option of listing all navigation links for the user. This list will only contain the link itself therefore the link must inform the user the purpose of the link without requiring the surrounding text to provide context.
This should be tested by manually checking each link to see if the link make sense without the surrounding text.
Examples: (h3)
Correct: Search for an undergraduate course
Incorrect: To search for an undergraduate course click here
Accessible images (h2)
Images are not accessible to every visitor to a webpage. They often contain information that’s critical to understanding the content on the page. Therefore, it’s important that images are used correctly and appropriate text alternatives are used.
Alternative text (h3)
In almost every case, an image should use an alt text. In T4 this is the description field within the media library. Alt text should be a short description of the images, which can be read aloud by screen readers and other software.
Things to note: (h4)
- if images are purely for decoration, there is no need to add alt text. This allows the screen reader to bypass the image streamlining the journey for the user
- do not use terms such as “image of” or “photo of” in the alt text
- alt text should be short and to the point, describing an image, for example:
- “students carrying out a lab experiment”
- “exterior of Strathclyde Sport”
- avoid using text in images, where possible
- if this is not possible, include the text on the image within the alt text
Use of italics (h2)
Use italic text sparingly and avoid having chunks of text in italics as this is often hard to read.