How to make an enterprise's corporate website accessible? Don't treat WCAG as a pre-launch checklist. These issues should be addressed during the design stage

Accessibility does not mean creating a "special mode" for a few people alone. Many of the requirements of WCAG 2.2 are essentially aimed at reducing the reading, operational and comprehension obstacles that all users will encounter.

01 WCAG 2.2 is not exclusive to government websites and large companies

Corporate websites often interpret accessibility as "we'll do it later when we go international" or "let the development team make up for it after going live". However, many issues, once they enter the visual and component systems, will cost more to address later: insufficient brand color contrast, buttons being too small, focus status being deleted, forms reporting errors only based on color, and horizontal overflow of layout when enlarged on mobile devices. None of these can be solved simply by adding a plugin.

As of 2026, WCAG 2.2 remains a W3C recommended standard. It adds new success standards such as unobstructed focus, drag-and-drop substitution, minimum target size, and accessible authentication on the basis of WCAG 2.1. For ordinary corporate websites, it is not necessary to memorize all the norms, but the design stage should at least cover the most common AA-level issues.

02 Color: Don't just check "It looks clear enough"

WCAG 2.2 version 1.4.3 requires a contrast ratio of at least 4.5:1 for ordinary text and at least 3:1 for large text. This threshold means that some light gray text that looks "very advanced" on a high-brightness screen may actually fail to reach AA.

Brand colors cannot be an exception either. The Logo itself has special exemptions, but the button text, navigation, body text, and form labels still need to be readable. It is best to define tokens such as text-primary, text-secondary, and on-brand that can be checked through comparison in advance when designing the system, rather than making temporary adjustments for each page.

03 Keyboard: The focus state cannot be deleted "for aesthetic purposes"

WCAG requires that the keyboard operable interface has a visible focus state. WCAG 2.2 also adds Focus Not Obscured, which requires that when an element gains keyboard focus, it should not be completely blocked by the content created by the author.

This is very important for the common Sticky Header, bottom floating consultation bar, and Cookie Banner nowadays. When a user presses the Tab button to move to the bottom of the page, if the focus is just covered by a fixed bar, visually, they won't know where they are operating. When designing, focus ring should be treated as a normal component state instead of developing the default style.

04 Touch: Small ICONS do not equal small click areas

The new Target Size (Minimum) AA standard of WCAG 2.2 requires that the pointer target be at least 24×24 CSS pixels, or meet the specified spacing and other exceptions. This value is the minimum requirement, not the optimal design size.

Common issues on the corporate website include: language switching with only one 14px small font, carousel arrows with only thin lines, close buttons close to the edge of the screen, and page numbers crowded together. Even if the visual ICONS are small, the transparent click container can be expanded to make the operable area more spacious.

05 The page should still be usable after being enlarged

The Reflow success standard of WCAG requires that in a viewport with an equivalent width of 320 CSS pixels, ordinary vertical content can be rearranged without losing information and functionality and avoid bidirectional scrolling, unless the content itself indeed requires a two-dimensional layout. The W3C interprets 320 CSS px as the equivalent width of a 1280px viewport at 400% scaling.

This reminds designers that responsiveness is not just about testing a few mobile phones. Desktop users may also zoom in on the page. Fixed-height modules, absolute positioning of large characters, forced no-line break navigation, and complex tables all need to take into account the behavior after magnification.

06 The form must ensure that errors are "understood" and cannot merely turn red

When there is an input error, only the border turns red, which is not friendly to users with color vision differences and cannot tell users exactly where they went wrong. A better approach is to provide clear text prompts simultaneously and programmatically associate the prompts with the corresponding fields. Form labels should not rely solely on placeholders either, as prompts will disappear after input.

Submission failure, verification code, required fields, and format requirements should all be made clear as much as possible before an error occurs. Barrier-free design is often the same thing as reducing form abandonment rates.

07 The information structure itself is also part of accessibility

WCAG has requirements for page titles, headings, Link purposes, etc. A common practice on corporate websites is that "all large characters are just visual text", and there is no correct H1/H2 hierarchy during development. Or multiple buttons all say "View More", and screen reader users get a string of indistinguishable links with the same name.

When delivering the design, it is necessary to simultaneously specify the title hierarchy, link semantics, whether the images are for decoration, and which images require alt text. These are not the "extra work" of the SEO team and the development team, but part of the content structure.

08 The motion effects should also allow users to reduce them

Large parallax, scrolling binding, auto-playing videos and continuous background animations may cause discomfort to some users and may also interfere with reading. When designing, system preferences such as prefers-reduced-motion should be taken into account to provide solutions for reducing or turning off non-essential motion effects.

Accessibility does not mean that visual creativity cannot be done; rather, it distinguishes between "dynamic effects that express the brand" and "information necessary to complete the task". When the animation effects are turned off, users should still be able to access the same core content and operational capabilities.

09 Conclusion: Write accessibility into the component instead of the live listing

The most effective approach is to establish compliant color, button, focus, form, link, pop-up and responsive rules in the design system in advance. In this way, each new page naturally inherits the correct foundation instead of being revised page by page before going live.

WCAG provides the minimum accessibility standard. A truly good corporate website should also continue to consider broad usability such as clear language, comfortable font size, information density, and loading performance. Accessibility does not mean sacrificing design; rather, it is about verifying whether the design holds true in a more realistic usage environment.

Frequently Asked Questions

What are the main differences between WCAG 2.2 and WCAG 2.1?

2.2 retains most of the requirements of 2.1 and adds success criteria such as focus, drag, target size, duplicate input, and authentication. At the same time, it removes the deprecated Parsing 4.1.1.

Must all buttons be 24×24 px?

WCAG 2.2AA 2.5.8 requires at least 24×24 CSS px, or exceptions such as the specified spacing/equivalent control. Important operations are usually recommended to be done on a larger scale.

Does a contrast ratio of 4.5:1 apply to all text?

Ordinary text is usually 4.5:1, while large text can be 3:1. The Logo and some non-event content are exceptions.

Can WCAG be accessed by using accessibility plugins?

No guarantee. Many issues belong to the structure, interaction, and content layers. Plugins cannot replace the correct HTML, component status, and testing.

Should a corporate website be rated AA or AAA?

Most projects will take AA as the actual goal and then raise some standards in accordance with industry, regional regulations and user demands. The specific legal obligations need to be confirmed in combination with the location of the business.