Digital team
Get in touch if you are a digital content creator and need some additional support with writing for the web or publishing content to our content management system, Sitecore.
Leeds Beckett University - City Campus,
Woodhouse Lane,
LS1 3HE
Accessibility | Perceivable
Accessibility guidelines in action
This section of our accessibility guide will focus on how to make our content perceivable. This will ensure our users can recognise and use our website with the senses available to them.
Working with images
Images are inherently inaccessible to people who are unable to see them. To make sure all of our users can consume our visual content we must provide a text alternative.
Avoid images with text in them
As images are inaccessible to some users, they’re unable to consume any copy within your image. Flat images cannot be accessed by screen readers so this copy must be housed within the page itself. Avoid using images of text unless it is absolutely necessary, for example a logo or brand.
- Note: Search engines will crawl your content in much the same way as assistive technologies and key information won’t be picked up in a page crawl if it is within an image
Simple vs complex
For each image, determine which of the following categories best describes your image:
- My image conveys simple information (e.g. a photograph, icon or logo)
- My image conveys complex information (e.g. a chart or graph)
My image conveys simple information:
Images that convey simple information must be described with alternative text, or ‘alt tag’. An alt tag is a short description of the content of the image, added in a way that is typically invisible to people who can see the image, but is exposed to people who are using assistive technologies, such as screen readers or Braille displays. Browsers also display alt tags visibly if an image fails to load.
The description should convey the content of the image as concisely as possible to provide access to the content of the image without burdening users with unnecessary details.
Alt tag: Male student smiling and looking at the person behind him in a lecture theatre
My image conveys complex information
Complex images, such as graphs, charts or diagrams, can contain too much information to be effectively described using an alt tag. Instead, you must provide the user with a plain text alternative or long description.
A long description is a more detailed description that provides equivalent access to the information in the image.
- Question: What information is this image intended to communicate? That same information must be provided to people who are unable to see the image
- Question: Is a visual representation of your information necessary to communicate your content, or will the long description serve all audiences?
A long description can include any structure necessary to communicate the content of the image, including headings, lists and data tables. This must be accessible to all audiences.
Alt tag: "Bar chart showing academic senior managers by gender and ethnicity. See full description at https://www.leedsbeckett.ac.uk/****"
Titles, headers and page structure
Make it easy for users to source the information they need by presenting your content in digestible chunks. Breaking up content using meaningful headers makes it easy for users to scan a page to find the information they are looking for; this is particularly helpful for audiences with cognitive or learning disabilities.
Providing an informative title
Web pages and documents should have titles that describe their purpose or ‘promise’. This is helpful for all users, but is especially helpful for blind users, as the title is typically announced by screen readers as soon as a new web page is loaded in the web browser or a new document is loaded in the reading application.
Remember that users may land directly on our web pages and it will not always be clear what section of our site they are in. Page titles such as ‘Welcome’ or ‘Contact us’ may not be helpful without additional context.
Using meaningful headers
Just as page titles do, section headers should also describe their purpose or ‘promise’. Make sure to be clear to a user what to expect from that section as headers are also key indicators for those using a screen reader. Section headers such as ‘How to find us on campus’ or ‘Information about fees and funding’ are helpful here.
Structuring content using headings
Headings are ordered <h1> to <h6>. Use headings hierarchically, with the <h1> representing the most important idea on the page, and subsections organised with <h2> level headings. Those subsections can then be divided with <h3> level headings, and so on.
It is best to plan out a heading structure before composing a page. Doing this will help you both select appropriate heading levels and keep your content organised overall.
All pages should at least have a <h1> level heading giving the title of the page. We have built our web components to adopt the right kinds of headers in your web pages but you may want to think about which headers you use in other materials you are responsible for.
I am a h1 page title - i tell you what this page is about
I am a H2 header - i help to section off the page so you can easily find the information you need
I am a H3 sub header - I help you navigate within page sections
Note: Users will adopt an F-shaped pattern for reading web content and skim much of the content in your page. Whatever page it is and whatever the page is offering, the first few sentences are always the least skimmed. Make sure to be clear about your offer here.
Working with video and audio
Video captions and transcripts
Users with hearing impairments will need to have an alternative way of consuming video content so we must provide captions and transcripts if possible.
YouTube will automatically add captions to videos but you must review these for accuracy as they are not always perfect.
You can find more information on how to edit / remove captions on YouTube.
Audio transcripts
If you are using audio content such as podcasts to communicate information, it is essential that you provide a transcript of your recording for users who are unable to hear.
colour and contrast
Some users have difficulty perceiving text if there is too little contrast between foreground and background. To make our content perceivable for all audiences, specific contrast ratios must be met.
Our website has an embedded design system which has been tested to meet these requirements. Please do not use alternative colour in text or images on the website without authorisation from our university’s digital or creative team.
The importance of colour contrast applies across all of our digital and printed collateral so you will need to apply this in your content. You may find the WebAIM online colour and contrast checker helpful.
