Skip to content
NAFRUSoftware x Development
← Blog home

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

A strip of tactile paving running along a railway platform, ridged dark blocks beside yellow and red courses.
"Tactile paving on railway station in Zagreb" by Mnalis, CC BY-SA 4.0, via Wikimedia Commons. Cropped to 3:2.

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

( 00-09 ) CONTACT

Let's talk about what you are building and how NAFRU can help.

Let's start the conversation.