Three website accessibility fixes you can do in under an hour
You don't need an audit to make your website easier to use. Three checks, each under an hour, catch problems that stop real people booking, donating or getting in touch.
Who has to do this, and who should
Public sector bodies in the UK, including councils, must meet the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. GOV.UK says that means meeting the WCAG 2.2 AA standard and publishing an accessibility statement. Some charities are covered too, for example if they're mostly publicly funded.
For everyone else, it's simpler: an accessible form is one more people can finish. The three fixes below are taken from WCAG 2.2, the international standard.
Fix 1: Contrast
WCAG 2.2 says normal body text needs a contrast ratio of at least 4.5:1 against its background. Large text (at least 18 point, or 14 point bold) needs 3:1.
Example: mid-grey text in #999999 on white works out at about 2.8:1, so it fails. Darken it to #767676 and it reaches about 4.5:1, which passes. Same design, one small change.
How to check: search for a free "colour contrast checker", paste in your text and background colours, and read the ratio. Check body text, links, button text and the grey hint text inside form fields. That hint text is where failures usually hide.
Fix 2: Labels on every form field
A common design trend puts the field name inside the box as grey placeholder text, with no label above. The W3C's own guidance explains the problem: placeholder text disappears as soon as someone starts typing, and screen readers don't treat it as a label. Browsers also usually show it in a colour that doesn't meet the contrast minimum.
The fix: a visible label above or beside every field ("Email address", "Date of event"), linked to the field in the code. Keep placeholder text for examples only, if at all.
Fix 3: Keyboard only
Some people can't use a mouse. WCAG requires that everything works from a keyboard, and that you can see which item is selected (the "focus"). You can test it yourself in ten minutes:
- Open your booking or contact form and click once in the browser's address bar.
- Press Tab to move forward and Shift+Tab to go back.
- Check you can always see where you are. There should be a visible outline or highlight.
- Fill in every field. Use the arrow keys in drop-downs and date pickers, and Space to tick boxes.
- Submit the form with Enter. Leave a required field empty on purpose, and check the error message makes sense and you can get back to the field.
If you get stuck, lose track of where you are, or can't pick a date, some of your visitors can't either.
Common mistakes
- Removing the focus outline because it "looks untidy". It's how keyboard users see where they are.
- Putting key details, like opening times or prices, only inside an image.
- Fixing the home page but not the form, which is where people actually give up.
If you're comparing booking systems, ask each supplier which WCAG level they test against. Our page on booking systems for halls and clubs lists the other questions worth asking.
Sources
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2
- W3C: Understanding SC 1.4.3 Contrast (Minimum)
- W3C WAI: Form instructions (placeholder text)
- GOV.UK: Accessibility requirements for public sector websites and apps
Related
← GDPR for online bookings: the basics for small organisations