Accessibility isn’t optional. If people with different abilities can’t use your website, you’re shutting folks out. That’s bad for your audience, bad for business, and, in many places, bad for legal compliance. But accessible design doesn’t have to be complicated.
Get these four principles right and you’ll cover most of what matters: Perceivable, Operable, Understandable, and Robust.
I’ll explain each of these and give practical tips you can apply today.
Perceivable - make content possible to sense
What it means:
Perceivable content refers to information that people can see, hear, or otherwise detect. If information is only presented in one way, some people will miss it. For example, if you use only colour to show important instructions, users who are colour blind won’t get it.
Practical rules
- Text alternatives: Provide descriptive alt text for images. If an image is purely decorative, mark it as such (so screen readers skip it). Screen readers are software tools that read out the page for people who can’t see it.
- Captions and transcripts: For audio and video, offer captions and transcripts. Captions help people who are deaf or hard of hearing, and also anyone watching without sound.
- Colour contrast: Ensure sufficient contrast between text and background. Low contrast is hard to read for many people, especially older users. Use tools to check contrast ratios.
- Multiple ways of presenting info: Don’t rely only on visuals. Use headings, lists, clear layout, and structured HTML so assistive tech can parse pages properly.
Examples and quick wins
- Add alt text for images. Keep it concise and practical.
- Turn on captions for all your videos before publishing.
- Check your brand's main colour combinations with a contrast checker and tweak as needed.
Operable - make controls easy to use
What it means:
Operable pages are easy to navigate and interact with. People must be able to use your site whether they use a mouse, keyboard, touch, or assistive devices. If a form only works with a mouse, keyboard users will be stuck.
Practical rules
- Keyboard accessibility: Every interactive element (links, buttons, form fields) must be usable with a keyboard. That means logical tab order and visible focus indicators so users know where they are.
- Logical navigation: Keep menus and page structure clear. Make sure users can skip past repetitive content like your menu (a “skip to main content” link helps).
- Avoid timeouts or give warnings: If a process times out, give users enough warning and a way to extend time.
- No reliance on sensory input: Don’t require users to do things based only on sound or movement. Provide alternatives.
- Predictable behaviour: Controls should behave consistently. A link should look like a link, a button like a button.
Examples and quick wins
- Ensure the primary nav is reachable by pressing Tab and Enter.
- Add a visible focus style (e.g., a clear outline) so keyboard users can see where they are.
- Provide a “skip to content” link at the top of long pages.
Understandable - make content and interactions clear
What it means:
Understandable means the site content and how it behaves is easy to follow. Confusing writing or unpredictable interfaces trip people up. Clear language and predictable design reduce mistakes and frustration for everyone.
Practical rules
- Plain language: Write simply and directly. Break complex ideas into short paragraphs and use headings.
- Clear labels and instructions: Form fields need clear labels and helpful example text. If something must be a specific format (like a phone number), say so.
- Error handling: When users make an error in a form, tell them exactly what’s wrong and how to fix it. Highlight the field and provide a clear, easy-to-action message.
- Consistency: Use the same words and layout for common actions. If “Apply” means something on one page, don’t call the same thing “Submit” on another.
- Predictable navigation and behaviour: Avoid unexpected pop-ups or moving elements that can confuse people, especially those with cognitive disabilities or attention difficulties.
Examples and quick wins
- Rewrite long, jargony content into plain English. Use shorter sentences and headings.
- Add inline validation (real-time feedback message) to forms with clear error messages like “Please enter a 10-digit phone number without spaces.”
- Keep navigation and buttons in consistent places across pages.
Robust - make sure technology can read your content.
What it means:
Robust means your site works across different browsers, devices, and assistive technologies now and in the future. It’s about using proper, structured design and layout and not using techniques that can break screen readers or other tools.
Practical rules
- Semantic HTML: Use heading tags (h1–h6) properly, lists for lists, and buttons for actions. Semantic markup helps assistive tech understand the content structure.
- ARIA only when necessary: ARIA (Accessible Rich Internet Applications) attributes can help, but don’t use them as a band-aid for poor HTML. Incorrect ARIA can make things worse.
- Test across platforms: Check your site with keyboard-only navigation, screen readers (like NVDA or VoiceOver), and on mobile devices.
- Keep libraries updated: Third-party widgets and plugins must be accessibility-friendly and kept current. Outdated scripts can break compatibility.
- Progressive enhancement: Build a site that works with basic features first; add advanced behaviour on top without blocking access.
Examples and quick wins
- Ensure your main headings are actual h1/h2 tags, not just styled text.
- Replace divs used as buttons with proper <button> elements.
- Run a simple screen reader test (have someone navigate using NVDA or VoiceOver) and note any issues.
Putting it into practice — a short checklist
- Add alt text to images and captions to video.
- Ensure colour contrast meets minimum ratios.
- Make all interactive elements keyboard accessible with visible focus.
- Use clear headings and plain language; write helpful form instructions.
- Provide explicit error messages with guidance on fixing them.
- Use semantic HTML; avoid misusing ARIA.
- Test with keyboard-only navigation and at least one screen reader.
- Keep a log of accessibility issues and fix them iteratively.
Why this matters beyond compliance
Accessible sites reach more people. They improve SEO because structured content and clear headings are easier for search engines to understand. They reduce customer support queries and improve conversions because users can actually complete tasks. And it’s the decent thing to do: everyone should be able to use the web.
Final practical note
You don’t have to do everything at once. Start with the low-hanging fruit: alt text, captions, contrast, keyboard navigation, and clear form labels. Then schedule deeper checks: semantic fixes, screen reader testing, and third-party widget reviews.
Need a hand with an accessibility consultation for your site? I offer free 30-minute consultations to give you a list of next steps to help make your site more accessible.
Book your consultation here 👉 https://calendly.com/hello-ryandeandesigns/30min