Digital Accessibility: Best Practices

Digital accessibility isn’t just a nice-to-have – it’s an essential part of a student organisations digital presence. Student organisation’s website, apps, and digital content should be accessible for everyone, including students with disabilities. Making small changes can make a huge difference in creating a welcoming and inclusive online space.

Digital accessibilityDisabilityMSLStudent institutionStudent organisation

Person in a wheelchair using a digitally accessible website.

Digital accessibility isn’t just a nice-to-have – it’s an essential part of a student organisations digital presence.

Student organisation’s website, apps, and digital content should be accessible for everyone, including students with disabilities. Making small changes can make a huge difference in creating a welcoming and inclusive online space.

In this guide we’ll explore digital accessibility and look at ways to help you avoid common accessibility pitfalls and make your digital experience enjoyable for all.

What is Digital Accessibility?

Digital accessibility means designing websites, apps, and digital services so that they can be used by everyone – regardless of their device, environment, or abilities. It ensures that all users can navigate and interact with your content without barriers. For example, a student who is using a screen reader to navigate your website needs clearly structured content with proper headings, alt text for images, and descriptive links (like “Explore volunteering opportunities” instead of just “Click here”). Without these, they might struggle to access key information – which could mean missing out on events, support, or even joining a society they’d love.

Just like how we install lifts for step-free access or offer braille versions of printed materials, we need to ensure our digital spaces are accessible.

Why is Digital Accessibility Important?

Making your digital platforms accessible isn’t just about ticking a box – it’s about inclusivity. By removing barriers, you’re helping all students engage with your organisation. In fact, almost 1 in 5 of UK students* have a disability – that’s a significant portion of your student population who could face digital exclusion if accessibility isn’t prioritised.

Beyond ensuring a positive experience for students with disabilities, designing your website with accessibility in mind improves useability for all, making it easier for everyone to interact with your content.

Digital Accessibility Policy Compliance

In lots of countries – including the UK – public organisations must make their websites and apps accessible by law. That means following certain rules (called the Web Content Accessibility Guidelines, or WCAG for short) and clearly explaining how accessible their site is.

Your student organisation might not have to follow these rules, but doing so makes your digital space easier for everyone to use – and shows you care about including all students.

Think of WCAG as the accessibility rulebook. Following it isn’t just best practice – it’s a sign that your organisation values every student.

The Benefits of Good Accessibility

Beyond making your site usable for people with disabilities, good accessibility benefits everyone. Here’s why:

Better user experience – Clearer navigation, readable text, and structured content help all users.
SEO boost – Search engines favour accessible websites.
Wider audience reach – More people can engage with your student organisation.
Stronger reputation – Shows your commitment to inclusivity and social responsibility.

Accessibility isn’t just the right thing to do – it’s also good for engagement, visibility, and your organisation’s brand.

Common Digital Accessibility Mistakes to Avoid and How to Fix Them

Not Using Alternative Text (Alt Text) for Images

Mistake: Images without alt text leaves screen reader users without context.

Solution: Always add meaningful alt text that describes the purpose or content of an image. If the image conveys important information, ensure the description is also available in text form. For example, if you’re promoting a volunteer fair with a poster image, your alt text could be “Volunteering Fair on 10^th October, 12-3pm in the SU Building. ” – this gives screen reader users all the same information as everyone else.

However, don’t use alt text for decorative images. If an image doesn’t add any useful information (e.g. purely stylistic graphics or background visuals), leave the alt attribute empty (alt=””). This helps avoid ‘audio clutter’ for screen reader users, who don’t want to hear unnecessary descriptions or repeated information.

You can use this decision tree from W3C ** to help decide whether an image needs alt text.

Two people adding alt text for an image to give screen reader users context.

Poor Colour Contrast

Mistake: Low-contrast text is hard to read.

Solution: Use a contrast checker*** to make sure your text is easy to read for everyone. According to the Web Content Accessibility Guidelines (WCAG – basically the international rules for accessible design), normal-sized text should have a contrast ratio of at least 4:5:1, and large text at least 3:1. This means there needs to be enough difference between your text colour and background colour. These are just guidelines based on algorithms and can sometimes get things wrong (white text on certain shades of blue, give a low score despite being very legible) so be sure to test with real people.

Also, avoid using colour alone to show meaning – like using just red and green to show right and wrong. Instead, back it up with icons, labels, or patterns.

For example:

Good contrast: Dark navy text on a white background.

Poor contrast: Light grey text on a pale-yellow background – tricky to read, especially for those with low vision.

Example of good and bad colour contrast.

Not Designing for Keyboard Navigation

Mistake: Websites that require a mouse exclude keyboard-only users, including those using assistive technologies.

Solution: Ensure all interactive elements (links, buttons, forms) are accessible via keyboard (using the Tap and Enter keys). Avoid keyboard traps where users get stuck and can’t navigate away.

A visually impaired user using a keyboard and mouse to navigate a website.

Ignoring Semantic HTML and ARIA Roles

Mistake: Using incorrect or missing HTML elements (like <div> or <span> for everything) makes it harder for screen readers and other assistive technologies to understand and navigate your content. This can be especially frustrating for users who rely on keyboard navigation or screen readers, as they miss out on important context – like which parts of the page are menus, buttons, or headings.

Solution: Use semantic HTML elements – these are HTML tags that have built-in meaning. For example, use <button> for actions, <nav> for your site’s main navigations, and <header> for the top section of your page. These help screen readers interpret the layout and functionality of your site properly.

When you’re building more complex components (like custom modals, accordions, or tabbed content), add ARIA roles and attributes (like role=”tab” or aria-expanded=”false”) to give screen readers extra context. This bridges the gap between your fancy design and a user’s assistive tech.

Not Providing Text Alternatives for Videos

Mistake: Lack of captions and transcripts excludes users who are deaf, hard of hearing, or in noisy environments.

Solution: Add captions, subtitles, and transcripts for videos. These don’t just support accessibility – they’re helpful for all users, like students who prefer to watch videos on mute or who process information better through text. Use tools like YouTube Studio, Vimeo, or Microsoft Stream, which offer automatic captioning you can edit for accuracy. Provide a separate transcript below the video or as a downloadable file – this helps screen reader users and improves SEO too.

Use accessible video players that support keyboard navigation and screen reader compatibility. For example, YouTube’s default player is a good start.

Using Complex Language

Mistake: Jargon, technical language, and long sentences make content difficult to understand.

Solution: Write in plain language with short sentences, clear headings, and bulleted lists. Define any technical terms and avoid acronyms without explanations. As with many of these tips, this is good practice for your general content.

While the utilisation of grandiloquent vocabulary may project intellectual sophistication, it frequently engenders obfuscation and inhibits comprehension. Conversely, the judicious employment of linguistic simplicity serves to optimise cognitive accessibility and facilitate effective transmission of information…

Or simply put, using big words might sound clever, but it often just confuses people. Keeping things simple, keeps things accessible for all.

Skipping or Misusing Headings

Mistake: Skipping heading levels or using them out of order disrupts page navigation for screen reader users.

Solution: Use headings logically and hierarchically.

<H1> for main titles – There should only be one on a page (this blog for example, Digital Accessibility: Best Practices is the H1)
<H2> for sections – (Common Digital Accessibility Mistakes to Avoid and How to Fix Them)
<H3> for subsections – (Skipping or Misusing Headings)

This helps users skim content easily as well as allowing screen readers to use the headings to jump directly to different sections of the page.

A person creating a website page to be inclusive.

Unclear or Missing Form Labels

Mistake: Forms without labels make it difficult for users relying on screen readers to understand what’s required.

Solution: Use descriptive labels with the <label> tag (in the HTML editor) to clearly identify form fields. This means actually adding the label in your website’s code – not just using placeholder text inside the box. Placeholders disappear as soon as someone starts typing, which can be confusing, especially for disabled people.

Inaccessible Pop-Ups and Dialog Boxes

Mistake: Pop-ups that trap users or lack an easy exit can be frustrating and disorienting.

Solution: Ensure pop-ups have a clear close button and can be dismissed using the “Esc” key.

Failing to Test for Accessibility

Mistake: Not testing for accessibility means potential barriers go unnoticed.

Solution: Regularly test using automated tools (like WebAIM’s WAVE or Google Lighthouse), manual testing (e.g., navigating via keyboard and screen readers), and real user feedback from individuals with disabilities.

What is Digital Accessibility Testing?

Digital accessibility testing involves checking your website or app for barriers that might prevent people with disabilities from using it. This can include:

Automated testing tools (like WAVE and Google Lighthouse).
Manual testing (navigating the site using only a keyboard or screen reader).
User testing with people who have disabilities.

Testing regularly helps catch issues early and keeps your digital platforms inclusive.

A person testing a website that isn't inclusive or easy to use.

Let’s Make Digital Spaces More Inclusive!

Making your website and digital content accessible isn’t just about following rules – it’s about making sure everyone can participate, engage, and belong. By following these best practices, you’ll create a more inclusive and user-friendly experience for all students.

Quick Recap:

Add alt text to images.
Ensure good colour contrast.
Make keyboard navigation smooth.
Use proper headings and HTML.
Caption your videos.
Write in plain language.
Label forms clearly.
Make pop-ups accessible.
Test, test, test!

A more accessible web benefits everyone, so let’s make digital experiences open to all!

MSL websites are built with accessibility in mind – designed to meet WCAG standards and help every student engage with your content easily and confidently.

* Higher Education Student Statistics: UK, 2023/24 - Student numbers and characteristics

** W3C image decision tree

*** Colour contrast checker

Published: 09 May 2025 13:12 , Last updated: 09 May 2025 13:12

Membership Solutions Ltd