Guides

Web accessibility: what it is, what the WCAG say and how to adapt your website step by step

An accessible website is one that anyone can use, with or without a disability. We explain the principles, the WCAG levels, the most common failures and a checklist to get started.

Published on October 29, 2026 · The mitza.es team

When people talk about web accessibility they often think only of the law. But accessibility is, above all, a practical matter: making sure anyone can read, understand and use your website, even if they can't see well, can't use a mouse, have a hearing or motor impairment, or are simply looking at their phone in the sun. An accessible website also tends to load better, be easier to understand and rank better. This guide explains what it is, which standard is used as the reference and how to start adapting your site without rebuilding it from scratch.

What web accessibility is

Web accessibility is the set of design and development practices that allow people with disabilities, and also people with temporary or situational limitations, to perceive, understand, navigate and interact with a website. It affects people who use screen readers, people who navigate with the keyboard alone, people who need more contrast or enlarged text and people who need captions on videos.

It isn't an add-on “for a few people”: it improves the experience for everyone. Captions help on a train without headphones, good contrast helps in the sun and a clear form helps anyone in a hurry.

What the WCAG are and the four principles

The WCAG (Web Content Accessibility Guidelines) are the international W3C standard. They are organized around four principles, summed up by the acronym POUR:

  • Perceivable: information can be perceived (alternative text on images, captions, sufficient contrast).
  • Operable: everything can be used with a keyboard, with no unfair time limits or focus traps.
  • Understandable: the text is readable, navigation is predictable and form errors are explained.
  • Robust: the code is valid and semantic, so it works with screen readers and other assistive technologies.

Levels A, AA and AAA: which one matters to you

Each WCAG criterion has a conformance level: A (basic), AA (the level that is usually required as the target) and AAA (the most demanding, not always achievable for all content). For a business website, the reasonable target is level AA. The most widespread reference version in Europe is WCAG 2.1 AA, through the European standard EN 301 549, and since October 2023 there has been version 2.2, which adds nine new criteria (among them a minimum size for touch targets of 24 by 24 CSS pixels, with exceptions).

What the law says (and where to read more)

In Spain, Spanish Law 11/2023 transposes the European accessibility directive and its Title I has applied since June 28, 2025. It covers, among others, e-commerce: the obligation concerns the online sale of products and services to consumers. There are exceptions and transitional periods (for example, for some microenterprises that provide services), so it's worth checking your specific case. You'll find the details on the real state of compliance in our article on the web accessibility law in Spain. Here we focus on the practical side: what to change on your website.

The most common accessibility mistakes

  • Images without alternative text (or with texts like “image1.jpg”), or with alt text on purely decorative images that should be ignored.
  • Insufficient contrast between text and background: the WCAG ask for a ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • Navigation that is impossible with a keyboard: menus that only open with the mouse, modal windows that trap focus or an invisible focus indicator.
  • Poorly labeled forms: fields without a label, errors that are only indicated with the color red or messages that aren't announced.
  • Chaotic heading structure: jumps from H1 to H4, or headings used only to make text bigger.
  • Ambiguous links (“click here”, “read more”) that don't say where they lead.
  • Videos and audio without captions or a transcript.
  • Page language not declared, so the screen reader mispronounces the text.

A practical checklist to get started

  1. Navigate your website with the keyboard only (Tab, Shift+Tab, Enter, Esc): can you reach everything and see where you are?
  2. Check that every informative image has a descriptive alt and that decorative ones have an empty one.
  3. Check the contrast of your text with a testing tool.
  4. Make sure you have a logical H1, H2, H3 heading structure, with a single H1.
  5. Label every form field and make errors explained in text, not only with color.
  6. Make sure link text makes sense out of context.
  7. Add captions to videos and avoid content that plays on its own.
  8. Declare the page language and don't block zooming on mobile.
  9. Check that the layout works when text is enlarged to 200% without losing content.
  10. Publish an accessibility statement with a contact to report problems.

Tools to test your website

Automated tools, such as Lighthouse (built into Chrome), WAVE or axe DevTools, detect part of the problems: contrast, images without alt, missing labels. They are a good first filter, but they don't replace a manual review: you need to test the keyboard, a screen reader (NVDA on Windows, VoiceOver on Mac and iPhone) and how well the content is actually understood. Accessibility “widgets” or overlays that are installed with a single line of code aren't a solution either: they don't fix the underlying code and aren't considered compliance.

Accessibility and SEO: what they have in common

Much of what accessibility asks for is what Google rewards: well-structured headings, alternative texts, descriptive links, transcripts and fast pages. It isn't a promise of rankings, but an accessible website tends to be a clearer website for search engines too. If you want to work on both at once, take a look at our SEO service.

How much work it takes to adapt an existing website

It depends on the starting point. On a well-built website, many fixes are small (alt text, labels, contrast). On sites with an old layout, complex menus or plugins that generate poorly semantic code, specific components may need to be rebuilt. That's why the effective approach is to start with an audit that sorts the problems by severity and by effort, and to fix first what most gets in the way of use. If you have an online store, accessibility of the cart and checkout comes first (we also cover this in our guide to ecommerce development).

How we can help at Mitza

Our web accessibility audit reviews contrast, keyboard navigation, screen reader compatibility, forms, HTML structure and alternative text, and gives you a list of what fails and how to fix it. If you'd rather start with a general review of your site, there's the audit, and for any questions you can write to us from the contact page.

Want to know whether your website is accessible?

We review contrast, keyboard navigation, screen readers, forms and HTML structure, and give you a prioritized list of fixes.

No spam. No sales calls. Just your personalised reply.