What is WCAG and do I have to follow it?

WCAG (Web Content Accessibility Guidelines) is the internationally recognised standard for web accessibility. In the EU, UK, and many other jurisdictions, public sector sites must comply with WCAG 2.1 AA. Private sector requirements vary by country, but following WCAG AA is widely considered best practice and reduces legal risk.

Does accessibility affect SEO?

Yes, meaningfully. Alt text, semantic HTML, logical heading structure, and fast-loading pages all benefit both screen readers and search engine crawlers. Good accessibility and good SEO overlap significantly.

How do I test my site for accessibility issues?

Start with free automated tools: run Lighthouse in Chrome DevTools, or install the Axe browser extension. Then test manually with a keyboard and a screen reader. For a thorough audit, consider hiring an accessibility specialist.

Is ARIA the same as accessibility?

No. ARIA (Accessible Rich Internet Applications) is a set of attributes that supplement HTML when native elements aren't sufficient. The first rule of ARIA is: use native HTML elements wherever possible. ARIA should fill gaps, not replace proper markup.

How much does making a site accessible cost?

Built in from the start, accessibility adds very little to development time — mostly good habits and the right HTML. Retrofitting an existing site that ignored accessibility can be expensive. The earlier you address it, the cheaper it is.

Web Accessibility Basics Every Site Should Get Right

Web accessibility means building sites that people can use regardless of disability, device, or circumstance. It's a legal requirement in many countries, a ranking signal for search engines, and — most importantly — a basic courtesy to your users. The good news is that the most impactful fixes are straightforward.

Use Descriptive Alt Text on Every Image

Alt text is read aloud by screen readers and displayed when an image fails to load. Without it, visually impaired users get nothing — and neither do search engine crawlers. Every meaningful image needs a short, accurate description of what it shows and why it's there.

Decorative images (dividers, background textures) should have an empty alt attribute (alt="") so screen readers skip them. Don't stuff alt text with keywords — describe the image honestly in plain language.

Ensure Sufficient Colour Contrast

Low contrast between text and background is one of the most common accessibility failures, and one of the easiest to fix. WCAG 2.1 AA — the standard most legal frameworks reference — requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Use a free tool like the WebAIM Contrast Checker or the built-in contrast analyser in browser DevTools to audit your palette before launching. Pay particular attention to placeholder text, disabled states, and text overlaid on images.

Make Your Site Fully Keyboard-Navigable

Many users — including those with motor impairments and power users — navigate entirely by keyboard. Tab through your own site right now. Can you reach every link, button, and form field? Is the focus indicator visible at each step? If you've removed the default browser outline without replacing it, fix that immediately.

Never remove focus styles without providing a clear alternative.
Ensure logical tab order that matches the visual layout.
Make modal dialogs trap focus inside them while open.
Allow users to skip repeated navigation with a 'Skip to content' link.

Label Every Form Field Properly

Placeholder text is not a label. It disappears the moment a user starts typing and is often too light in colour to read. Every input needs a visible <label> element that is programmatically associated with it via a matching for and id attribute, or wrapped around the input.

For more complex controls — toggles, sliders, custom dropdowns — use ARIA attributes (aria-label, aria-describedby) when a visible label isn't practical. Always provide clear error messages that identify which field has an issue and how to fix it.

Structure Your Content with Semantic HTML

Screen readers build a map of your page from its HTML structure. If you've built headings with styled <div> elements instead of <h1>–<h6> tags, or buttons with <span> elements instead of <button>, that map is broken. Use the right element for the job — it's less code and more accessible.

One <h1> per page, with headings in a logical hierarchy.
Use <nav>, <main>, <footer>, and <article> to define page regions.
Use <button> for actions and <a> for navigation.
Use <table> only for tabular data, with proper <th> headers.

Provide Captions and Transcripts for Media

Video and audio content is inaccessible to deaf and hard-of-hearing users without captions or transcripts. Auto-generated captions from platforms like YouTube are a starting point, but they're frequently inaccurate — especially with accents, technical terms, or fast speech. Review and correct them before publishing.

Transcripts serve double duty: they help users who prefer to skim rather than watch, and they give search engines indexable text content. It's one of the few accessibility features that directly boosts SEO as well.

Test with Real Tools and Real Users

Automated tools like Axe, WAVE, or Lighthouse catch around 30–40% of accessibility issues — useful, but not enough on their own. Turn on a screen reader (NVDA on Windows, VoiceOver on Mac/iOS) and navigate your site. You'll find problems no automated scanner will flag.

If your budget allows, include people with disabilities in usability testing. Their feedback is worth more than any audit tool. Accessibility isn't a checklist to complete once — it's an ongoing part of how you build.