WCAG Accessibility Standards - Basics of What Everyone Must Know

Why Do Most Websites Unconsciously Exclude Millions of Users?

Imagine opening your favorite website and seeing nothing. Not because of a technical error — but because the designer who made it never thought about you.

That is the everyday reality for more than 2.2 billion people worldwide who have some form of visual impairment (WHO, 2023). In Serbia, according to data from the Center for Independent Living of Persons with Disabilities, as many as 11% of the population has some kind of disability — and a large part of them use the internet every day.

2.2B - people worldwide with visual impairment

11% - of Serbia's population with disabilities

8T$ - annual purchasing power of persons with disabilities

"As a UX/UI designer, I can tell you an unpleasant truth: most of the websites we designed are not accessible. Not because of malice — but because of ignorance."

What Are WCAG Standards and Why Should You Care?

WCAG (Web Content Accessibility Guidelines) are international standards developed by the W3C consortium. The currently active version is WCAG 2.2, and version 3.0 is in development.

Level A - Minimum requirements - without this, the site is unusable

Level AA ✅ Recommended standard - legal requirement in the EU and the USA

Level AAA - Highest level - the ideal goal for perfect accessibility

The four core WCAG principles are remembered through the acronym POUR:

P - Perceivable - Information presented in a way users can perceive

O - Operable - Interface functional for all users

U - Understandable - Content and navigation are clear and understandable

R - Robust - Content works with assistive technologies

7 Key WCAG Rules Every Designer Must Know

Rule 1: Color Contrast - The Most Commonly Ignored Problem

WCAG 2.2 requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text and UI components. Light gray text on a white background? A classic mistake — it looks "elegant," but for a person with low vision it is completely invisible.

For checking contrast, you can use the following tools:

• WebAIM Contrast Checker (free)

• Figma plugin "Contrast"

• Adobe Color Accessibility Tools

💡 Tip: always test the design in grayscale mode. If you can read everything without problems, the contrast is good.

Rule 2: Alternative Text for Images (Alt Text)

Screen readers do not "see" images. They read the alt text you write. Decorative images get an empty alt attribute — the screen reader skips them.

Bad: alt="image"

Good: alt="Woman using a laptop in a cafe, smiling, with a cup of coffee next to the keyboard"

Rule 3: Keyboard Navigation

For blind people, a mouse is not an option. They navigate exclusively with the keyboard (Tab, Shift+Tab, Enter, arrows).

How many times have you heard a client say: "Remove that ugly blue outline around the button"? That "ugly blue outline" is literally vital for millions of users.

WCAG 2.2 introduces a new criterion, 2.4.11 Focus Appearance — the focus indicator must have sufficient size and contrast.

Rule 4: Semantic HTML

Screen readers understand semantic HTML elements. The design you specify must be implemented semantically — buttons always as <button>, headings in hierarchy, forms with correctly associated <label> elements.

When specifying components in Figma, add notes about semantics. That is the difference between a designer who "paints screens" and a UX/UI expert who builds a product.

Rule 5: Text Size and Scaling

WCAG requires that text can be increased up to 200% without loss of content or functionality. Use rem units instead of px for fonts, and never set max-height on text containers without overflow: auto.

Rule 6: Forms and Error Messages

An error in a form for a blind user can be completely invisible if it is not implemented correctly.

"Form error" - generic, unhelpful

"The email address must contain the @ symbol. Example: name@domain.com" - specific and helpful

Rule 7: Animations and Motion

Beautiful animations can trigger vertigo attacks in people with vestibular disorders.

WCAG 2.3.3: users must have the option to turn off non-essential animations.

How to Test Accessibility as a Designer?

Automated testing

• axe DevTools(Chrome extension) - detects ~30-40% of errors

• Lighthouse in Chrome DevTools - free, provides an accessibility score

• WAVE(WebAIM) - visual overlay of errors on the site

Manual testing

• Turn off the mouse and navigate only with the keyboard

• Turn on VoiceOver (Mac/iOS) or NVDA (Windows, free) and listen to your site

• Set the monitor to grayscale and test the contrast

• Zoom the browser to 200% and check the layout

Common Myths About WCAG Accessibility

❌ MYTH - "Accessible design has to be ugly"

✅ FACT - Apple, Airbnb, GOV.UK - all are highly accessible and visually perfect.

❌ MYTH - "That is the developer's problem, not the designer's"

✅ FACT - 70% of accessibility is decided in the design phase. A poorly designed wireframe is hard to "fix" in code.

❌ MYTH -"Our site has no blind users"

✅ FACT - Analytics do not reliably detect screen reader users. They are invisible in the data — but they are there.

Practical Checklist

Before the final delivery, check:

Visual

Text contrast minimum 4.5:1 (AA) or 7:1 (AAA)

UI component contrast minimum 3:1

Focus indicator visible and clearly defined

Errors indicated with both text and icon (not just color)

Content

All images have alt text (or empty alt for decorative images)

Headings follow a logical hierarchy (H1 > H2 > H3)

Links describe the destination (not "click here")

Interaction

Entire interface accessible by keyboard

Modal windows have focus trap

Skip navigation link implemented

Animations respect prefers-reduced-motion

Forms

All fields have visible labels

Error messages are clear and associated with the field

Autocomplete attributes set

Accessibility Is Not Optional - It Is a Design Responsibility

Every time we ignore accessibility, we unconsciously tell part of the users: "This space is not for you." Start small — install axe DevTools, turn off the mouse for an hour, turn on VoiceOver, and open your site.

I guarantee you — that experience will forever change the way you design.