Library Subject Guides
This page looks at the accessibility principles to apply when designing web content.
If you need you need to make changes to content hosted on the university website, please check this page on Updating and creating content on the university website and the Wiki guidance on accessibility in the Web CMS. If you are creating content for a module hosted on the VLE, please check this guide for Accessible vle sites.
If you are creating a digital resource for the university, you have legal obligations to meet certain accessibility regulations. The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 came into force in September 2018. Both internal and external official university output is covered by these regulations, so you still need to meet these if designing internal staff resources, not just if creating public webpages. When creating university web resources you should meet the WCAG 2.2 AA accessibility standard AND include an accessibility statement to explain the accessibility of your website or mobile app. The government webpages provide more detail on the public sector accessibility regulations. For student work and personal projects, you don't need to meet these standards, although working to these regulations is good accessible practice.
What is an accessibility statement?
Accessibility Statements are designed to explain how accessible a piece of software, site or app is, outlining what you can and can't do with it. The statement should explain what features or accessibility issues you can expect and how to get help if you need it. If you are using Google Sites, we have created an accessibility statement template for you to amend and add to the footer of your site.
As in digital documents, using heading styles allows users to more easily navigate your site - and again you can use these as anchors to aid navigation within and between pages.
Just as when designing slides or a poster, think about having a clear and easily readable design - be aware that low contrast between text and background or text overlaid on images can be harder to read. Good use of colour can enhance your design and help clarify navigation, but avoid colour as the sole indicator of meaning.
Sans serif fonts are generally easier to read on screens, so are typically a better choice for online content. Make sure you have a large enough font size to be comfortably read as well. Try not to use too many different fonts across your site - this looks cluttered and can be confusing.
Think about navigation on websites - how many clicks to reach something? What titles have they used - would that make sense to an end user? How have you organised your content? Heavily nested menus and content is generally to be avoided, as it quickly becomes confusing.
If you are adding features in an existing platform or developing your own app, think about how someone can access features and navigate content without using a mouse. Having features that can only be accessed or interacted with by using a mouse will exclude some end users.
What good is having a Site if not everyone can access it?
Accessibility on your Google Site is crucial for ensuring a smooth experience for all of your audience. Embracing universal design principles means creating content accessible to everyone, regardless of abilities or disabilities. By incorporating accessibility, you not only adhere to ethical design practices but also broaden the reach and impact of your content.
Using heading styles in your text boxes is a fundamental step in enhancing the accessibility of your site. These styles help organise and structure your content, making it easier for all users to navigate, including those who rely on screen readers. You can change your heading styles when editing text by clicking on the drop down box on the formatting toolbar:
Start with Heading 1 for main headings and use Heading 2, Heading 3, and so on for subheadings to create a clear hierarchy of information.
Adding alt text to your images is a critical accessibility feature. Alt text provides a brief, descriptive text that conveys the content and purpose of an image. This text is read aloud by screen readers, making visual content accessible to users who cannot see it. To add alt text to an image, click on your image, then the three dot menu, and select alt text. Then, simply provide a meaningful but concise description for your image. This practice ensures that everyone can understand and appreciate the visual elements on your site. Captions can be added in the same way, but are different to alt text. Instead of being hidden away in the background within the code of your Site, Captions are displayed to everyone. This is important if you need to reference images or data, or if you need to provide further context to an image beyond its visuals. You can find more guidance from us on how to add alt text and good practice when doing so in our Alt Text Guide.
Maintaining proper colour contrast is essential to ensure that your site is accessible to individuals with visual impairments. Inadequate contrast levels between your text and background colours can pose significant challenges to many. You can use tools like WhoCanUse to check your site's colours for accessibility. This tool helps you identify colour combinations that might be difficult for some users to distinguish by assigning scores to different font & background colour combinations. For true accuracy, you can get the hex code of the exact colours you are using from the themes tab on your Site by clicking on your theme, and then the paint icon 
in the colour palette selection. You can then copy this into WhoCanUse, test your colours, and then copy out the hex codes back into Sites when you find that perfect combination that works for everyone!
Including captions on embedded videos is another crucial step for accessibility. Captions provide a textual representation of the audio content in videos, allowing individuals with hearing impairments to access the information. Most video hosting platforms, including YouTube, offer tools for adding captions. For more on how to add captions to videos, see the Subtitling section of our Video Editing Practical Guide.
Creating accessible hyperlinks is about providing clear and informative link text. Rather than using generic phrases like "click here" or "read more", use descriptive link text that conveys the purpose or destination of the link. This approach benefits users who rely on screen readers, as they can understand the link's context without having to read surrounding text or a gigantic URL! For instance, instead of "Click here for more information", you could use "Learn more about our research." This makes it much clearer what the link leads to rather than a vague promise of "information."
Whether you're writing code or creating other digital content and applications, you need to think about the users of your program. More importantly, you need to be aware that "users" are not all the same, and design with different needs in mind.
Universal design focuses on designing with everyone in mind from the start, trying to give as many people as possible a good experience with whatever you are creating. It is about using universal design principles to embed flexibility, usability, and reliability into anything digital you create, rather than seeing digital accessibiltiy as an 'extra' or something that must be done separately.
From the very start of your design process, you need to be thinking about what the goal of your project is, who it is aimed at, and how they will be using it. You need to get feedback from other people and make sure you take into account other people's experiences.
These slides are from our Universal design session, aimed at getting people to think about designing technological solutions from websites to apps to online forms with users in mind.
Here are a few tips to make your social media posts more accessible for other users: