Accessibility First
WCAG 2.2 accessibility as a lived discipline
We treat accessibility as stewardship. Whether we are building new services or auditing legacy estates, we evidence every WCAG success criterion so compliance is provable, not promotional.
Evidence-based delivery
Traceable compliance matrices covering success criteria, user stories, screenshots, and assistive tech notes accompany every release.
Education before execution
Workshops, content style guides, and brown-bag sessions equip your team to maintain accessibility with confidence.
Give before we take
We publish playbooks and code examples openly so partners—and competitors—can raise their own standards.
What WCAG 2.2 covers
WCAG is organised into four principles—Perceivable, Operable, Understandable, Robust. Each principle branches into guidelines with testable success criteria at levels A, AA, and AAA. We align to AA while highlighting AAA opportunities.
- Perceivable: text alternatives, adaptable layouts, distinguishable contrast.
- Operable: keyboard access, adequate timing, seizure-safe motion, predictable focus.
- Understandable: readable copy, consistent navigation, error prevention and recovery.
- Robust: semantic HTML, accessible name/role/value, reliable interaction with assistive tech.
Landmarks and structure
<!-- Semantic landmarks keep screen reader navigation predictable -->
<body> <header aria-label="Main site header"> <nav aria-label="Primary navigation"> <ul> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main id="services" role="main"> <h1>Accessible Service Catalogue</h1> <p>Every engagement begins with understanding, not assumption.</p> </main> <footer> <p>Contact Akadata Limited — access for everyone.</p> </footer>
</body>Colour contrast motion
/* Tailwind example ensuring 4.5:1 contrast ratio */
.button-primary {
@apply bg-emerald-700 text-white hover:bg-emerald-800 focus-visible:ring-4 focus-visible:ring-emerald-300;
}
/* CSS custom properties + prefers-reduced-motion awareness */
:root {
--brand-emerald: #047857; /* Contrast tested in docs/wcag/guidelines */
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Focus management
// React + TypeScript example using layout primitives for structure
import { useEffect } from "react";
import { createPortal } from "react-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Flex, VStack } from "@/components/ui/layout";
type AccessibleModalProps = {
isOpen: boolean;
onClose: () => void;
children: React.ReactNode;
};
export const AccessibleModal = ({ isOpen, onClose, children }: AccessibleModalProps) => {
useEffect(() => {
if (!isOpen) {
return;
}
const previouslyFocused = document.activeElement as HTMLElement | null;
const firstFocusable = document.querySelector<HTMLElement>("[data-modal] button, [data-modal] a");
firstFocusable?.focus();
return () => previouslyFocused?.focus();
}, [isOpen]);
if (!isOpen) {
return null;
}
return createPortal(
<Flex
data-modal
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
className="fixed inset-0 items-center justify-center bg-black/50 p-4"
>
<Card role="document" className="w-full max-w-lg overflow-hidden shadow-xl">
<CardHeader>
<CardTitle id="modal-title">WCAG-aligned dialogue</CardTitle>
</CardHeader>
<CardContent>
<VStack align="start" gap="4">
{children}
<Button type="button" onClick={onClose}>
Close and restore focus
</Button>
</VStack>
</CardContent>
</Card>
</Flex>,
document.body
);
};Q&A
Accessibility questions we answer every day
Each revision builds on the previous, adding success criteria focussed on mobile, low vision, and cognitive access. We implement to WCAG 2.2 AA as a baseline, meeting all earlier requirements by default.
In the UK, Equality Act 2010 expects organisations to make reasonable adjustments. Meeting WCAG 2 AA is the accepted measure of due diligence across public, private, and charity sectors.
We combine automated tooling (axe, Pa11y, Lighthouse) with manual keyboard walks, screen reader passes (NVDA + VoiceOver), colour contrast audits, and usability feedback loops with real users whenever possible.
Yes. Accessibility is an ongoing practice. We prepare content playbooks covering plain language, heading hierarchy, alternative text writing, and multimedia captioning so the site stays compliant long after launch.
WCAG applies to downloadable resources. We create tagged PDFs, publish HTML equivalents like our DPIA template, and test with screen reader table navigation to ensure parity between file formats.
We embed accessibility linters in CI, schedule quarterly reviews, and maintain a change-log referencing affected success criteria. Regression alerts trigger remediation tasks before releases go live.
Inclusive design is more efficient than rework. When factored from day zero, costs align with standard delivery. Retrofits carry a premium — our audits quantify remediation so you can budget responsibly.
We test with screen readers, magnifiers, switch devices, and voice control, ensuring semantic HTML plus ARIA fallbacks align with WCAG techniques and WAI-ARIA Authoring Practices 1.2.
Knowledge base and proofs
Actions speak louder than words. These freely accessible resources keep the wider ecosystem honest and give your team a running start.
WCAG 2 Guidelines – Full Mirror
The entire WCAG 2 corpus is mirrored in this repository under docs/wcag for offline stewardship.
Open resourceUnderstanding WCAG
Explainers mapped to every success criterion, helping product teams interpret requirements without guesswork.
Open resourceTechniques for WCAG
Step-by-step techniques (HTML, CSS, scripting) for meeting each guideline, referenced during delivery reviews.
Open resourceAccessibility Change Log Template
Interactive template to log success criteria, evidence, owners, and regression risk across releases.
Open resource