WCAG is a large document and you do not need most of it on day one. A small number of criteria account for the overwhelming majority of real failures found in audits, and they are all fixable without redesigning anything.
Level AA requires 4.5:1 for normal text, 3:1 for large text (18.66px bold or 24px regular and above), and 3:1 for meaningful non-text elements — icons, input borders, chart segments, focus indicators. Pure white on the orange #ff5f1f gives about 3:1, which passes for a heading and fails for body copy. Check it before you commit to a palette, not after: contrast is the single most expensive thing to retrofit because it cascades into the whole visual design.
Placeholder text as a label is the classic contrast-plus-usability failure. Browsers render placeholders in grey that almost never meets 4.5:1, and the text vanishes as soon as the user types. Use a real <label>.
Tab through your page without touching the mouse. You should be able to reach every control, activate it with Enter or Space, and always see where you are. Three things break this: tabindex="-1" on something interactive, custom controls built from <div> that never received a tabindex="0" and key handlers, and CSS that removes the focus ring. If you dislike the default outline, replace it — never delete it:
:focus-visible {
outline: 3px solid #ff5f1f;
outline-offset: 2px;
}:focus-visible shows the ring for keyboard users and suppresses it for mouse clicks, which is the behaviour most designers actually wanted when they wrote outline: none.
A <button> is focusable, announces its role, fires on Enter and Space, and works with voice control — all for free. A <div onclick> gives you none of that and requires roughly fifteen lines of ARIA and key handling to approximate. The same applies to <a> for navigation, <label> for inputs, <table> with <th scope> for tabular data, and heading levels in order without skipping. ARIA is a repair tool; correct HTML means you need less of it.
Three cases. Informative image: describe the information, not the picture — "line chart, revenue up 40 percent since January" beats "chart". Decorative image: use alt="", which tells screen readers to skip it; omitting the attribute entirely makes some readers announce the filename. Image inside a link: the alt text becomes the link text, so it must describe the destination, not the graphic.
WCAG 2.2 (published October 2023) added a handful of criteria that catch modern interface patterns. Target Size (Minimum) requires interactive targets to be at least 24×24 CSS pixels or have equivalent spacing — which rules out the row of tiny icon buttons. Focus Not Obscured means a sticky header or cookie banner must not cover the element that just received focus, a failure you will find on most sites within four Tab presses. Dragging Movements requires a non-drag alternative for anything draggable. Accessible Authentication forbids requiring a cognitive test such as transcribing a code from memory, and specifically requires that password fields allow paste, since blocking paste breaks password managers.
Run axe DevTools or Lighthouse on every page. Automated tools reliably catch missing alt attributes, contrast failures, missing form labels, and invalid ARIA — which is a real but limited slice, commonly estimated at roughly a third of issues. They cannot tell you whether alt text is useful, whether focus order makes sense, or whether an error message is announced. For that, three manual passes cover most of it: tab through the page, zoom the browser to 200 percent and check nothing is cut off or requires horizontal scrolling, and turn on a screen reader (VoiceOver on macOS, NVDA on Windows) and try to complete one task.
Fix in this order: contrast, focus visibility, form labels, keyboard traps, heading structure. That sequence resolves most of what an audit will flag and most of what a real user will hit, and none of it requires permission from a designer.
Free tools, guides, and resources across the SPUNK13 network.
Visit spunk.bet400+ Free Tools