Accessibility is the cheapest points on the sheet

Accessibility gets discussed in our industry as either a legal risk or a moral obligation. Both framings are true and neither has been especially effective at changing behaviour, judging by the state of the average portfolio site.

So here is a third framing, aimed squarely at studios who want to win things: accessibility is a scored category, most of your competitors are failing it, and it is the least expensive column on the entire sheet to win.

WebDesignAwards.io lists Accessibility and Inclusivity as one of seven explicit criteria. Awwwards evaluates usability with accessibility considerations folded in. Every serious jury includes at least one person who will tab through your site, and that person's score does not average out — it drags your total below the threshold. A perfect visual score cannot rescue a submission that a judge could not operate with a keyboard.

The failures that show up in ten seconds

Judges do not run a full audit. They do a handful of quick checks, mostly unconsciously, and the same failures surface again and again.

The invisible focus ring. Somebody wrote outline: none in a reset file in 2019 and it has been copied into every project since. Tab into the site and there is no indication of where you are. This is the single most common accessibility failure on award-submitted work, and it takes one line of CSS to fix properly: a visible, high-contrast :focus-visible style that is part of the design language rather than an apology.

Contrast failure in the small type. The headline is black on white and passes easily. The metadata, the captions, the form hints and the footer are set in a light grey at 13px because it looked more refined in Figma. That grey fails WCAG AA, and it fails it for the text that carries the details. Check the smallest text on the page, not the biggest.

Text baked into images. Still surprisingly common in hero compositions. Invisible to screen readers, unselectable, blurry when scaled, and untranslatable. Almost always avoidable with web type.

Custom controls with no semantics. A div with a click handler is not a button. It is not focusable, it does not respond to the space bar, it announces nothing, and it does not appear in the list of interactive elements a screen reader user navigates by. Use the native element and style it. The native element has years of accessibility work already inside it.

Motion with no escape. Autoplaying parallax, scroll-linked animation and looping video are genuinely disabling for people with vestibular disorders. prefers-reduced-motion is a media query. Honouring it takes an hour, and honouring it properly — reducing the motion rather than switching the animation off and leaving the layout broken — takes maybe two.

The one-hour version

If you did nothing else before submitting, do these six things. Together they resolve the overwhelming majority of what a judge will notice.

• 01Unplug the mouse and traverse the entire site with the keyboard. Every link, every control, every form field, in a sensible order, with a visible focus indicator at all times. If you get trapped anywhere, that is a bug of the highest severity.
• 02Add a skip link. First focusable element on the page, hidden until focused, jumps to the main content. Fifteen minutes of work, and it signals competence to anyone who checks.
• 03Run an automated audit and fix everything it finds. Automated tools catch perhaps a third of real issues, but that third is entirely mechanical: missing alternative text, unlabelled inputs, contrast failures, missing document language, duplicate IDs. There is no excuse for leaving mechanical failures in place.
• 04Write real alternative text. Not the filename. Not "image". A short description of what the image communicates in context. Decorative images get an empty alt so screen readers skip them — that is a decision, not an omission.
• 05Check the heading outline. One h1. Logical descent with no skipped levels. Headings chosen for structure, not for the size they happen to render at. Screen reader users navigate by headings the way sighted users navigate by scanning.
• 06Honour reduced motion. One media query, applied globally, that shortens transitions and disables scroll-linked and looping animation.

Where it stops being a checklist

The list above is compliance. It gets you to a floor. The genuinely interesting work is in treating accessibility as a design constraint that improves the outcome rather than a tax on it.

High contrast is not a limitation; it is what makes stark monochrome work look decisive. Large, unambiguous type is not a concession; it is the most reliable way to make a page feel confident. Clear, descriptive link text is not merely a screen reader accommodation; it is better writing, and it scores in the content column too. A visible focus state, designed with the same care as a hover state, is a detail that a judge who tabs through your site will actively notice and reward.

The best accessible design does not look like accessible design. It looks like design where somebody made decisions on purpose.

Every accessibility requirement is a description of a good design decision that most people skipped.

The honest bit

We are not perfect at this. Nobody who ships regularly is. Automated tools miss things, manual testing has blind spots, and the only reliable audit is a person who actually uses assistive technology working through the site.

But there is a difference between a studio that misses a subtle issue in a complex component and a studio whose submission has no focus states, no alternative text and grey-on-grey body copy. The first is craft with a gap in it. The second is a studio that never checked.

Judges can tell the difference immediately, and so can everyone else.