Website Accessibility: A Practical Guide for Business

For many business owners, "accessibility" sounds like a legal checkbox you tick once and forget. In reality, it is one of the most practical questions you can ask about a website: can everyone who lands on it understand what it says, find the right button and complete an action, regardless of their age, eyesight, hearing, device or language?

Accessibility also has a twin that people often confuse it with: availability. A website can be designed in a perfectly accessible way, but if the server goes down the moment your campaign launches, it is not accessible to anyone. In this guide we cover both sides, with a focus on what actually matters for a business website.

In this guide we explain:

• what accessible design is and why it does not conflict with good-looking design;
• what WCAG, the European Accessibility Act and similar rules expect from businesses;
• which accessibility principles have the biggest impact on a business website;
• how to test accessibility yourself without a big budget;
• why an accessibility overlay on its own does not solve the problem;
• what website availability is and how to measure it.

What website accessibility is, and why it is more than a legal requirement

Accessibility in design has two meanings that complement each other.

Accessibility as clarity

In the broad sense, accessible design is design that its audience understands without effort. What counts as accessible depends on who you are designing for:

• a website for an older audience needs larger text, fewer effects and a predictable structure;
• a website for teenagers can use a different tone and visual language, but it still needs clear navigation;
• a website for a multilingual audience, which is normal in international hubs like Cyprus or Lisbon, has to make sense to people reading in their second or third language, and often needs several language versions.

A good example of clarity is signage at an airport or in a park: an arrow, a fork-and-knife icon or a suitcase, and everyone knows where to go without reading a word. On a website, this translates into familiar icons, buttons that look like buttons and one main action that stands out on every screen.

Accessibility as inclusion

The second meaning, and the one the law cares about, is making a website usable for people with disabilities: low vision and blindness, colour blindness, hearing loss, motor impairments that make a mouse hard or impossible to use, and attention or cognitive difficulties.

This is not a niche audience. Colour blindness, for example, is relatively common among men, so a button that differs from its surroundings only by red or green colour may simply disappear for some of your visitors. Add to that people who enlarge text on their phone, people reading in bright sunlight, parents holding a baby in one arm and older users whose eyesight is not what it used to be. Whatever helps people with disabilities usually helps everyone.

Accessible and beautiful are not enemies

A common mistake is to assume that an accessible website has to look dull or old-fashioned. Accessibility and aesthetics are separate axes: a design can be ugly and accessible, or stunning and unusable. The goal is a website that looks good and works for everyone, and that is entirely achievable. Good contrast, a clear heading hierarchy and buttons that are large enough are exactly what make modern design look clean and professional.

Accessibility laws and standards: WCAG and the European Accessibility Act

In many markets, web accessibility is no longer just a recommendation. Rules differ from country to country, but almost all of them point to the same technical standard. This section is a general overview, not legal advice.

The standard and the level you need

The technical baseline almost everywhere is the Web Content Accessibility Guidelines (WCAG), published by the W3C. In practice, the level that laws and contracts ask for is AA. The guidelines keep evolving: the current version is WCAG 2.2, which added requirements such as minimum target sizes for touch, visible focus that is not hidden by other content and alternatives to dragging. Even when a regulation still refers to an earlier version, building to WCAG 2.2 level AA covers it and prepares you for what comes next.

The European Accessibility Act

In the EU, the European Accessibility Act has applied since June 2025. It covers a range of products and digital services aimed at consumers, including e-commerce, banking services, e-books and passenger transport services. Each member state enforces it through its own national law, and the technical reference in Europe is the harmonised standard EN 301 549, which in turn builds on WCAG. Very small service businesses (micro-enterprises) are generally exempt, but that exemption is not universal, and public sector websites have their own, older set of rules.

Outside the EU, the picture is similar: the UK, the US and many other countries have equality or disability laws that have been applied to websites, and all of them lean on WCAG.

What this means for your business in practice

• A website that meets AA: content, forms, menus, sliders, pop-ups and downloadable files.
• An accessibility statement: a page that describes how accessible the site is, what is not accessible yet and who to contact about problems.
• Ongoing maintenance: every new page, blog post or campaign has to follow the same rules, not just the website as it was on launch day.

Complaints, regulator action and lawsuits over inaccessible websites are a real risk in several markets, and exemptions are never automatic. If you are not sure which rules apply to you, talk to an accessibility specialist or a lawyer who works in this area.

The four WCAG principles

All WCAG guidelines are built around four principles. They are worth knowing because they help you think about accessibility even when no specific rule matches your situation.

Perceivable

Every piece of information has to reach visitors in a form they can take in:

• alternative text (alt) for every image that carries information, and an empty alt for purely decorative images;
• captions for videos and transcripts for audio content;
• enough contrast between text and background;
• information that is not conveyed by colour alone.

Operable

Every action on the website has to be possible without a mouse:

• full keyboard navigation, including menus, forms and pop-ups;
• a visible focus indicator on the active element;
• buttons and links large enough to tap with a finger;
• a way to pause animations, sliders and autoplaying video.

Understandable

• plain language and headings that describe the content;
• consistent navigation across all pages;
• form error messages that explain what is wrong and how to fix it;
• the page language declared in the code, so a screen reader pronounces the text in the right language.

Robust

The website has to work across different browsers and with assistive technologies such as screen readers. In practice, this means semantic HTML: real headings rather than bold text, real buttons rather than a div that behaves like a button, and labels that are properly connected to form fields.

What to check first: seven things with the biggest impact

Most problems on small and mid-sized business websites are the same ones over and over again. Fix the items on this list and you will have covered a large part of the way.

1. Colour contrast

Normal text needs a contrast ratio of at least 4.5:1 against its background, and large text and graphical elements such as field borders and icons need at least 3:1. Light grey text on a white background, white text over a photo and placeholder text used instead of a label are the most common failures. If you are choosing a brand palette, check contrast at that stage already. We go into more detail in our guide on choosing brand colours.

2. Heading structure

One H1 per page, followed by H2 and H3 headings in a logical order. Screen readers let users jump from heading to heading, so a correct structure is essentially a table of contents for blind visitors. It also helps Google understand the page.

3. Alternative text for images

A short description of what the image shows and why it is there. Not "image1.jpg" and not a list of keywords. For an image used as a button or an icon without text, the alt should describe the action, for example "Open WhatsApp chat".

4. Keyboard navigation and focus

Try to move through your website using only Tab and Enter. If you cannot open the menu, close a pop-up or see where the focus is, there is a problem. Many designs remove the focus outline because it "doesn't look nice". It is much better to restyle it in your brand colours than to hide it.

5. Forms

Every field needs a visible label, not just a placeholder. Errors should appear as text next to the field, not only as a red border. Required fields should be marked in text as well. The contact form is usually the page that brings in money, so this is where accessibility has a direct impact on leads.

6. Buttons and links

A button should be large enough to tap with a finger and be a real HTML button or link element, not a styled div. Link text should explain where it leads: "Download the price list", not "Click here". We cover this in depth in our guide to website button design.

7. Video, animation and pop-ups

Videos with captions, animations that respect the device's prefers-reduced-motion setting, and pop-ups that can be closed with the keyboard and do not block the content the moment someone arrives on the site.

How to test accessibility yourself

A full audit is a job for an accessibility specialist, but you can uncover a lot on your own, for free, in less than an hour.

Automated tools

• Lighthouse in Chrome DevTools: the Accessibility category gives you a score and a list of issues;
• axe DevTools: a browser extension that finds issues and explains how to fix them;
• WAVE: shows issues directly on top of the page;
• a contrast checker, such as the one from WebAIM, for testing colour pairs.

Keep in mind that automated tools only catch part of the problems. They can tell that an alt attribute is missing, but not whether the alt text you wrote actually makes sense.

Manual testing

1. Keyboard: go through the page with Tab, Shift+Tab, Enter and Esc.

2. Zoom: zoom the browser to 200% and check that text is not cut off and that there is no horizontal scrolling.

3. Screen reader: NVDA is free on Windows, VoiceOver is built into Mac and iPhone, and TalkBack is built into Android. Listen to your home page and your contact form.

4. Mobile: try to complete the main action with one hand, outdoors, in sunlight.

5. Greyscale: turn on greyscale mode on your device and check that no information gets lost.

On the platforms we work with

• Webflow: the Designer has an Audit panel that flags missing alt text, contrast issues and heading order. You can set alt text at the asset level in the Assets panel, add aria-label attributes and control focus order. In the CMS, add an alt field for every image so that new posts stay accessible too.
• WordPress: choose a theme tagged accessibility-ready, be careful with page builders that generate bloated markup and test every plugin before installing it. Sliders and galleries from third-party plugins are a constant source of problems.

Why an accessibility overlay on its own is not enough

Accessibility overlays are very common: an icon in the corner of the screen that opens a menu with text resizing, high contrast and a more readable font. They can help some visitors, but they do not make a website accessible.

• They do not fix the code. If a form is built without labels, an overlay will not add them in a way a screen reader understands.
• People who use assistive technology do not need them. A blind visitor already has their own screen reader, and what they need is valid HTML, not one more button.
• They add weight and slow the site down. A third-party script loads on every page and hurts performance, a topic we cover in our guide on website speed optimization.
• They do not protect you legally on their own. The requirement is that the website meets the standard, not that it has an icon on it.

The right approach is to fix the website itself first: structure, contrast, forms and keyboard support. After that, if you want, you can add an overlay as a convenience layer.

Availability: the other side of an "accessible website"

In developer vocabulary, availability is a different concept: how consistently and reliably a website or service responds to its users. If a visitor clicks "Send" on a form and nothing happens, or the page does not load at all, then from their point of view the website is not accessible, however perfect the design is.

How availability is measured

• Uptime percentage: the share of time the website is up and responding correctly. This is the metric you will see in hosting providers' service level agreements (SLAs).
• MTBF (Mean Time Between Failures): the average time between incidents. The longer, the better.
• MTTR (Mean Time To Repair): the average time it takes to fix an incident. The shorter, the better.

"The nines"

Availability is often described by its number of nines. What sounds high is not always enough:

• 99% availability means roughly 3.65 days of downtime per year;
• 99.9% means roughly 8.8 hours per year;
• 99.99% means roughly 53 minutes per year;
• 99.999% means roughly 5 minutes per year.

For a small company's brochure website, 99.9% is usually fine. For an online store during Black Friday or the holiday season, even one hour of downtime costs sales.

How to improve availability on a business website

• Managed hosting with a CDN: platforms like Webflow come with built-in hosting and a CDN. On WordPress, choose managed hosting rather than the cheapest shared plan.
• Monitoring: services such as UptimeRobot or Better Stack check your website every few minutes and alert you as soon as it goes down.
• Backups and a staging environment: so that a plugin update does not break the live site, and so you can roll back to a working version within minutes.
• Isolating components: if an external service like a chat widget or booking system goes down, the rest of the website should keep working. Larger systems do this with load balancing, scalability and fault tolerance.
• Monitoring the forms themselves: a form that has silently stopped sending leads to your CRM is a quiet outage. Test it regularly or set up an automation that alerts you when no leads have come in for an unusually long time.

An action plan: making an existing website accessible

Step 1: Map the issues

Run automated tools on your key pages: the home page, service pages, the contact form and, for a store, a product page and the checkout flow. Add a manual check with a keyboard and a screen reader.

Step 2: Prioritise

Start with anything that blocks an action: a form that cannot be submitted with a keyboard, a menu that will not open, a button with no text. Then move on to contrast and heading structure, and leave polish for last.

Step 3: Fix it in the design system

Instead of fixing every page separately, fix things at the component level: colours, buttons, form fields and focus states. That way every new page is accessible from the start.

Step 4: Content

Go through your images and add alt text, add captions to videos and make sure downloadable PDFs are accessible or have an HTML alternative on the page.

Step 5: Accessibility statement and regular re-checks

Publish an up-to-date accessibility statement with contact details, and schedule periodic reviews, for example once a quarter and before every major launch.

Common mistakes

• leaving accessibility until the end of the project, when every fix is already expensive;
• relying only on a 100 score in Lighthouse;
• removing the focus outline because it "ruins the design";
• putting important text inside an image, such as a promotional banner;
• forgetting the other language versions of the website, which need to be accessible too;
• making the site accessible once and never checking again after content updates.

How RJL Studio builds accessible websites

We treat accessibility as part of design and development, not as an add-on at the end. During the UX/UI stage, we check contrast, touch target sizes and heading structure in the Figma files already. When building in Webflow or WordPress, we create semantic components, forms with proper labels, full keyboard navigation and alt fields in the CMS, so that content you publish yourself stays accessible too. Before launch, we run automated and manual tests and set up availability monitoring for both the website and its forms.

Have an existing website and not sure where it stands? Get in touch: we will review your key pages and propose a clear, prioritised action plan.

Frequently asked questions

Is every business legally required to have an accessible website?

Not every business everywhere, but the circle keeps growing. In the EU, the European Accessibility Act covers many consumer-facing digital services such as online shops, while very small service businesses are generally exempt. Other countries apply their own equality laws. The rules depend on your market, sector and size, so check your specific situation with an accessibility specialist or a lawyer; this guide is not legal advice.

What is the difference between WCAG and EN 301 549?

WCAG are the international guidelines published by the W3C. EN 301 549 is the European standard for ICT accessibility, and for web content it builds on WCAG level AA. National laws usually point to one of the two. Working to WCAG 2.2 level AA is a good way to meet both and stay up to date.

Is an accessibility overlay enough to comply with the law?

No. An overlay can help some visitors, but it does not fix code, forms or page structure. The requirement is for the website itself to meet the standard, so fix the site first and only then consider adding an overlay.

How long does it take to make a website accessible?

It depends on the size of the website and how it was built. A small brochure site built from well-structured components can be made accessible relatively quickly. A large site with many plugins and old content will need mapping, prioritisation and work in stages.

Does accessibility affect SEO?

Indirectly, yes. A correct heading structure, alt text, descriptive link text and a fast website also help search engines and AI systems understand your content. Accessibility is not a ranking factor in itself, but much of the work overlaps with good SEO.