WCAG Web Design: Web Accessibility and WCAG 2.2 Compliance

WCAG (Web Content Accessibility Guidelines) is the international web accessibility standard published by the W3C, and the current recommended version is WCAG 2.2. "a11y" is shorthand for the word "accessibility": there are 11 letters between the first "a" and the last "y". Both point to the same goal: a website that everyone can use, including people with visual, hearing, motor or cognitive differences. If you build or design websites, WCAG 2.2 Level AA is the realistic target, and in some markets it is now a legal requirement; in Turkey, for example, Presidential Circular No. 2025/10 made WCAG 2.2 the technical standard for many organizations and e-commerce sites.

What does a11y mean, and why is it written that way?

In software it is common to shorten long words to their first and last letters with the number of letters in between. Just as "internationalization" becomes i18n and "localization" becomes l10n, "accessibility" becomes a11y. When a development team talks about an "a11y test" or an "a11y bug", they mean an accessibility test or issue.

Web accessibility is not only about people with permanent disabilities. Anyone with an arm in a cast, anyone looking at their phone in bright sunlight, anyone who finds small text harder to read with age, or anyone watching a video with the sound off benefits from accessible design.

What is WCAG, and which version applies?

WCAG consists of testable success criteria that a site must meet to be considered accessible. The versions are backward compatible: a site that meets 2.2 also largely meets the requirements of 2.1 and 2.0.

The new success criteria added in WCAG 2.2 are:

• 2.4.11 Focus Not Obscured (Minimum): An element that receives keyboard focus should not be completely hidden by content such as a sticky menu or a cookie banner.
• 2.5.7 Dragging Movements: Anything done by dragging should also be possible with a single click or tap.
• 2.5.8 Target Size (Minimum): Clickable targets should be at least 24 by 24 CSS pixels, or have enough spacing between them.
• 3.2.6 Consistent Help: If a contact or help link appears on several pages, it should appear in the same relative order and in a consistent way on each page.
• 3.3.7 Redundant Entry: Information already entered in the same process should not be requested from the user again.
• 3.3.8 Accessible Authentication (Minimum): Cognitive tests such as solving puzzles or memorizing should not be the only way to log in; pasting passwords and password managers should be allowed.

In addition, the old 4.1.1 Parsing criterion is treated as obsolete and removed in 2.2. WCAG 3.0, which is in progress, is still a draft as of 2026, and the W3C states plainly that it is not ready to be used for conformance. Targeting 2.2 is the right choice.

What are the four principles of WCAG?

WCAG is built on four principles, known by their initials as POUR.

• Perceivable: Information is presented in ways users can perceive: alt text on images, captions on videos, sufficient color contrast.
• Operable: The interface can be used in different ways: navigating with the keyboard alone, without a mouse; large enough click areas; the option to extend time limits.
• Understandable: Content and behavior are predictable: the page language is defined, form error messages are clear, and there are no unexpected redirects.
• Robust: Content works correctly with assistive technologies such as screen readers: the right HTML elements, and ARIA attributes used correctly where needed.

Levels A, AA and AAA: which should you target?

Each success criterion belongs to one of three levels. A covers the most basic requirements, AA is the level targeted in practice, and AAA adds requirements that are hard to meet for all content. For most corporate and e-commerce sites, the realistic target is WCAG 2.2 AA.

Color contrast is a good example. At Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. Fashionable choices such as light gray text on a light gray background often miss this threshold.

Is web accessibility mandatory?

It depends on where you operate. In Turkey, Presidential Circular No. 2025/10, published in Official Gazette No. 32933 on 21 June 2025, introduced accessibility obligations for websites and mobile apps. According to a statement by the Human Rights and Equality Institution of Türkiye:

• Organizations listed in the circular, such as public institutions, universities, municipalities, state-owned enterprises, banks, private hospitals and transport companies, were given one year to comply.
• Service providers engaged in e-commerce under Law No. 6563 were given two years.

Compliance is based on the Accessibility Checklist (Level A) published by the Ministry of Family and Social Services and on WCAG 2.2. According to the ministry, sites and apps found to be accessible may use an Accessibility Logo for two years, and organizations are expected to set up an internal review committee.

If you sell into the European Union, also follow the European Accessibility Act. According to the European Commission, it covers areas such as e-commerce, banking services and e-books.

What are the most common accessibility errors?

WebAIM's 2026 report, which examined the top one million home pages, found WCAG 2 failures detectable by automated tools on 95.9 percent of pages, with an average of 56.1 errors per page. The six most common errors were:

1. Low-contrast text (83.9 percent of pages)
2. Missing alternative text on images (53.1 percent)
3. Form fields without labels (51 percent)
4. Empty links (46.3 percent)
5. Empty buttons (30.6 percent)
6. Missing document language (13.5 percent)

The good news is that most of these errors can be prevented by following a few rules during design and development.

How do you test accessibility?

Testing happens on two levels, and one does not replace the other.

Automated scanning: Tools such as Lighthouse, axe or WAVE list errors like low contrast, missing alt text, unlabeled form fields and empty buttons within minutes. But they cannot judge whether alt text actually describes the image or whether the focus order makes sense.

Manual testing: Run these checks on every important page template:

1. Put the mouse aside and use only Tab, Shift+Tab, Enter and the space bar to work through the menu, forms and cart. Is focus visible at all times?
2. Zoom the browser to 200 percent. Is content cut off, or do you need to scroll horizontally?
3. Listen to the page with NVDA (Windows) or VoiceOver (macOS, iOS). Do buttons say what they do?
4. Fill in a form incorrectly. Is the error shown only in red, or is it also explained in text?

If possible, also get feedback from real users of assistive technology.

Is an accessibility overlay enough?

Plugins added to a page afterwards, offering buttons to enlarge text or change contrast, do not fix problems in the source code. An unlabeled form field or a menu that cannot be opened with the keyboard stays the same after the plugin is added. The lasting solution is to build accessibility into the design system and development process from the start: choose the color palette based on contrast ratios, build components with the right HTML elements, and run a short checklist before every release.

If you are planning a new site, we address accessibility from the start of our web design process. If you run an e-commerce site covered by these rules and want your current state assessed, you can contact us.