Website Accessibility (WCAG): What a B2B Site Actually Needs to Fix
1. Who Will Actually Check: Regulations and Where They Apply
First, the boundaries:Data compliance covers how cookies and personal data are handled,Speed audits cover load performance. This article covers one thing only: whether everyone, including people using assistive technology, can read and operate your site’s content and interactions.
B2B companies rarely care about accessibility because they have “visually impaired customers.” They care for three more practical reasons: regulation, procurement, and usability. One table shows who will actually check.
| Trigger | Who it applies to | Specific requirements | Timeline |
|---|---|---|---|
| European Accessibility Act (EAA, 2019/882) | E-commerce and related services sold in the EU | References EN 301 549, whose technical core is WCAG 2.1 AA | New services must comply from June 28, 2025 |
| EU Public Procurement Directive (2014/24/EU) | Suppliers bidding on EU public projects | Technical specs cite EN 301 549, making accessibility part of bid evaluation | In force for years |
| US federal procurement (Section 508) | Vendors supplying US federal agencies | Requires a VPAT/ACR conformance report | Standing requirement |
| Enterprise vendor onboarding questionnaires | Approved vendor lists at leading buyers across industries | Questionnaires often include a “Do you meet WCAG 2.1 AA?” field | Comes up with each procurement cycle |
The version question is settled too: WCAG 2.2 was released in October 2023 and adds nine success criteria to 2.1, including focus appearance and target size, while EN 301 549 still references 2.1 AA. Writing “WCAG 2.1 AA” or “2.2 AA” in procurement and contracts both works, since the two overlap on more than 90% of fixes. Deciding whether you need this is simple: look at your customer profile. If you sell into the EU, bid on public contracts, or serve as a tier-one supplier to large enterprises, accessibility is a test you have to pass. If none of those apply, you can deprioritize it, but you still need to do the minimum set, covered in section 7.
2. The Four Principles: What the Problems Look Like
WCAG groups all requirements under four principles. Mapped to B2B websites, the common problems cluster tightly.
| Principle | Meaning | Most common on B2B sites |
|---|---|---|
| Perceivable | Information can be seen or heard | Product images have no alt text, light gray body text fails contrast, videos have no captions |
| Operable | Every feature works with a keyboard | Dropdown menus only open on hover, modals can’t be closed, focus is invisible |
| Understandable | Content and controls behave as expected | Forms have no labels, errors only say “submission failed,” page language isn’t declared |
| Robust | Assistive technology can parse it correctly | divs posing as buttons, heading levels jumping from h2 straight to h5 |
Here’s a real scenario: an overseas procurement manager asks a colleague to verify specs over the phone. The colleague uses a screen reader to read your product page and skips right past the spec images with no alt text — to them, that page doesn’t exist. Tools can catch missing images and poor contrast, but they can’t judge whether the alt text is accurate or whether the Tab order makes sense. That’s exactly why acceptance testing comes in three layers later on.
3. Five P0 Must-Fixes: All Solvable at the Template Level
Accessibility fixes for a B2B site start with just five priorities, all P0.
| Project | Test | Common mistakes |
|---|---|---|
| Form labels and error messages | Every input has a visible label; error messages are text and tied to the field; errors aren’t signaled by color alone | Placeholder text posing as a label; errors shown only once in a popup |
| Color contrast | Body text contrast ≥4.5:1; large text and UI controls ≥3:1 | Light gray #999 on white measures about 2.8:1 |
| Keyboard operable | Every feature reachable by Tab, in a logical order, with visible focus and no keyboard traps | Hover menus can’t be opened by keyboard; focus stays behind the page after a modal opens |
| Image alt text | Images that carry information get text alternatives; purely decorative images get empty alt text | No alt text on any image sitewide; or alt text like img_0342.jpg |
| Language declaration | The html lang attribute is set correctly for each language | A mixed Chinese-English site declares en across the board |
Here are the specific contrast thresholds, so designers can check them directly when revising.
| Content type | AA minimum | Common failures |
|---|---|---|
| Body text (under 24px) | 4.5:1 | White text on gray, semi-transparent watermark text |
| Large headings (≥24px or ≥18.5px bold) | 3:1 | Light brand text on a light background |
| Button borders and icons | 3:1 | Light-outline buttons |
| Disabled controls | No requirement | Light colors are fine, just don’t use them for key actions |
Of the five P0 items, four are template-level changes — fix the theme once and the whole site updates. That’s the fundamental reason accessibility is affordable for B2B sites. Forms directly affect whether you collect inquiries, so while you’re fixing labels and error messages, we suggest also reviewing the delivery checks in Form reliability— one change solves two problems.
4. P1 and P2: Recommended Fixes and Nice-to-Haves
Beyond P0 there are two more tiers, so you avoid the “all or nothing” extremes.
| Tier | Project | Test | When to do it |
|---|---|---|---|
| P1 | Focus styles | Focus outlines are visible with ≥3:1 contrast; global outline:none is banned | Do it while you’re editing the theme |
| P1 | Skip links | The first Tab stop on the page is “Skip to main content” | Long pages and sites with multi-level navigation |
| P1 | Heading hierarchy | One h1, no skipped levels | The same thing as semantic SEO |
| P1 | Link text | Makes sense out of context | Avoid “click here” everywhere |
| P2 | Target size | Clickable area ≥24×24 pixels (new in WCAG 2.2) | When adapting for mobile |
| P2 | Reduced motion | Respect the system’s prefers-reduced-motion setting | Sites with carousels and animations |
| P2 | ARIA details | Add state markers to accordions, tabs and similar components | Handle it when you swap component libraries |
P1 takes about 10–15 hours across the whole site, and most projects fold it into a theme redesign rather than treating it as a separate initiative. P2 is a simpler call: unless a component rework happens to be scheduled anyway, don’t start a project just for it. The worst mistake in accessibility work is treating P2 details as the main effort — the return on that time is nowhere near proportional.
5. Three common misconceptions
| Mistake | Why it’s wrong | The right way |
|---|---|---|
| Adding ARIA makes it accessible | ARIA patches gaps in native semantics, it doesn’t replace them; wrong ARIA is worse than none | Use native button, label, nav and similar elements first |
| Building buttons from divs with click handlers | The keyboard can’t trigger them, and screen readers don’t recognize them as buttons | Switch to a button element, keep the same styling |
| Passing automated tools means you’re done | Tools catch only about 30–40% of issues | Follow up with a keyboard walkthrough and a screen reader spot check before you call it done |
All three misconceptions come down to looking for a shortcut. The ARIA spec itself says “First rule: don’t use ARIA” — if a native element works, don’t pile on attributes. Div buttons are everywhere in B2B templates, especially when a whole card is clickable; the right approach is to put a real button inside. As for a perfect tool score, it only proves there are no basic errors. Whether alt text is appropriate, whether the Tab order matches the reading flow, whether error messages make sense to a human — machines can’t judge any of that. Someone has to walk through it.
6. How to run acceptance: automated scans, keyboard walkthroughs, screen reader spot checks
Acceptance has three layers, and skipping any one makes the conclusion unreliable.
| Layer | Tools and methods | Share of issues found | Time estimate |
|---|---|---|---|
| Automated scan | Run axe, WAVE and Lighthouse page by page | About 30–40% | Under 1 hour for the whole site |
| Keyboard walkthrough | Put the mouse away and complete the entire inquiry flow with Tab, Enter and Esc | The main way to catch interaction issues | About 1–2 hours for 5–8 pages |
| Screen reader spot check | Walk through part of a form with NVDA (Windows) or VoiceOver (macOS) | Semantics and prompt issues | About 1 hour |
Which pages to sample matters: home, one product detail page, an inquiry or contact form page, and one content page. These four cover over 80% of interaction scenarios on a B2B site. Beyond that, a page-by-page scan is enough; no need to audit every page. Keep your acceptance records on file: when a vendor onboarding questionnaire asks for a VPAT, you can rewrite the records into a conformance statement and submit it directly. If your team doesn’t have the hands for theme- and template-level changes, you can Contact Us assess based on the current state of the site.
7. Cost and effort, overlap with SEO, and when not to do it
Give the effort estimate first, then the judgment call.
| Work item | Effort estimate | Description |
|---|---|---|
| Template-level P0 fixes | 8–20 hours | Depends on the number of templates and how customized they are |
| Page-by-page P0 fixes | About 2x the template-level effort | Comes up when there are many custom landing pages |
| Site-wide P1 | 10–15 hours | Usually merged with a theme redesign |
| Three-tier acceptance | 3–5 hours | Includes organizing records and writing the conformance statement |
Accessibility and SEO overlap more than you’d think. Most projects get both done in one pass.
| Accessibility fix | Direct impact on SEO |
|---|---|
| Semantic heading hierarchy | The same task as optimizing site structure |
| Image alt text | Image search and accessibility share the same fix |
| Readable link text | Anchor text quality is itself a ranking signal |
| Page language declaration | Helps determine language regions |
| Mobile target size | Consistent with mobile usability |
When not to do it also needs to be clear: internal tool sites (users are controllable and can be trained) and purely domestic sites with no EU or public procurement customers and that have never been asked about it in a procurement questionnaire can do just the minimal three: forms have labels and text error messages, body text contrast meets the standard, and infographics have alt text. That’s half a day or less in total. When pushing accessibility fixes alongside a site rebuild, be careful not to overlap with structured data deployment and performance optimization,Structured Data which each have their own chapters. Schedule them in separate batches rather than mixing them together.
FAQ
Final thoughts
Accessibility isn’t charity decoration. It’s compliance documentation plus a usability safety net in the procurement chain. The right approach for B2B sites is tiered execution: fix the five P0 items at the template level, keep three-layer verification on file, fold P1 into a redesign, and don’t make P2 a standalone project. Most sites can get a conformance statement suitable for a vendor questionnaire within two weeks. That investment is worth the one minute it takes up in the procurement process.
One rule is enough to remember: fix templates before pages, walk the keyboard before trusting the scan.
