We create digital solutions that work for businesses
An accessible website lets people read content, navigate controls, complete a form, find a product and finish payment through different methods of interaction. Some visitors use a keyboard, screen reader or magnification. Others struggle with low contrast, small targets, complex instructions or a timer that cannot be extended.
These barriers are not limited to one audience. A temporary injury, bright sunlight, a slow device, ageing or the absence of a mouse can create similar problems. Accessibility removes friction and improves the general user experience.
If you need to assess the entire journey rather than accessibility alone, begin with a website UX audit. This guide focuses specifically on accessibility.
For a new project, include WCAG 2.2 Level AA in design, content, development and acceptance testing. For an existing website, start with critical journeys: navigation, search, forms, cart, checkout, account login and downloadable documents.
Automated testing finds only some issues. Add a keyboard-only review, 200% zoom, a screen reader check and task completion on a real phone. Fix blockers before cosmetic imperfections.
WCAG 2.2 is a W3C recommendation for accessible web content. It is organised around four principles:
| Principle | Practical meaning |
|---|---|
| Perceivable | people can receive information visually or through an alternative |
| Operable | essential actions work without a mouse or precise movement |
| Understandable | navigation, copy, fields and errors behave predictably |
| Robust | browsers and assistive technologies can interpret the interface |
Level A addresses fundamental barriers. AA is the usual practical target for a commercial website. AAA contains stricter criteria, but full AAA conformance is not always realistic across an entire product.
UI and UX contribute different parts. Visual design covers contrast, states and scaling, while UX covers the journey and clarity of interaction. The guide to UI versus UX explains that distinction.
WCAG 2.2 added nine success criteria. Several are especially relevant to business websites:
This direction matters. Accessibility is not only about colour and alt text. It includes the actual behaviour of an interface.
The European Accessibility Act covers specified products and services in the EU, including ecommerce, banking services, e-books and parts of transport and communications. Exact obligations depend on the member state, business model, service and available exemptions.
EN 301 549 v4.1.1 was published in September 2026 and uses WCAG 2.2 as its accessibility baseline. At the time of writing, that version had not yet become the harmonised standard cited in the Official Journal of the European Union. A legal assessment must therefore check national EAA implementation and the currently applicable harmonised standard.
The practical response is clear. If a website sells to consumers in the EU, do not wait for a complaint. Use WCAG 2.2 AA as the improvement target, retain testing evidence and obtain legal advice for the exact compliance position.
Use one meaningful H1, sequential headings, real lists, tables only for tabular data and appropriate landmarks. A button should be a button. A link should navigate to a destination.
Do not replace semantics with clickable div elements. Assistive technology needs a programmatic role, name and state.
Put the mouse aside and use Tab, Shift+Tab, Enter, Space and Escape. Focus should follow a logical order. Navigation, filters, sliders, dialogs, forms and checkout must work without a pointer.
A hidden focus target or a keyboard trap can prevent task completion.
Do not remove outline without an equivalent replacement. The focus style must remain visible on light and dark surfaces, differ from hover and stay clear of sticky elements.
When a dialog opens, move focus into it. When it closes, return focus to the control that opened it.
Use a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Controls, field boundaries and meaningful graphical states also need sufficient contrast.
Do not communicate meaning through colour alone. An error needs explanatory text or an icon with an accessible name.
Zoom the page to 200%. Text should remain readable, controls should not overlap and ordinary content should not require horizontal scrolling on a narrow viewport.
Do not disable user scaling in the viewport configuration.
Give meaningful images concise alt text that reflects their purpose in context. Decorative images should use empty alt text. Avoid repeating a long caption in the alt attribute.
Spoken video needs captions. Provide a description or text alternative for essential visual information. Do not autoplay sound.
Every field needs a visible label. A placeholder disappears and cannot replace it. Explain required formats before a failure occurs.
After submission, identify the field, explain the correction and move focus to the error summary or first invalid control. Keep correctly entered values.
Expose component state through suitable semantics such as aria-expanded and aria-current. Escape should close a dialog, while the page behind it should not remain in the focus order.
Users must be able to pause an automatic carousel. Previous and next buttons need clear names, and slide changes should not steal focus.
Use adequately sized targets with space between adjacent actions. Do not require a swipe, drag or complex gesture as the only input. Provide ordinary controls.
The on-screen keyboard must not cover the active field, primary action or error message.
Allow password managers, paste and autofill. Avoid blocking them without a genuine security reason. If a CAPTCHA creates a barrier, offer an accessible alternative.
Verification codes should support autofill and paste instead of relying on memory.
An accessible website may still lead to an inaccessible PDF. Documents need headings, a correct reading order, tags, language, image alternatives and meaningful links.
When a document contains essential information, provide an HTML version as well.
Slow responses and layout shifts make interaction harder, particularly with magnification or motor and cognitive difficulties.
Use the guide on how to speed up a website and run the domain through the website speed test. Performance supports accessibility but does not replace it.
Inventory templates rather than testing random URLs. Include the homepage, service page, category, product page, search, form, cart, checkout, account and common documents.
Use four testing layers:
Record the URL, element, criterion, reproduction steps, impact, evidence, recommendation, owner and status.
Lighthouse, axe, WAVE and similar scanners identify missing names, some contrast issues and structural errors. They cannot judge whether button copy is clear, focus order makes sense, alt text is useful or checkout can actually be completed.
A clean automated report only means the scanner did not find a known machine-detectable issue.
| Priority | Example | Action |
|---|---|---|
| Critical | checkout or form cannot be completed by keyboard | fix before release |
| High | navigation is unreadable, focus invisible, error unexplained | include in the next sprint |
| Medium | inaccurate alt text or inconsistent headings | resolve at template level |
| Low | optional copy improvement without a blocker | add to the backlog |
Do not spend the first week polishing hundreds of isolated alt attributes while checkout remains inaccessible.
Define requirements before design: WCAG target, critical journeys, supported technology, contrast, keyboard behaviour, focus, forms, documents and acceptance testing.
Use the website technical specification guide to structure those requirements. Test reusable components in the design system instead of repairing the same control on forty pages.
An existing product may need a phased redesign of critical templates. BB STUDIO provides UI/UX design for structure, responsive layouts and component states, while website development turns those requirements into working code.
Accessibility works when it becomes part of ordinary product delivery. Designers review contrast and states, developers build correct semantics, editors write clear content and testers complete journeys using different input methods.
Start with the actions that create business value: search, enquiries, cart, checkout and login. For an audit or remediation plan, contact BB STUDIO.
Design & UI/UX
Design & UI/UX
Artificial Intelligence
Artificial Intelligence
Let’s create something amazing together 
