Iron Goo
Featured card for the Iron Goo guide on accessible, inclusive design as the same work as good UX for small businesses

Accessibility Is the Same Work as Good UX

Atamyrat Hangeldiyev
Atamyrat Hangeldiyev
Systems Architect
March 9, 2026
On this page
UX

I unplugged the mouse and tried to book an appointment on a regional clinic's site that everyone on the team called fine, and I got exactly as far as the date picker before the task died: Tab moved focus into the calendar, and then no key, not Tab, not arrows, not Escape, let it back out, so the only way to pick a date was a click I could no longer make. On a B2B distributor's quote form the next week, with a screen reader running, I submitted with a field left blank and the screen reader announced nothing, because the only signal that anything had gone wrong was a red border the software could not perceive. On a two-location retailer's product page, the screen reader read the control that adds an item to the cart as one word, "button", with no name, because it was an unlabeled icon.

Accessible, inclusive design is the practice of building a digital surface so that any person, including someone using only a keyboard, a screen reader, or low vision, can perceive it, operate it, and complete the task it exists for, in the context of small and mid-sized businesses building sites and AI-touched products with no in-house accessibility specialist. That is the whole definition, and the rest of this guide is the argument that it is not a separate project. It is the same work as good UX, done so that it holds for the people a careless build quietly excludes, and it is commercially and legally non-optional for a business your size whether or not anyone has told you so yet.

What accessible, inclusive design actually is for a small business

Accessible, inclusive design is not a layer you add to a finished site. It is a property the site either has or does not have, the same way a building either has a step at the only entrance or does not. For a small business, it means one concrete thing: a real person who cannot use a mouse, cannot see the screen, or cannot make out low-contrast text can still do the thing your site exists to let people do, book the appointment, get the quote, place the order, find the hours, without help and without giving up. If they can, the surface is accessible for that task. If they cannot, it is not, and no certificate, badge, or widget changes that fact.

The reason this matters to you specifically, an owner or operator with no design team and certainly no accessibility specialist, is that almost everything written about accessibility is written as if it were a compliance discipline with its own vocabulary, its own audits, and its own staff. It is not, for a business your size. It is the same craft as making the surface work well for anyone, applied with a little discipline about people the original build forgot.

Why it is the same work as good UX, not a compliance track running beside it

Good UX is a surface resolving the task for the person in front of it with the least friction. Accessibility is a surface resolving the task for a person whose way in is a keyboard or a screen reader instead of a pointer and a pair of eyes. Those are not two projects. They are the same sentence with the input device changed.

Look at what the three opening failures actually were. The keyboard trap in the clinic's date picker is a UX failure: a control that captures input and will not give it back is a bad control for everyone, it just happens to be fatal for a keyboard user and merely annoying for a mouse user who can click somewhere else. The quote form whose only error was a red border is a UX failure: an error a person has to notice on their own, with no words and no announcement, is a weak error for a sighted user squinting on a phone in bright sun and a complete dead end for a screen-reader user. The unlabeled cart button is a UX failure: a control whose purpose you have to infer from an icon is a worse control than one that says what it does, for everyone, and it is unusable for someone who cannot see the icon at all. None of these is a special accessibility defect bolted onto an otherwise good design. Each is ordinary bad UX whose cost lands hardest on the people most builds never test with.

This is why the framing of accessibility as a parallel compliance track is not just wrong, it is expensive. It tells a small team the work is separate from the product work, which means it gets a separate budget (usually none), a separate calendar (usually never), and a separate owner (usually no one). Treat it as what it is, the same work done so it holds for more people, and it fits inside the build you are already doing. The clinic did not need an accessibility project to fix the date picker. It needed a date control that takes keyboard focus and lets it go again, which is also just a better date control.

The same surface, two ways in: the mouse-and-screen user and the keyboard-and-screen-reader user

The clearest way to see that accessibility is the same work is to take one surface and walk it twice, once the way most of your team meets it and once the way a significant share of your customers do.

With a mouse and a screen

You land on the clinic's booking page. You see the form, you see the date field, you click it, a calendar opens, you click the day you want, you click through the time, you fill name and phone by clicking each field, you click submit. If you leave a field blank, you see a red outline appear, you notice it, you click back into the field and fix it. The whole thing takes a minute and nobody on the team ever flagged a problem, because everyone who tested it tested it exactly this way.

With a keyboard and a screen reader

You land on the same page. You press Tab to move through it. You reach the date field, press Tab again, and focus disappears into a calendar you cannot get out of with any key. You are stuck. Say you fix that one trap and try again: now you reach submit, press it with a field blank, and the screen reader says nothing, because the error is a colored border with no text and no announcement, so you have no idea the form rejected you or which field to fix. Same page. Same task. It cannot be completed.

These are not two audiences who want different things. They want the identical thing, the appointment booked, and they are defeated by the identical underlying defects, a control that traps input and an error that carries no perceivable signal. Fix the defects and both columns end the same way: task done. That is the entire thesis of this guide compressed into one comparison. You are not building a second, accessible version of the site. You are removing the defects that were always there, that one group could route around and the other could not.

Why an inaccessible surface is a cost you are already paying

An inaccessible surface is not a future risk you might incur. It is a present cost you are paying right now, quietly, in two currencies: customers who could not finish and walked away without telling you, and a legal exposure that is real and rising for businesses your size. Neither shows up as a line item, which is exactly why it is dangerous: the bill is being charged to an account you are not looking at.

The commercial reality: the customers and the revenue an inaccessible surface loses without telling you

A person who cannot complete your booking from a keyboard does not file a complaint. They leave. They go to the competitor whose form does work, and you never learn the visit happened, because a failed assistive-technology session looks identical in your analytics to someone who simply changed their mind. This is the part owners underestimate: the loss is invisible by construction. You are not getting angry emails about the trapped date picker. You are getting silence, which you read as no problem, when it is the most expensive possible problem, a customer who tried to give you money and physically could not.

The size of the reachable group is not a niche. A meaningful fraction of any adult customer base has a permanent disability that affects how they use the web, and that is before you count the much larger group with a temporary or situational limitation: the customer with a broken wrist using one hand, the one on a train with a cracked screen, the one whose aging eyes need larger text, the one in bright daylight where low-contrast gray on white is simply gone. Accessible design serves all of them with the same fixes. The honest way to size this is not a borrowed statistic. It is a question you can answer about your own business: of every hundred people who reach your most important task, how many can complete it if they cannot use a mouse, cannot see the screen, or cannot read faint text. If you do not know, the honest answer is that some unknown fraction of your traffic is failing silently, and on most untested SMB surfaces that fraction is not zero.

Silent, not noisy
How the loss shows up
Permanent plus situational
Who is affected
Same fixes serve all
What it costs to reach them

I am not going to hand you a fabricated number, because the most damaging thing I could do in a guide under my own name is invent a lawsuit count or a demand-letter percentage to scare you, and the honest case does not need one. Here is the honest case. Accessibility of commercial websites is treated by courts and regulators in major markets as a real legal obligation, not an aspiration, and enforcement against private businesses, including small ones, has been trending up, not down, for years. The pattern that matters for a business your size is not the rare headline lawsuit against a giant. It is the routine demand letter sent to ordinary small and mid-sized companies whose public sites fail basic checks, because those are cheap to identify at scale and cheap to pursue. A business with ten to two hundred people and a website that cannot be operated from a keyboard is not too small to be a target. It is the target profile.

What I will not do is quantify that into a false precision. I do not know how many letters go out, you should distrust anyone who tells you they do with a confident decimal, and the direction is what should drive your decision anyway: this is a known, enforced, rising exposure, the kind of risk you carry insurance against, not the kind you hope stays hypothetical. The cost asymmetry is the point. The fixes in this guide are mostly markup discipline a competent build already mostly does. The cost of being on the receiving end of a complaint, in legal time, settlement, and the emergency remediation you will be ordered to do anyway, is many times the cost of having done the work in the normal course. You are choosing between doing accessible work as routine engineering now or doing the same work later under a deadline set by someone else, with lawyers attached.

Why the overlay widget you were pitched does not retire either risk

If you run an SMB site you have almost certainly been pitched an accessibility overlay, a one-line script, often on a monthly fee, that promises to make your site compliant. The plain truth, stated here next to the risk because it is the single most common dead end a business your size is sold: an overlay does not touch the markup underneath, and the markup underneath is exactly what assistive technology and the law evaluate, so it retires neither the commercial loss nor the legal exposure. The full account of why, including that complaints have been brought against sites that had one installed, is in the disambiguation section below.

WCAG in plain English: four things a surface has to be

WCAG is the standard the rest of the world's accessibility law and tooling points at. You do not need its vocabulary and you should not let anyone bury you in conformance-level recitation as if memorizing "AA" were the work. Strip the jargon and the entire standard is built on four ordinary ideas. A surface has to be perceivable, operable, understandable, and resilient enough to keep working through the technology a real person reaches it with. That is it. Everything technical underneath is in service of those four plain requirements, and you can hold a team to all four without ever saying a success-criterion number out loud.

Perceivable: can a person, or their assistive technology, sense what is there

Perceivable means the information and controls are available to a sense the person can actually use. A photo of your storefront is perceivable to a sighted visitor and completely absent to a screen-reader user unless it has text describing it. A red border that means "this field is wrong" is perceivable to someone who can see color and gone for someone who cannot, or whose software does not convey color. Perceivable is the question: if I take away the sense your design assumed, sight, mostly, is the meaning still there in some other form.

The clinic's quote-form error fails here in the most basic way. The information "you left the phone number blank" existed in the designer's head and was encoded as a color. It was never encoded as text the page exposed, so for a screen-reader user the information was not merely hard to perceive, it did not exist on the surface at all. Making it perceivable is not adding an accessibility feature. It is making the page actually say the thing it was only implying.

Operable: can it be driven without a mouse

Operable means every action can be performed, not just seen. The classic operability failure is the one that opened this guide: a control you can see but cannot work without a pointing device. The clinic's date picker was perfectly perceivable, you could see the calendar fine, and completely inoperable from a keyboard, because focus went in and never came out and the days took no focus to begin with. Perceivable without operable is a display case: you can look at the task, you cannot do it.

Operability is where the keyboard is the honest test, and it costs you nothing to run. Put the mouse aside and try to complete your single most important task using only Tab, Shift+Tab, Enter, Space, and the arrow keys. If you cannot reach a control, or you reach it and cannot activate it, or focus gets stuck somewhere with no way out, that is an operability failure, and it is failing every keyboard and switch user right now, not hypothetically.

Understandable: is what happens predictable, and are errors explained

Understandable means the surface behaves the way a person can reasonably expect, and when something goes wrong it says what and how to fix it, in language a person can act on. A form that reorders itself as you type, a control that does something different each time, a submit that fails with no explanation: all understandable failures. The retailer's silent rejected form fails here as well as on perceivable, because even a person who somehow noticed the red border still was not told what was wrong or what to do.

There is a real and narrow boundary here. Whether the surface can perceivably signal that an error happened and which field it belongs to is accessibility, and it is owned here. The exact words of the message, whether the error reads "Phone number is required" or "Add a number we can reach you on", is microcopy, a craft of its own, and it is owned in full by the guide on UX writing and microcopy that converts. This guide makes sure the error is perceivable and correctly associated with its field. That guide makes the words good. Both matter and they are different jobs; do not let anyone collapse them, because a perfectly worded error that no screen reader announces still fails, and a perfectly announced error that says "Error 0x1" still fails.

Resilient: does it still work through the technology a person actually uses to reach it

This fourth idea means the surface keeps working through the real software people use to reach it: different browsers, screen readers, voice control, an old phone, the assistive technology your customer actually has, not the one your developer tested on once. It is largely a property of building on standard, semantic markup rather than a pile of custom widgets that only behave correctly in the one environment they were demoed in. A bespoke dropdown built out of generic elements and scripting may look identical to a standard one and fall apart the moment a screen reader or voice-control user touches it, because nothing in it tells the assistive technology what it is.

This is also the property that connects accessibility to machine legibility, argued in its own section below: a surface built on the elements every browser and assistive tool already understand keeps working across tools almost for free, while a surface of custom markup simulating those elements has to re-earn that resilience by hand, control by control, which small teams rarely have time to do.

The fixes a small team can actually ship this quarter

Here is the part you came for: the specific, high-impact fixes a small team with no specialist can ship without hiring anyone. There are seven. They are ordered by impact, the earlier ones retire the most failure for the least effort, and every one of them is the same work as making the surface better for everyone. None of them requires an accessibility consultant. All of them require a developer who is told to do them and a person willing to spend twenty minutes testing with the mouse unplugged.

1. Make every action reachable and usable from the keyboard, and never trap focus

This is the highest-impact fix because it retires the most total failure, and it is the one the opening scene died on. Every control that does something, every link, button, field, menu item, must be reachable with Tab, activatable with Enter or Space, and must let focus move on. Nothing may capture focus with no way out. The clinic's date picker failed exactly here: focus entered the calendar and no key released it, and the days took no focus, so the task was unreachable by keyboard even though it was perfectly visible.

The before/after is concrete. Before: a custom date widget built from generic clickable elements, no keyboard handling, focus trap on open. After: a date input a keyboard user can Tab to, type into or open, move within using arrow keys, and Tab away from, with Escape closing it. The test costs nothing: unplug the mouse, Tab through the whole task start to finish, and confirm you can reach, operate, and leave every control with no dead ends. If you can finish the task by keyboard, you have retired a large share of all real-world failures in one fix.

2. Make the focus state visible, so a keyboard user can see where they are

A keyboard user navigates by focus, the highlight that shows which control will respond to the next keystroke. If that highlight is invisible, often because someone removed the browser's default focus outline to make the design look cleaner, the keyboard user is driving blind: they can move, but they cannot see where they are, which is as good as not being able to move at all. This fix is small and constantly broken, because the default focus ring is frequently deleted on purpose for visual reasons and not replaced.

Before: focus outline removed globally for aesthetics, so tabbing through the page produces no visible indication of position. After: a clear, high-contrast focus style on every interactive element, visible against whatever it sits on, never suppressed. Test it on the same keyboard pass: if the focus highlight ever disappears, a keyboard user is lost there.

3. Get the contrast right, so the text is readable for real eyes in real light

Low-contrast text, light gray on white, thin type on a tinted background, is one of the most common and most casually shipped accessibility failures, and it is also just bad design for everyone, your sighted customer on a phone in daylight included. Contrast is the relationship between text color and its background. Below a sufficient ratio, the text is genuinely hard or impossible to read for people with low vision and merely annoying for everyone else, which is why it survives internal review: the people approving it can just about read it on a good monitor in a dim office.

Before: body text in a pale gray chosen because it looked elegant in the mockup, failing contrast against the white behind it. After: text dark enough to clear a sufficient contrast ratio against its actual background, in every state, including placeholder text and text over images. This one is checkable without unplugging anything: a contrast checker tells you in seconds whether a text-and-background pair passes. Fix the failures, especially in the places that carry the task: labels, errors, button text, the price, the hours.

4. Write alt text that carries the meaning, not the file name

Alt text is the text alternative a screen reader reads in place of an image. The rule is plain: if the image carries information or is itself a control, the alt text must carry that same information or name that control; if the image is purely decorative, it should be explicitly empty so the screen reader skips it rather than reading a filename. The common failures are both bad: no alt at all, so the screen reader announces a useless filename, or decorative images with verbose alt text that clutters the experience.

Before: the product photo on the retailer's page has alt text of its upload filename, and the decorative background flourishes each announce a long meaningless string. After: the product photo's alt names the product as a sighted shopper would understand it, and the decorative flourishes have empty alt so they vanish from the screen-reader experience entirely. The test: turn on a screen reader, or read the alt attributes directly, and ask of each image, does what is read tell a person who cannot see it what a sighted person gets from it, no more and no less.

5. Label every field and make the error perceivable, not just a red border

Every form field needs a real, programmatically associated label, not just placeholder text that vanishes the moment someone types, and not just visual proximity. And when a field is wrong, the error must be perceivable to assistive technology and tied to the field it belongs to, not conveyed by a red border alone. This is the fix that retires the distributor's silent-rejection failure, the one where a screen-reader user submitted, was rejected, and was told nothing.

Before: fields labeled only by placeholder text, errors shown only as a red outline with no text and no association, so a screen reader announces neither what the field is once it has content nor that anything is wrong. After: each field has a persistent associated label, and an invalid field announces, through assistive technology, that it is invalid and what is wrong, with the message associated to that field so the user is taken to the right place. (The perceivability and field association are this guide's job; the exact wording of the message belongs to the guide on UX writing and microcopy that converts, as drawn under "Understandable" above.)

6. Never carry meaning by color alone

If the only thing distinguishing a state is color, a required field marked solely by a red asterisk-colored label, an error shown only as a red border, a status conveyed only as a green or red dot, then anyone who cannot perceive that color cannot perceive that meaning, and color perception varies far more widely across your customer base than most teams assume. The fix is not to remove color. It is to never let color be the only carrier. Pair it with text, a shape, an icon with a name, anything a person who does not get the color still gets.

Before: form errors indicated by red border only; order status shown as a colored dot with no label. After: errors carry red and a text message and the field is marked invalid in the markup; status shows a colored dot and the word, "Shipped", "Delayed". Color still does its fast visual job for the people who see it. It is just no longer the only copy of the message. This fix overlaps fix 5 on purpose, because the red-border error is the single most common color-alone failure on SMB forms, and it is worth retiring from both angles.

7. Use real semantic structure: headings, landmarks, and named controls

Semantic structure means the page is built from elements that say what they are: a heading is marked as a heading, the main content is marked as the main region, navigation is marked as navigation, a button is a real button with a name, a list is a list. Assistive technology uses that structure to let a person understand and move through the page: jump by heading, skip to main content, know that the unnamed icon is in fact "Add to cart". A page built as one undifferentiated pile of generic containers gives assistive technology nothing to work with, and the user has to wade through everything linearly with no map.

One boundary, drawn the same way as the microcopy one above: expressing structure in honest semantic markup so assistive technology can perceive and operate it is this guide's job; deciding what the sections are, how navigation is organized, and what things are named belongs to the guide on information architecture and navigation for SMBs. That guide decides the structure; this fix makes whatever structure it decided perceivable and operable.

Key idea

The highest-impact-first test, in one rule: do the keyboard pass before anything else. Unplug the mouse and try to complete your single most important task using only the keyboard. Whatever stops you first is your highest-impact fix, because it is the one currently turning real customers away with no complaint. Fix the things that stop the task, in the order they stop it, before touching anything cosmetic. Keyboard first, then visible focus, then contrast, then the rest.

The same markup a screen reader needs is the markup an agent reads

There is a genuine, useful overlap between accessibility and machine legibility, and it is worth one honest section, no more.

Why semantic structure serves both the person on assistive tech and the agent acting for a person

The thing that makes a surface usable with a screen reader, honest semantic markup where every element says what it is and every control has a name and the structure is real, is largely the same material that makes the surface legible to an AI agent acting on a person's behalf. A screen reader and an agent are both software trying to understand a page they cannot see in order to act on it. Both succeed on the same evidence: real headings, named controls, marked-up regions, an honest structure, an error a machine can detect and associate. Both fail on the same defect: a pile of generic containers and unnamed icons that a sighted human can decode visually and software cannot decode at all. The unlabeled cart button that a screen reader announced as just "button" is the same button a modern model reading the page, a Claude model via the Claude API, an agent driven by Claude Code, cannot confidently identify as the thing to click to add the item. When you do the accessibility work, you are also, for free, producing the substrate machine legibility needs. That is not a coincidence. It is the same property, observed by two different kinds of reader.

Where this guide stops and the agent-as-user guide begins

That overlap is the whole of what this guide owns about agents: the semantic markup is shared substrate. It does not own the agent how, the stable affordances, predictable agent flows, and the specific task an agent must finish. That is its own deep discipline, owned in full by the guide on designing for AI agents as users. Do the seven fixes for the people who need them, know the same work makes the surface more legible to machines, and go there for the agent-specific craft.

Accessible design versus the things it gets confused with

Three things get sold or mistaken as accessibility that are not it. A small business with limited money and a real obligation cannot afford to spend either on a thing that wears the label and does not do the job, so each gets named plainly: what it is, what it is not, and why it does not retire the risk you have.

Accessible design vs an accessibility overlay or one-line "compliance" widget

An accessibility overlay is a third-party script you add to a page that promises to make the site compliant, usually for a recurring fee. Accessible design is the underlying surface being operable and perceivable. The difference is the entire point: the overlay sits on top of markup it does not change, and the markup it does not change is exactly what assistive technology and the law evaluate. The clinic's keyboard trap is in the date control's code; an overlay loaded over the page does not rewrite that code, so the trap survives. Worse, automated guesses an overlay injects, names for unnamed buttons, are often wrong, so the screen reader now confidently announces a wrong label instead of an honest blank. And complaints have been pursued against sites that had overlays installed, because the surface still failed when tested for real. An overlay is not a lightweight version of accessibility. It is a different thing that does not produce the outcome accessibility is measured by, and the only thing it reliably delivers is the monthly invoice.

Accessible design vs a one-off audit with no rebuild behind it

An accessibility audit is a report listing what is wrong. Accessible design is those things being made right. An audit is genuinely useful, but only as the first ten percent of the work, and a business your size gets sold the report as if it were the deliverable. A PDF listing forty-one violations on a surface no one then has the time or instruction to fix is not an accessible surface. It is a documented inaccessible surface, which is arguably a worse legal position than not having looked, because now there is a dated record that you knew. The distributor's silent quote form does not become perceivable because a scan flagged it. It becomes perceivable when someone changes the form so the error announces. Treat an audit as the to-do list for a rebuild you are committing to do, not as a thing you commission instead of doing the work. A finding with no fix behind it changes nothing about whether the customer can finish.

Accessible design vs visual-only "looks accessible" polish

Visual-only polish is making the surface look accessible, high-contrast colors, a clean readable typeface, a tidy layout, while the structure underneath is still keyboard-untraversable and unlabeled. Accessible design is the surface being operable and perceivable through assistive technology, not just appearing considerate to a sighted reviewer. This is the subtlest of the three because the polished surface genuinely is better in one real respect, contrast and legibility for sighted low-vision users, and that progress hides the rest. The retailer's product page could have beautiful contrast and a gorgeous layout and the cart button would still announce as "button", because the visual pass never touched the markup the screen reader reads. Looking accessible is not being operable. The keyboard pass and a screen-reader pass tell you which one you actually have, and a surface can pass the eye test and fail both.

What making the surface accessible changes around it

Making a surface accessible does not stay contained to the surface. It changes three things around it: how you think about your templates, how the team builds from now on, and where a resource-constrained owner points limited effort first.

How accessibility is a property of your templates, not a tag you add later

The seven fixes are not page-by-page patches. Almost all of them, the semantic structure, the focus styles, the labeled fields, the named controls, the contrast tokens, live in the templates and components your site is built from, not in individual pages. Fix the date component once and every page that uses it is fixed. Ship one component with no keyboard support and every page that uses it is broken, no matter how careful the page-level work was. Accessibility is a construction property of the component layer, the same way structural soundness is a property of how a building was framed, not of the paint.

This is the honest reason the deepest version of this work is a rebuild, not a retrofit, for many SMB surfaces. If the underlying templates were built without keyboard support, without semantic structure, as a pile of generic containers and custom widgets, you cannot reliably patch accessibility onto them page by page; you are fighting the foundation on every page forever. Rebuilding the surface so it is accessible by construction, semantic templates, real focus management, named controls built into the components, is engineering work most small businesses do not have the in-house team to do, and it is exactly the kind of foundational rebuild the Iron Goo Foundation service exists to do: not a widget added to a broken surface, the surface rebuilt so accessibility is a property of its construction rather than a tag someone keeps forgetting to add. Whether that is the right call is the impact-first test below; the structural fact is that for surfaces built wrong from the start, patching is the more expensive path, not the cheaper one.

How it changes the team's everyday build habit, not just one cleanup sprint

Accessibility done as a one-time sprint decays. The team fixes everything this quarter, and then over the next year ships new features, a new booking flow, a new filter, a redesigned form, and unless accessibility is part of how each of those is built, the surface is inaccessible again by the next annual scramble, because new inaccessible markup was added on top of the cleaned-up old markup. The fix that holds is making the keyboard pass and the seven checks part of the definition of done for every change, not a project that happens once. It is the same discipline the rest of this pillar argues for with research, with the conversion path, with the structure: the work holds when it is built in per change, and it rots when it is bolted on per year. A small team can carry this cheaply because the checks are fast, the keyboard pass on a new flow is twenty minutes, and twenty minutes per change beats a remediation sprint per year by a wide margin.

An impact-first test for where a small team points its limited effort, and when the honest answer is a rebuild

You have finite time and money and you want to know where to point them. The test is short and it is honest about when patching is not the answer.

  1. Run the keyboard pass on the one task that matters most

    Unplug the mouse and try to complete your single highest-value task using only the keyboard. Whatever stops you first is your number one fix. Do this before spending a cent.

  2. Fix the task-stoppers in the order they stop the task

    Work the seven fixes in impact order on the task path first: keyboard operability and focus traps, then visible focus, then contrast, then labels and perceivable errors, then alt text, then color-alone, then semantic structure. Fix the things that stop the task before anything cosmetic. A surface where the main task completes by keyboard is dramatically more accessible than one with pretty colors and a trapped form.

  3. Decide patch versus rebuild honestly

    If the keyboard pass fails at one or two specific components and the templates are otherwise sound, patch those components and you are most of the way there. If it fails everywhere, every control, no focus anywhere, nothing semantic, custom widgets throughout, that is not a patch job. The honest answer is that the surface was built on a foundation that cannot carry accessibility, and the cheaper long-run path is rebuilding it accessible by construction, not paying to fight the foundation on every page and every future change forever.

The mistake to avoid is spending your limited budget on the cosmetic layer because it is visible and reassuring while the task still cannot be completed by keyboard. Contrast tuning on a form a screen-reader user still cannot submit is effort spent where it does not retire the loss or the risk. Lead with the keyboard pass, fix what stops the task, and be honest with yourself about whether you are patching a sound surface or repainting a broken one.

A surface earns its outcome by resolving the task for whoever is driving it

The whole of this pillar rests on one idea: a surface earns its outcome by resolving the task for the person, or the software, in front of it. Accessibility is not a separate clause appended to that idea. It is the same idea, applied so it holds for the people a careless build silently excludes, the keyboard user, the screen-reader user, the customer in bright sun who cannot read faint gray text. The clinic's booking, the distributor's quote form, the retailer's cart all failed the same way every other UX failure in this pillar fails: the surface did not resolve the task for someone trying to do it. The only difference is that the someone here was using a keyboard or a screen reader, and most builds never check.

This connects directly to its neighbors. The same semantic markup that lets a screen reader announce your surface correctly is the substrate an agent reads, which is why the guide on designing for AI agents as users is the natural next read once you have done the accessibility work: you will have already produced most of what that surface needs, and that guide owns the agent-specific craft this one deliberately did not teach. The structure underneath is owned by the guide on information architecture and navigation for SMBs, and the exact words in every label and error are owned by the guide on UX writing and microcopy that converts. The rest of the UX pillar is the same argument from other angles, the person, the agent, the path, the words, the structure, all of it the same work of resolving the task.

Here is the single action to take when you close this guide, and it costs nothing but twenty minutes. Unplug your mouse and try to complete the one task your business most needs people to complete on your site, using only the keyboard. Whatever stops you first, that is the work, and it is the same work that makes the surface better for everyone who was already getting through. Do that one pass this week, before you read anything else or buy anything. The thing it surfaces is almost certainly costing you customers right now, in silence, and it is fixable by the team you already have.

Related in UX

Ready to move?

Send us a note about where your business is today. You'll get back a written assessment within two business days.

Talk to us