Contrast From the Palette
Decided when colours are chosen, not corrected afterwards.
Accessible Website Design
Accessible Website Design Built In From the First Layout
An accessibility audit at the end of a project finds violations a tool can detect and fixes them individually. What it cannot fix is a keyboard order that makes no sense or a flow that loses focus, because those are structural. Accessible website design means making those decisions correctly while the design is still being made.
We Design It In Rather Than Test It After
Automated checks catch a minority of real accessibility problems. The rest are design decisions.
Keyboard Operation
Every interactive element reachable and operable, in a sensible order.
Visible Focus
Designed deliberately rather than removed because it looked untidy.
Semantic Structure
Headings as hierarchy, landmarks as landmarks, buttons as buttons.
Motion Respected
Animation reduced for anyone who has asked for that.
What accessible design is verified against
Accessibility is testable, which distinguishes it from most design questions. These are checks with defined pass conditions rather than matters of judgement — though automated tools catch only part of what matters.
Colour contrastText and interface components against their backgrounds
Colour independenceThat no meaning is conveyed by colour alone
Keyboard operabilityEvery interactive element reachable and usable without a mouse
Focus visibilityWhether the focused element is clearly indicated
Focus orderWhether tabbing follows the visual and logical order
Focus managementWhere focus moves when content opens, closes or changes
Heading structureOne H1, no skipped levels, headings describing sections
Alt textMeaningful images described, decorative ones marked empty
Form labellingEvery field programmatically associated with its label
Error identificationErrors announced, not only shown in colour
Motion preferenceWhether reduced-motion settings are respected
Applicable standardVALIDATION REQUIRED — varies by jurisdiction and organisation
Automated tools reliably find missing alt attributes, contrast failures and unlabelled fields. They cannot tell whether alt text describes the image, whether focus order makes sense, or whether a page is usable with a screen reader. The automated pass is the floor, not the result.
Accessibility, Explained
What Does Accessible Actually Mean?
Four practical requirements, none of which is exotic.
Discuss Accessibility →- 1
Perceivable
Sufficient contrast, text alternatives, content that survives being resized.
- 2
Operable
Usable by keyboard, with visible focus and adequate target sizes.
- 3
Understandable
Predictable navigation, clear labels, errors that explain the fix.
- 4
Robust
Semantic markup that assistive technology can interpret.
What Accessible Design Covers
Decisions made during design, verified by testing rather than discovered by it.
For regulated sectors, this pairs with healthcare and financial website design. Regulated sectors need this from the first layout — see healthcare website design and financial website design.
How We Build Accessibility In
Decisions during design; testing to confirm rather than to discover.
Set the Palette
Contrast established before anything is designed with it.
Plan Keyboard Flow
Order and focus as part of the layout.
Build Semantically
Real headings, real buttons, real landmarks.
Test With Assistive Tech
Keyboard and screen reader, on the actual build.
Document
So it survives future changes.
What makes accessibility urgent here
Every site benefits from being accessible. What varies is whether it is a requirement, a commercial constraint, or a matter of reaching the audience the business actually has.
Organisations with a legal obligation
Where a specific standard applies. Which one, and to whom, depends on jurisdiction, sector and organisation type, and should be confirmed rather than assumed — VALIDATION REQUIRED.
Businesses selling to public sector or enterprise
Where procurement asks for a conformance statement. Here accessibility is a commercial gate: failing it removes the business from consideration regardless of the rest of the proposal.
Services used by older or impaired audiences
Healthcare, financial services and anything essential, where the audience includes a high proportion of people with visual, motor or cognitive impairments. Inaccessibility excludes exactly the users the service exists for.
Sites that have received a complaint
Where a specific barrier has been reported. The immediate work is that barrier; the durable work is finding the others before they are reported too.
Teams building new interfaces
Where getting it right in the components is far cheaper than auditing every screen afterwards. This belongs in the design system rather than in a remediation pass.
Method
What Automated Checks Cannot Find
They are useful and they cover a minority of what matters.
What do the tools catch?
Missing alt attributes, insufficient contrast, unlabelled form fields, duplicate identifiers — mechanical failures with a definite answer.
These are worth catching and they are the easy half. A site can pass every automated check and remain difficult or impossible to use with a keyboard or a screen reader.
The tools cannot judge whether alt text is meaningful, whether a heading structure reflects the actual hierarchy, or whether a custom control announces its state.
Why is focus removed so often?
Because the browser default outline is visually plain, and it appears on mouse clicks as well as keyboard use, which designers read as a flaw.
Removing it makes the site unusable by keyboard: the user has no idea where they are. It is one of the most common and most damaging accessibility failures, and it is always deliberate.
The correct response is to design a focus style that fits the site rather than to remove it. It takes one rule and it is the difference between operable and not.
Automated testing finds a minority of real barriers
Accessibility tooling is genuinely useful and its limits are frequently misunderstood. It detects what can be determined mechanically: a missing alt attribute, insufficient contrast, a field with no associated label. Those are real failures and finding them cheaply is worth doing.
What it cannot assess is whether the result is usable. Alt text reading "image" passes the check and tells a listener nothing. A focus order that jumps around the page passes because focus exists. A form that announces "error" without saying which field passes because an error was announced.
This is why a clean automated report is a floor rather than a result. The checks that catch the barriers people actually hit are manual: operating the site by keyboard alone, and listening to it with a screen reader.
Keyboard operation is the fastest useful test
Putting the mouse aside and attempting the site's primary task with the keyboard alone finds more real problems in ten minutes than most audits find in a day. It requires no tooling and no expertise beyond patience.
The failures it exposes are consistent: elements that cannot be reached, focus that disappears with no visible indicator, menus that open but cannot be navigated, modals that trap focus or fail to move it, and custom controls built from non-interactive elements that keyboard users cannot activate at all.
Each of these blocks not only screen reader users but anyone who cannot use a pointing device reliably — including people with motor impairments, temporary injuries, and users of assistive hardware. It is the broadest single test available.
Building it in costs less than retrofitting
Accessibility applied screen by screen after the fact is expensive, inconsistent and perpetually behind, because every new interface repeats the same work and any lapse becomes a defect to be found individually.
Building it into shared components inverts the economics. Focus handling, keyboard operation, semantic markup, contrast-compliant tokens and correct labelling can be solved once and inherited everywhere, so teams produce accessible interfaces without each person needing to be an expert.
That does not cover everything — reading order, content structure and meaningful alternative text remain page-level decisions requiring judgement. But it removes the large category of repetitive, mechanical failures, which is most of what audits find, and it is why this belongs with the web design system rather than as a separate remediation project.
Questions, answered.
Accessible website design builds sites usable by people with disabilities — sufficient contrast, keyboard operation, visible focus, semantic structure and respected motion preferences — decided during design rather than audited afterwards.
No. Audits catch mechanical failures like contrast and missing labels. They do not fix keyboard order, focus management or heading hierarchy, because those are structural decisions.
They cover a minority of what matters. A site can pass every automated check and still be unusable with a keyboard or screen reader, which is why manual testing is part of the work.
Because a keyboard user then has no idea where they are on the page. It is one of the most damaging accessibility failures and it is always deliberate. Design a focus style instead of removing it.
Indirectly. Semantic structure, real headings and text alternatives help both. Treat accessibility as its own goal — the search benefit is a side effect, not the reason.
No. It catches contrast and missing labels and cannot judge whether a heading structure reflects the real hierarchy or whether a flow loses focus. Those are design decisions, which is why manual testing is part of the work.
That depends on your jurisdiction, sector and organisation type, and it should be confirmed rather than assumed — VALIDATION REQUIRED. Independently of the legal position, the practical case stands on its own: barriers exclude real users and, in many categories, remove the business from procurement consideration.
No. Overlay widgets do not fix the underlying markup, they are widely criticised by disabled users and accessibility practitioners, and they can interfere with the assistive technology people already use. They also do not remove legal exposure. The work has to happen in the site itself.
No. Contrast requirements constrain some colour pairings and nothing constrains layout, typography or personality. Most accessibility failures are technical rather than aesthetic — missing labels, unreachable controls, invisible focus — and none of those is a design compromise.
A useful amount. Run an automated checker to catch mechanical failures, then operate your primary task using only the keyboard. Those two together find most of the common barriers. What needs experience is screen reader testing and judging whether alternative text and focus order actually make sense.
Indirectly and genuinely. Proper heading structure, meaningful alt text, semantic markup and content that does not depend on interaction all help search engines interpret a page as well as helping assistive technology. It is not a ranking factor in itself, and the overlap in good practice is substantial.
Still deciding if accessible website design is right for you?
Talk to UsSomebody Removed the Outline
The browser draws a plain ring around whatever element has keyboard focus. It is not attractive, it appears on mouse clicks too, and on nearly every design review somebody asks for it to go.
It goes. One line of CSS, and the site looks tidier. It also becomes impossible to operate by keyboard, because there is no longer any indication of where you are.
It is the most consequential accessibility failure on the web and it is never an oversight. It is a design decision, made deliberately, by someone who did not know what the ring was for.
Free Accessibility Review
Find Out Where Your Site Excludes People
Send us your site. We will check contrast, keyboard operation and structure, and tell you what is mechanical and what is structural.
Claim Your Free Marketing Audit
Enhance Your Brand Potential At No Cost!
- Expect a response within 24 hours
- NDA available upon request
- Dedicated product specialists