> blog
Designing accessible websites without making them ugly
Every accessibility article starts with statistics about disability. We'll skip those: you can find them anywhere.
The four categories of accessibility
Visual
Contrast (text on background), font size (16px minimum body), text alternatives for images (alt text), captions for videos, no information conveyed by colour alone.
Motor
Keyboard navigation works for every interaction, tap targets at least 44×44 pixels, no time-limited interactions without extension, no auto-advancing carousels.
Cognitive
Plain English (Year 8 reading level), clear headings, predictable navigation, error messages that explain how to fix the problem, forms that save progress.
Auditory
Captions and transcripts for video and audio content, no audio that auto-plays.
What WCAG levels actually mean
WCAG 2.1 Level A: bare minimum. Don’t use colour as the only way to convey information. Don’t make videos with seizure-inducing flash. Almost every site passes this without trying.
WCAG 2.1 Level AA: the practical legal standard for most contexts. Government sites, NDIS providers, many corporate clients require AA compliance. Includes contrast ratios (4.5:1 normal text), keyboard navigation, focus visible, error suggestions, etc.
WCAG 2.1 Level AAA: idealistic. Rarely required. Includes 7:1 contrast for normal text, sign language for video content, etc. Worth aiming for in specific contexts (government, services for people with disabilities) but overkill for most commercial sites.
Where most sites fail
Contrast. Light grey text on white background, especially in form labels and fine print. Test with the WebAIM Contrast Checker.
Focus indicators. Designers remove the default browser focus ring because it’s “ugly,” without replacing it. Now keyboard users can’t tell where they are.
Modal dialogs. Modals that trap keyboard users, modals that auto-show on every page, modals that can’t be dismissed without a mouse.
Image alt text. Either missing entirely, or stuffed with keywords (“buy our shade sails Newcastle” on every product image). Alt text describes the image, period.
Form errors. Red highlighting alone tells colour-blind users nothing. Always include a text error message that says what’s wrong and how to fix it.
What looks good AND is accessible
Good colour contrast. Make text genuinely readable. Sites with strong contrast feel more confident, not less. Look at any well-designed publication: they’re high contrast.
Generous spacing. Larger tap targets, more padding, breathing room. The opposite of dense: cluttered. A site with proper spacing feels premium.
Custom focus styles. Replace the default focus ring with something that matches your brand. A coloured outline or background tint in your accent colour. Looks intentional, helps keyboard users.
Real headings. H1 → H2 → H3 hierarchy that’s clear visually and structurally. Helps screen reader users navigate, helps everyone scan.
Practical testing
Tab through the page. Without a mouse. Can you reach every interactive element? Can you tell where you are at every step? Can you operate everything?
Use a screen reader. VoiceOver on Mac (Cmd+F5), Narrator on Windows. Listen to your homepage. Does it make sense?
Test contrast. WebAIM’s checker for any text/background pair you’re uncertain about.
Run an automated audit. axe DevTools (Chrome extension), WAVE, Lighthouse. They catch obvious failures. Don’t rely on them alone: manual testing finds the harder issues.
Where it especially matters
NDIS providers, healthcare, education, government, banking, anything servicing people with disabilities: accessibility is a foundation, not an afterthought. WCAG 2.1 AA from day one.
Even for “standard” commercial sites, accessibility is increasingly a legal expectation in Australia (Disability Discrimination Act applies to web). Don’t skip it.