4 min read
The first three accessibility fixes on any site
A hundred-item audit never finishes. Contrast, the focus ring and a keyboard pass are measurable, and all three can be done in a week.
Furkan ÇolakDeveloper

On most projects accessibility starts as a hundred-item audit report, and nobody gets past the first ten items. Starting with three jobs works better, because all three are measurable and together they cover a large share of the people affected.
Contrast: the one design decision that gets measured
WCAG’s 1.4.3 criterion asks for a contrast ratio of at least 4.5:1 between normal text and its background. For large text the threshold drops to 3:1, and large text is defined as at least 18 point, or 14 point bold. Both are conditions of level AA.
That is a rare thing in a design conversation: a threshold that is closed to opinion. “This grey is a bit light” is a preference; “this grey measures 3.1:1 and the threshold is 4.5” is a measurement.
The places that fail are predictable: secondary text colours, placeholder text in form fields, white type on a pale button, and headings set over an image. The last is the most fragile, because the ratio changes when the image does.
Focus: the cursor for someone on a keyboard
The second job is making the focus ring visible. The browser draws a frame around whatever element you are on as you move through a page with the keyboard, and on a great many sites that frame is treated as visual noise and removed.
Removing it changes nothing for someone using a mouse. For someone using a keyboard it means turning off the cursor: they press tab, something happens on the page, and they cannot see where they are.
The right move is not to remove the ring but to write one that fits your design. A frame in the site’s palette, thick enough and clearly separated from the background, satisfies both sides.
Keyboard: end to end without a mouse
The third job is a test and takes ten minutes. Put the mouse down and move through the site using only tab, the arrow keys and enter.
Four things to look for. Can you reach every interactive element in turn? Does the order follow the visual layout on screen? Inside an open menu or dialog, can you stay in it and close it? And at the top of the page, is there a link that lets you skip the repeated navigation and jump to the content?
What fails this test most often is custom components. A standard button already works with a keyboard; a div made clickable does not. The fix is usually not more code but the right element.
How much automated tools see
All three of these can be partly scanned with automated tools, and knowing what “partly” means matters.
A browser extension computes contrast ratios, finds missing text alternatives, and shows you where the focus ring has been removed. What it cannot find is anything to do with meaning: an image with an alt attribute that does not describe the image, a tab order that technically works but zigzags across the page, an error message that appears on screen and is never announced.
So the tool gives you a starting list, not a sign-off.
Why start with these three
These three work because they can be finished. Contrast is an afternoon, the focus ring is a few lines, the keyboard pass is ten minutes and most of what it finds has a known fix.
A hundred-item report is a project. The team has to turn it into a separate piece of work, and that work joins a queue. A team that starts with three is on the fourth job by the second month, because the first three are done.
Recommended articles

Choosing a typeface and loading it on the page
Loading six cuts instead of three adds a few hundred kilobytes, and nobody can see the difference.

How to move a domain without taking email down
Address records and mail records live in the same zone and do entirely different jobs. A migration touches only one of them.

What hreflang links to what on a multilingual site
A set of hreflang annotations that is not reciprocal gets ignored entirely. Every page has to list itself as well.