hello@vantle.studio

← The Playbook · Chapter 23 · Speed and checks · 16 min read

Accessibility as conversion: the customers your page locks out

One in six people lives with a significant disability, and everyone is sometimes one-handed, tired or squinting at a phone in the sun. A page that works for them simply works better, and in more and more places, it is the law.

Ingrid runs a small physiotherapy practice and takes bookings through her website. One evening an email arrives from a man named Paul. He is blind, he uses a screen reader, and he wanted to book a back appointment.

His screen reader announced her booking button as “button”. Just that. The time slots were pictures with no description. The form fields had grey hint text instead of labels, which vanished the moment he started typing. After ten minutes he phoned a competitor across town, who booked him in two.

He was polite about it. He just thought she would want to know. She did, mostly because she had no idea. Her site looked perfectly fine.

Ingrid and Paul are imagined. The statistics, laws, cases and success criteria below are real.

The Vantle Playbook23

Who you are designing for

The World Health Organization estimates that 1.3 billion people experience significant disability: 16% of the world's population, or one in six of us. That includes people who are blind or have low vision, who are deaf or hard of hearing, who have motor impairments, and people with cognitive and learning disabilities. Many of them are online, and many have money to spend.

But the number undersells the reach. Microsoft's Inclusive Design guidebook introduced a tool called the Persona Spectrum: the same limitation can be permanent, temporary or situational.

The persona spectrum. Three figures share the same need, using a phone with one hand: a person with one arm (permanent), a person with an arm in a cast (temporary), and a new parent holding a baby (situational). PermanentTemporarySituational One armArm injuryNew parent Same need: everything must work with one hand.
Figure 1. The Persona Spectrum, redrawn from the examples in Microsoft's Inclusive Design toolkit. Original illustration. A design that works for the permanent case also serves the other two.

The same goes for vision (blind, cataract surgery, bright sunlight on a screen), hearing (deaf, an ear infection, a noisy train) and attention (a cognitive disability, a concussion, a toddler pulling at your sleeve). Microsoft's principle is “solve for one, extend to many”.

Disability advocates have a name for that extension: the curb-cut effect. In her 2017 essay in the Stanford Social Innovation Review, Angela Glover Blackwell tells how activists in Berkeley pushed the city to install its first official curb cut, on Telegraph Avenue, in 1972. The ramps were for wheelchair users. Then parents with strollers, workers with carts and travelers with luggage used them all day. She cites a study at a mall in Sarasota, Florida, in which nine out of ten pedestrians who were not pushing or carrying anything went out of their way to use a curb cut.

Captions, high contrast and big tap targets are the web's curb cuts. Built for some, used by everyone. A caveat worth keeping, though: critics point out that the spectrum can be misread as “a cast means you understand disability”. It does not. The point is to widen whom you design for, not to claim empathy cheaply.

The state of the web in 2026

Each year WebAIM, based at Utah State University, runs automated accessibility tests on the home pages of the top one million websites. The 2026 WebAIM Million report, based on February 2026 data, found:

95.9%of home pages had detectable WCAG 2 failures (94.8% in 2025)
56.1detected errors per home page on average, up from 51 a year earlier
96%of all detected errors fell into just six categories
Bar chart of the six most common WCAG failures on home pages in the 2026 WebAIM Million: low contrast text 83.9 percent, missing image alt text 53.1 percent, missing form input labels 51 percent, empty links 46.3 percent, empty buttons 30.6 percent, missing document language 13.5 percent. Low contrast text83.9% Missing image alt text53.1% Missing form labels51.0% Empty links46.3% Empty buttons30.6% Missing page language13.5% Share of the top one million home pages with each failure type
Figure 2. The six most common failures detected in the 2026 WebAIM Million (February 2026 data, one million home pages, tested with the WAVE engine). Bars drawn to scale.

Two things stand out. First, these are boring problems. Not exotic edge cases: grey text that is too faint, images with no description, form fields with no name, buttons that contain only an icon and so announce as nothing. Every one of them is fixable in an afternoon.

Second, an honest limit. Automated tools catch only some failures. WebAIM itself says that the absence of detected errors does not mean a page is accessible. Ingrid's site could have passed a scan and still failed Paul, because no robot can judge whether “image of a calendar” is a useful description of a time slot.

One more data point for those who like to bolt on fixes: pages using ARIA, the attributes meant to help screen readers, averaged 59.1 detected errors against 42 for pages without. WebAIM is careful to say this is a correlation, not proof that ARIA causes errors, since ARIA-heavy pages tend to be more complex. But it is a hint. Native HTML elements done right beat clever attributes done wrong.

The money argument, honestly

The most quoted business number in accessibility comes from the UK Click-Away Pound survey, run by Rick Williams and Steve Brownlow. Its 2019 edition reported that 69% of disabled people with access needs would click away from a website with barriers (71% in 2016), and estimated the spending that went elsewhere at £17.1 billion a year in the UK, up from £11.75 billion in 2016.

It is a striking figure, and it is worth knowing where it comes from. The report states that the survey was carried out entirely online and that participants were entirely self-selecting, recruited through disability organizations, social media and word of mouth. That means it describes people motivated to answer, not a random sample of the population. The £17.1 billion is a modeled estimate built on those answers, not a measured loss.

So use it as a signal of direction, not a forecast for your shop. What it does show convincingly is behavior that any business recognizes: people with a choice do not fight a hostile checkout. They leave, and they rarely send an email like Paul's.

The stronger business case is simpler and needs no survey. Low contrast, missing labels and tiny buttons make a page harder for everyone. Clear labels help every form (see Lead forms and enquiries). Contrast helps everyone on a phone outdoors. Large targets help every thumb (see Mobile and thumbs). Accessibility is not a separate audience bolted on; it is usability with the edges filled in.

Europe: the Accessibility Act

For businesses selling to consumers in the EU, accessibility stopped being optional on 28 June 2025.

Three details matter most to a small business.

The microenterprise exemption. Microenterprises providing services are exempt from the accessibility requirements (Art. 4(5)). A microenterprise means fewer than 10 employees and an annual turnover or annual balance sheet total not exceeding €2 million (Art. 3(23)). Both conditions together. A two-person studio is out; a twelve-person shop with €1.5 million turnover is in. Product manufacturers do not get the same blanket exemption.

What counts as “e-commerce services”. The Act covers selling to consumers at a distance through websites and apps. A brochure page that only describes a plumber's services and shows a phone number is not obviously one of the listed services. A site where consumers buy, book or subscribe online can be. Where your page sits is a question for your national authority or adviser, and it is worth asking before assuming you are outside.

The standard to aim for. The Act itself says “perceivable, operable, understandable and robust”, which are the four principles of WCAG. The technical reference in practice is the European standard EN 301 549. Its version 3.2.1 (2021) is built on WCAG 2.1 Level AA. In September 2026 a new version, EN 301 549 v4.1.1, was published with WCAG 2.2 and a mapping to the Act. According to the EU's AccessibleEU centre, it becomes the legal reference only once the Commission cites it in the Official Journal; until then v3.2.1 remains the reference. Practical advice: build to WCAG 2.2 AA now, and you satisfy both.

There are transition rules too. Service contracts agreed before 28 June 2025 may continue unchanged until they expire, but for no more than five years, and certain products already in use for services can be used until 28 June 2030 (Art. 32). There is also a “disproportionate burden” exception, but it has to be assessed and documented, not simply claimed (Art. 14).

Timeline of the European Accessibility Act: adopted in 2019; member states had to transpose it by 28 June 2022; it applies from 28 June 2025; EN 301 549 version 4.1.1 with WCAG 2.2 published September 2026; transitional period ends 28 June 2030. 2019Directiveadopted 28 Jun 2022National lawsdue 28 Jun 2025Applies tonew services Sep 2026EN 301 549v4.1.1 (WCAG 2.2) 28 Jun 2030Transitionends Dates from Directive (EU) 2019/882 Arts. 31–32 and AccessibleEU (Sept. 2026).
Figure 3. Key dates. The 2030 date covers transitional arrangements such as pre-existing service contracts (at most five years) and products already in use; new services had to comply from June 2025.

How two countries enforce it

The directive is implemented through national laws, so fines and authorities differ.

Germany transposed it as the Barrierefreiheitsstärkungsgesetz (BFSG). Under §37, offering or providing a non-compliant service can be fined up to €100,000; information failures, such as not providing required information properly, up to €10,000.

Hungary transposed it as Act XVII of 2022 (2022. évi XVII. törvény) on accessibility requirements for products and services, in force from 28 June 2025. It repeats the microenterprise definition and exemption for services (§2 point 28, §3(3)). The supervising authority, designated by Government Decree 605/2022, first consults with a non-compliant provider; if the provider does not cooperate or fix the problem in time, it imposes an administrative fine (§8).

Do this: if you have ten or more staff or more than €2 million turnover and you sell, book or subscribe online to consumers in the EU, put “accessibility statement and WCAG 2.2 AA audit” on this quarter's list.

The US: lawsuits and rules

The United States has no single web accessibility statute for private businesses. Instead, it has Title III of the Americans with Disabilities Act (1990), which bans disability discrimination by “places of public accommodation”, and a very active court system deciding what that means online.

The volume is real. Seyfarth Shaw, a law firm that tracks these filings, counted 3,117 federal lawsuits in 2025 alleging that websites were inaccessible to people with disabilities, up 27% from 2,452 in 2024. That was 36% of all 8,667 ADA Title III suits in federal court. Those numbers exclude state courts and demand letters, so the true total is higher. New York and Florida courts see the most cases.

The practical lesson is not panic. It is that the failures in these complaints are usually the same basic ones WebAIM finds everywhere: images without descriptions, unlabeled fields, controls a keyboard cannot reach.

For public bodies there is now a technical rule. In April 2024 the Department of Justice published a rule under ADA Title II requiring state and local governments to meet WCAG 2.1 Level AA. On 20 April 2026, it issued an interim final rule extending the deadlines by a year: to 26 April 2027 for entities serving 50,000 people or more, and 26 April 2028 for smaller ones and special districts. The standard itself did not change. If you build sites for a city, a school district or a public university, that is your spec.

Why overlays are not a fix

If you have searched for accessibility, you have seen the ads: add one line of JavaScript and an AI widget makes your site compliant. It is a tempting promise. Regulators have now looked at it.

The underlying problem is simple. A script that runs after your page loads can adjust colors and font sizes, but it cannot reliably know what your unlabeled icon means, what your photo shows, or how your custom dropdown should behave on a keyboard. Those are decisions that live in the HTML, so the fix lives there too.

Eight fixes with WCAG numbers

The Web Content Accessibility Guidelines are the shared rulebook. WCAG 2.2 became a W3C Recommendation on 5 October 2023 (updated December 2024). It added new success criteria and removed one obsolete one, 4.1.1 Parsing. Level A is the floor; Level AA is what the laws above point to. Here are the eight criteria that catch most of the problems on small-business pages.

Eight high-impact WCAG 2.2 success criteria
CriterionWhat it asksQuick fix
1.4.3 Contrast (Minimum)Level AAText contrast at least 4.5:1; large text (18 pt, or 14 pt bold) at least 3:1Darken light grey text; check with a contrast checker
1.1.1 Non-text ContentLevel AImages and icons that convey something have a text alternativeWrite alt that says what the image tells; alt="" for decoration
2.4.7 Focus VisibleLevel AAKeyboard users can see where they areNever remove outlines without a clear replacement
2.4.11 Focus Not Obscured (Minimum)Level AA, new in 2.2The focused element is not hidden by sticky headers, banners or chat bubblesAdd scroll-padding-top; keep cookie bars from covering focus
2.5.8 Target Size (Minimum)Level AA, new in 2.2Targets at least 24 × 24 CSS pixels, or spaced so a 24 px circle around each does not overlap othersPad small icons and links; space them out
3.3.2 Labels or InstructionsLevel AInputs have labels or instructionsA visible <label> for every field; placeholders are not labels
2.1.1 KeyboardLevel AEverything works with a keyboardUse <button> and <a href>, not clickable <div>s
1.3.1 Info and RelationshipsLevel AStructure shown visually is also in the codeReal headings (h1–h3) in order, real lists, labeled groups

Contrast: the most common failure

Light grey text on white looks elegant in a design file on a bright monitor. On a phone in daylight, or for anyone with low vision, it disappears.

Fails 1.4.3 · 2.6:1

Appointments available Monday to Saturday. Free parking behind the building.

Passes 1.4.3 · 5.1:1

Appointments available Monday to Saturday. Free parking behind the building.

Figure 4. The same grey family, two shades apart. Left: #a1a1a6 on white, about 2.6:1. Right: #6e6e73 on white, about 5.1:1, comfortably above the 4.5:1 minimum. Ratios computed with the WCAG formula.

For more on choosing colors that work, see Color and emotion and Typography that reads as quality.

Target size: the new rule for thumbs

Target size. On the left, three 16 pixel social icons packed tightly together; the 24 pixel circles drawn around them overlap, so they fail. On the right, the same icons with padding so each target is at least 24 pixels; they pass. Fails 2.5.8Passes 2.5.8 16 px icons, 2 px apart:the 24 px circles overlap Padded to a 24 px+ targetwith space between Drawn at 2× scale. Grey squares show the tappable area.
Figure 5. WCAG 2.2 criterion 2.5.8 asks for targets of at least 24 × 24 CSS pixels, or enough spacing that a 24-pixel circle centered on each small target does not touch another. Original illustration.

Labels, buttons and keyboards: try it

The two rows below look almost identical. One is built from generic <div> elements with click handlers, a common shortcut in page builders. The other uses real <button> elements with names. Click into the page just above the demo and press Tab.

Try it
Version A · clickable divs, icon without a name
Book
Version B · real buttons with names

Press Tab: focus jumps straight past Version A and lands on Version B, with a visible ring.

What a screen reader announces
Typical announcements; exact wording varies by screen reader and browser
ElementVersion AVersion B
Heart iconOften nothing, or “clickable”; not reachable by Tab“Save to favorites, button”
Book“Book” as plain text; not reachable by Tab; Enter does nothing“Book a back appointment, button”; Enter and Space both work

Version B costs nothing extra to build. That is the whole lesson of 2.1.1 and 1.1.1: use the element that already does the job, and give it a name.

Test it in fifteen minutes

You do not need a specialist for a first pass. You need a keyboard, two free tools and a little patience.

  • Unplug the mouse. Tab through your page from top to bottom. Can you see where you are at every step? Can you reach and use every link, button and form field? Can you close the cookie banner? Does focus ever disappear behind a sticky header?

  • Run WAVE or axe. WAVE (from WebAIM) and axe DevTools are free browser tools that flag contrast, missing alt text, missing labels and empty buttons. Fix everything red. Remember they only find a part of the problems.

  • Check contrast of your brand colors with the WebAIM contrast checker, especially gray body text and text on photos.

  • Zoom to 200%. Does text still fit, or do things overlap and cut off?

  • Listen once. Turn on VoiceOver (Mac, iPhone) or NVDA (free on Windows) and try to complete your main task with your eyes closed for two minutes. It is humbling and very fast at revealing unnamed buttons.

Then do the one thing no tool does: ask a disabled user. Paid testing with people who use assistive technology every day finds problems that checklists never will.

What to change tomorrow

  1. Fix contrast first

    It is the most common failure on the web and the easiest win. Body text at 4.5:1 or better, including on photos and buttons.

  2. Name every image and icon

    Useful alt text for informative images, alt="" for decorative ones, an aria-label or hidden text for icon-only buttons.

  3. Give every field a visible label

    Not just a placeholder. Then check error messages say what went wrong in words, not only in red.

  4. Replace clickable divs with buttons and links

    Then make sure focus outlines are visible and nothing sticky covers them.

  5. Make targets at least 24 pixels

    Especially social icons, close buttons and footer links. Bigger is better for primary actions.

  6. Use real headings in order

    One h1, then h2 sections. Screen reader users navigate by headings the way sighted users skim.

  7. Check the law that applies to you

    If you are in EAA scope, publish an accessibility statement describing how your service meets the requirements. If you sell in the US, budget for an audit before a demand letter does it for you.

Ingrid's fixes took two days with her developer: labels on the form, names on the buttons, real descriptions for the time slots, darker text. She wrote back to Paul. He booked. A month later she noticed her mobile booking rate had gone up too, which nobody had planned for. That is the curb cut again.

What the research supports

The scale of disability (WHO) and the prevalence of basic failures (WebAIM, automated tests on one million home pages) are well documented. The legal obligations in the EU and the US litigation volumes are matters of public record. The direct revenue effect of accessibility is less certain: the best-known figure, the Click-Away Pound, comes from a self-selected survey and a modeled estimate. The strongest argument is that the most common fixes are also general usability improvements with little downside.

Sources

  1. World Health Organization (2023). Disability and health, fact sheet, 7 March 2023. The 1.3 billion and 16% estimates.
  2. WebAIM (2026). The WebAIM Million: 2026 report. Failure rates, average errors, top six failure types, ARIA correlation and the limits of automated testing.
  3. Williams & Brownlow (2019). Click-Away Pound Survey 2019, full report PDF. Headline figures, comparison with 2016 and the self-selecting online methodology.
  4. Microsoft. Inclusive 101 guidebook, Inclusive Design toolkit. The Persona Spectrum and “solve for one, extend to many”.
  5. Blackwell, A. G. (2017). The Curb-Cut Effect. Stanford Social Innovation Review, Winter 2017. Berkeley 1972 history and the Sarasota observation.
  6. European Parliament and Council (2019). Directive (EU) 2019/882 on the accessibility requirements for products and services. Arts. 2, 3(23), 4(5), 13, 14, 30, 31, 32, Annexes I and V.
  7. AccessibleEU (2026). The European accessibility standard EN 301 549 has been updated, 7 September 2026. Status of v4.1.1 and v3.2.1.
  8. Germany. Barrierefreiheitsstärkungsgesetz (BFSG), §37 Bußgeldvorschriften. Fine levels.
  9. Hungary. 2022. évi XVII. törvény a termékekre és a szolgáltatásokra vonatkozó akadálymentességi követelményeknek való megfelelés általános szabályairól. §§2, 3, 8, 10.
  10. Robles v. Domino's Pizza, LLC, 913 F.3d 898 (9th Cir. 2019); Supreme Court docket No. 18-1539, certiorari denied 7 October 2019.
  11. Covelli, Launey & Vu, Seyfarth Shaw (2026). Federal Court Website Accessibility Lawsuit Filings Bounce Back in 2025. ADA Title III News & Insights, 25 March 2026. Counts and methodology.
  12. Covelli, Seyfarth Shaw (2026). DOJ Extends ADA Title II Website Accessibility Deadlines, 20 April 2026. Original 2024 rule and new compliance dates.
  13. Federal Trade Commission (2025). FTC Order Requires Online Marketer to Pay $1 Million… (3 January 2025) and final order approval (April 2025).
  14. W3C (2023, updated 2024). Web Content Accessibility Guidelines (WCAG) 2.2. Success criteria text and levels; Recommendation announcement, 5 October 2023.

Sources checked 18 October 2026. Legal sections are general information, not legal advice; obligations depend on your country, sector and size. Ingrid's practice and Paul are fictional; contrast ratios in Figure 4 were calculated for this article.

Want this applied to your page?

Vantle designs and codes custom landing pages for a fixed price, built on these rules. Five working days, two rounds of changes, no calls.

VantlePlaybookTipsPrivacyTerms

Order your page