What is website accessibility?
Web accessibility means as many people as possible can actually use your site. Read your content, find your services, fill in a form, make a donation etc. Whatever device they’re on or whatever obstacles they may face.
It’s easy to think of accessibility as just relating to blind or visually impaired people, but it’s much wider than that.
You probably think of screen readers and visual impairment first. That’s part of it. So is someone who can’t use a mouse but can read their screen just fine. So is someone with a vestibular disorder, who can feel genuinely sick when a page lurches into motion or an animation kicks off without warning.
Web accessibility is about context, not fixed to an individual user. I might be able to read the desktop version of your site without any problems, but struggle to navigate through the same site on my phone, one-handed on a noisy bus.
And it’s about readability. If a chunk of your audience are children, or don’t have English as a first language, plain words do real work. That goes past your main content too. It’s the error message when someone fills in a form wrong. The label on a button. The wording of a donation prompt. Any of it can help someone through or quietly shut them out.
It is better to think of accessibility as designing for the widest possible range of people, environments, and situations, rather than just ticking a box for a specific group of users.
Why is accessibility important?
There’s a carrot and a stick, and both are worth being honest about.
The stick: some of this is a legal expectation. The Equality Act 2010 asks service providers, charities included, to make reasonable adjustments for disabled people, and your website counts. Statutory funders increasingly ask about accessibility too, and some make it a condition of the money.
The carrot matters more. You should be doing this because you want to, not because someone’s twisting your arm. Your charity exists to reach people. Every barrier on your site is someone who couldn’t read about a service they needed, couldn’t get through your enquiry form, or gave up before they donated.
Practical examples of accessibility in action
- Video captions. Essential for deaf users, but also perfect for anyone watching a clip in a quiet carriage without their headphones.
- Sharp colour contrast. A necessity for visual impairments, and a massive help for anyone trying to read their screen in glare or bright sunlight.
- Generous tap targets. Helps with motor control difficulties, but also means you can actually hit the right button while walking or juggling bags.
- Keyboard-friendly navigation. Vital if you can’t use a mouse, and a lifesaver if your trackpad dies or you’ve got a wrist in a cast.
- Simple words and clear headings. Supports cognitive accessibility, while being just as useful for someone who is rushed, tired, or just plain distracted.
- Alt text for images. Gives screen reader users the full picture, and provides context for everyone else when a slow connection fails to load the graphics.
- Responsive, fluid layouts. Keeps your content readable on tiny screens, from a quick mobile check on a bus to people who only ever use a smartphone.
The dropped kerb effect
There is a classic example from the physical world: the dropped kerb. It was built with wheelchair users in mind, but it turned out to be a win for almost everyone else too:
- parents pushing buggies,
- travellers with heavy suitcases,
- delivery drivers on a deadline,
- people on bikes,
- anyone using a walking frame.
Website accessibility works exactly like that. The features you build for disabled users usually end up making the experience better for every single visitor.
Handy bonus: the things that make a site accessible, clean structure, good headings, honest link text, are the same things Google likes. So your SEO tends to benefit too.
How is accessibility measured?
The standard everyone points to is WCAG, the Web Content Accessibility Guidelines. You don’t need to read them cover to cover. It helps to know the shape of them.
They set out a long list of things a site should do, sorted into 3 levels. A is the basics. AA is where most organisations aim. AAA is the strict end.
AAA is genuinely hard. Sites like gov.uk push for it, and the payoff is you could probably read them on an ancient Kindle or a smart fridge. You’ll also notice they’re a bit dull to look at, because meeting the strictest bar leaves little room for visual flair. For most charities, AA is the sensible target. A properly usable site that still gets to look like itself.
Is my charity website accessible?
Yes. No. Maybe.
Honestly, it works more like a spectrum than an MOT you pass or fail. Different pages and features sit at different points on it. Your main content pages might sail through AA while an embedded event calendar, a fancy homepage carousel (should you use these? Probably not! https://shouldiuseacarousel.com/), or an old PDF drags the average down.
So a more useful question than “is my site accessible?” is “which parts fall short, and how much do those parts matter?”. Most of your site probably clears a reasonable bar. Some of it won’t. Keeping on top of it is an ongoing job, because every new page, plugin, or blog post is a fresh chance to slip backwards.
What are some of the important accessibility features?
Here’s what a reasonably accessible site tends to have in place. None of it is exotic. It’s the basics done properly.
- Can be navigated and read using a keyboard or screen reader. Some people can’t use a mouse, and some can’t see the screen at all. They tab through the page or have it read aloud, so everything has to work in that order and make sense out loud. Without this they’re often stuck on your homepage (and confused by a carousel they cannot make any sense of).
- Respects prefers-reduced-motion preferences. If someone’s told their device they don’t want animations, often because motion makes them ill, your site should honour that and hold still. Subtle animations can add a nice flair to a site, but the functionality of it shouldn’t rely on them.
- Uses a correct hierarchy of heading tags. Headings should describe the structure of the page (H1, then H2s under it, then H3s), not get picked because you liked a particular font size. This is a really common issue we see, especially on sites built with page-builder tools like Elementor. Screen reader users jump around by these headings, so a jumbled order leaves them, and Google’s SEO bots, a bit lost.
- Uses descriptive links where possible. “Read more” tells a screen reader user nothing. “Read more about our counselling service” does. Link text should make sense lifted out of the sentence around it. You don’t often get the space to put a lot of text inside a button, but try to avoid lots of identical, generic labels.
- Images use alt text. A short written description of what an image shows, so it isn’t simply invisible to anyone who can’t see it. Purely decorative images can be left blank so they get skipped.
- Colour contrast ratio meets the guidelines. Text needs enough contrast against its background to be read comfortably, which is where bright, saturated brand colours often come unstuck.
- Text size can be adjusted by the browser. Set your text in relative units (REM or EM) rather than fixed pixels, and people can scale it up to suit them without the layout falling apart.
- Videos are closed captioned. Captions help people who are deaf or hard of hearing, plus everyone watching with the sound off. YouTube can auto-generate a first pass, though it’s worth fixing the errors it makes.
- PDFs are readable and scannable. Quick test: can you select and copy the text with your cursor, or is the whole thing really one big image? If it’s an image, a screen reader can’t read a word of it.
- The reading age suits your key audiences. Clear, plain language that fits who you’re actually writing for, rather than sector jargon.
Colour contrast ratio
Colour contrast is simply a measure of how easy it is to tell two colours apart. On a website, it’s usually about how clearly text stands out from its background.
The WCAG contrast ratio compares the brightness of two colours.
- 1:1 means there is no contrast at all (for example, white text on a white background).
- 21:1 is the maximum possible contrast (black on white).
So:
- 3:1 = some contrast
- 4.5:1 = good contrast for most normal-sized text
- 7:1 = very high contrast that’s even easier to read
The bigger the first number, the easier the colours are to distinguish. You can check via an online colour contrast tool like this.
This is often an issue with a charity’s brand colours – which can be too bright/saturated to work well as a background colour. The bigger the text (and the fewer words), the more you can get away with a reduced contrast ratio.
Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.
Contrast ratio: 3.16
Would fail the minimum AA requirements. White paragraph text on a bright brand colour is very common but it’s an accessibility pitfall.
Thank you
The same ratio of 3.16 but it’s only two words in a bigger and bolder font that is much more comfortable to read. It still technically fails but something like this fits into your branding and is probably fine.
Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.
Contrast ratio: 11.
Passes the ratio test. Sometimes a very subtle light background colour is the best way of differentiating content in an accessible way.
Whose responsibility is the accessibility of my site?
It splits into 3 parts, and a lot of confusion comes from assuming it’s all someone else’s job.
Your developer or designer owns the structural, under-the-bonnet stuff. Building the site so it can be navigated by keyboard, making sure skip links work, setting up nav menus and ARIA labels properly, giving assistive tech something sensible to read. Get this foundation wrong and there’s very little your team can do to patch over it.
You, and whoever else edits your content, own the day-to-day things. Writing alt text, using the right heading order, picking sensible combinations of text size and background colour, captioning videos, exporting PDFs properly. This is the part people skip, because it feels like a technical job to hand off. It lands with whoever hits publish.
Third parties own the tools you embed but didn’t build. JustGiving donation forms, an online chat box, a ticketing widget. Plenty of providers take accessibility seriously now, but if one doesn’t, there’s often nothing you can do about their code. Awkward truth: if it’s on your site, it’s your responsibility in the user’s eyes, even when you can’t change it. Good reason to test these things before you commit, and to pick providers who clearly care.
How can I check or measure the accessibility of my charity website?
Two free tools worth knowing.
Google Lighthouse is the easiest starting point for most people. It’s built into Chrome, so there’s nothing to install, and it hands you a score plus a list of issues. WAVE is also excellent and arguably more thorough, the browser extension is a handy add-on but you can also test a url via the WAVE website.
Take the scores with a pinch of salt. These tools flag issues on pretty much every site you point them at, including very good ones, so a perfect 100 isn’t really the goal or even achievable. What they’re good for is the low-hanging fruit (missing alt text, obvious contrast problems) and surfacing bigger underlying issues to fix.
One habit worth building: don’t just test your homepage. Accessibility varies a lot from page to page, and the homepage is usually the most polished bit of the whole site. Run the same checks on your donation form, a normal blog post, and any page with video or downloads, and you’ll get a truer picture.
Can I get a website accessibility plugin or widget to make my site more accessible?
No. There’s no magic-wand plugin that makes an inaccessible site accessible.
Those widgets, the little floating button offering to change the text size or flip on a high-contrast mode, can’t touch the things that actually matter. They can’t write your alt text, sort out a broken heading order, or restructure a page so a screen reader can follow it. All the real work still has to happen underneath.
They also solve a problem most people don’t have. Someone with poor eyesight has almost certainly already set their monitor or browser to zoom in or use bigger text across every site they visit. They’re not hunting for a widget on your site to do it one page at a time. Build the site to respect those settings automatically and you’ve done the useful version. A widget is a bit of theatre bolted on top.
Which features should I concentrate on?
This is a judgement call, because you probably can’t fix everything, especially while staying true to your brand colours.
Start with the low-hanging fruit. Alt text and a sensible heading order cost almost nothing and make a real difference. Then pour your effort into the essential functionality, because that’s where the stakes are highest. Someone has to be able to fill in your enquiry form. Someone has to be able to read your treatment information on their phone while sitting in a hospital waiting room. Nail those first.
Compare that to a Facebook share icon that’s a couple of pixels too small to tap easily. Annoying, worth fixing when you get a minute, but nobody’s life gets worse because they couldn’t share a blog post. Spend your limited time where it clears the biggest barriers.
Accessibility checklist for charity website owners
- Keyboard navigation works properly (worth asking your developer to check this one).
- Every meaningful image has descriptive alt text; decorative images are left blank.
- PDFs can be read and scanned, so you can select the text and it isn’t just one big image.
- Skip vague link and button labels like “Read more”; make it clear where each link goes.
- Colour combinations have enough contrast, with any brand-colour exceptions made on purpose.
- Videos have captions or transcripts (let YouTube draft them, then fix the errors).
- Headings run in a logical order (H1, H2, H3) based on structure, not the font size you fancied. This is a common gotcha on lots of charity web pages we see.
- Text is set in relative units so browsers can resize it without breaking the layout.
- The site respects reduced-motion preferences instead of animating regardless.
- You’ve tested more than the homepage, including your donation form and a content page.
- The language fits your key audiences, right down to form validation and error messages.
- You treat accessibility as an ongoing job, revisited as you add content, not a one-off fix.

