WCAG Accessibility Standards - Basics of What Everyone Must Know

Why Most Websites Unknowingly Exclude Millions of Users?

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

This is a daily reality for more than 2.2 billion people worldwide who have some form of vision 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 form of disability - and a large portion of them uses the internet every day.

2.2B - people worldwide with vision 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 one unpleasant truth: most of the websites we've designed are not accessible. It's not out of malice — but out 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 relevant 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 obligation in the EU and US

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

Remember the four basic principles of WCAG through the acronym POUR:

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

O - Operable - Interface functional for all users

U - Understandable - Content and navigation clear and comprehensible

R - Robust - Content works with assistive technologies

7 Key WCAG Rules Every Designer Must Know

Rule 1: Color Contrast - The Most Commonly Ignored Issue

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.

You can use the following tools to check contrast:

• WebAIM Contrast Checker (free)

• Figma plugin "Contrast"

• Adobe Color Accessibility Tools

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

Rule 2: Alternative Text for Images (Alt Text)

Screen readers do not "see" images. They read the alt text that you write. Decorative images get a blank alt attribute — screen readers skip them.

Bad: alt="image"

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

Rule 3: Keyboard Navigation

For blind individuals, a mouse isn't an option. They navigate exclusively by keyboard (Tab, Shift+Tab, Enter, arrows).

How many times have you heard from a client: "Remove that ugly blue line around the button"? That "ugly blue line" is critical 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 properly linked <label> elements.

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

Rule 5: Text Size and Scaling

WCAG requires that text can be enlarged 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 not implemented properly.

"Form error" - generic, unhelpful

"Email address must contain the @ sign. Example: name@domain.com" - specific and helpful

Rule 7: Animations and Motion

Nice animations can trigger dizziness for 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, gives accessibility score

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

Manual testing

• Disconnect the mouse and navigate only with the keyboard

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

• Set your monitor to grayscale and test the contrast

• Zoom the browser to 200% and check the layout

Common Myths About WCAG Accessibility

❌ MYTH - "Accessible design must be ugly"

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

❌ MYTH - "It's a developer's problem, not a designer's"

✅ FACT - 70% of accessibility decisions are made 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 final delivery check:

Visual

Text contrast at least 4.5:1 (AA) or 7:1 (AAA)

UI component contrast at least 3:1

Focus indicator visible and clearly defined

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

Content

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

Headings in logical hierarchy (H1 > H2 > H3)

Links describe the destination (not "click here")

Interaction

The entire interface is available via keyboard

Modal windows have focus trap

Skip navigation link implemented

Animations respect prefers-reduced-motion

Forms

All fields have visible labels

Error messages clear and associated with the field

Autocomplete attributes set

Accessibility is Not an Option - It Is a Designer's Responsibility

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

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