Learning notes about WCAG Compliance

#learningnotes #wcag #a11y #learning

In my entire carrier it was very rare situation when WCAG Compliance was a serious topic. Few years ago nobody care about it (my experience). Today it almost standard for serious pages and "must have".

I decided to learn more about WCAG and started some courses on Coursera.org.

The first course is WCAG Compliance: Web Accessibility Best Practices

Unfortunately, the course wasn't about coding with the WCAG rules but more about methodology how to audit, fix and introduce WCAG compliance into project.

But I was in the middle of the course when I realize it.

I decided to finish it anyway. I gathered some good tips and added a new certificate to my CV. It is only 4 hours, worth it.

Here are my #LearningNotes from this journey:

This is my summary of the course:

1. Understanding WCAG Principles

Explores the WCAG principles and success criteria for making content perceivable, operable, understandable, and robust - POUR
Emphasizes the importance of accessibility as an ongoing journey rather than a one-time project.

2. Conducting Accessibility Audits

Teaches how to run automated checks using tools like Wave, Lighthouse, and Axe, along with manual techniques to identify high-impact barriers.
Provides a structured compliance roadmap and breaks down tasks into achievable milestones for effective implementation.

3. Engaging Stakeholders and Continuous Improvement

Encourages hosting workshops to highlight the business and UX benefits of accessibility and assigning ownership for ongoing tasks.
Stresses the importance of staying updated on WCAG evolution and connecting with the accessibility community for shared insights and best practices.

WCAG Tools

WAVE – A browser extension that shows you WCAG errors directly on your page. Very visual and easy to use.
Lighthouse – Built into Chrome. It’s my go-to for a quick check on Performance, SEO, and Accessibility.
Axe-core – The engine behind many testing tools. You can use it for automated tests.
Accessibility Insights for Web – A powerful extension for deep manual checks.

Methodology

POUR Principles – A great way to understand WCAG. It stands for: Perceivable, Operable, Understandable, and Robust.

Frameworks & Guidelines

If you want to see how the big players do it, check out BBC GEL (Global Experience Language).

GEL Foundations – Solid guidance for developers on how to build accessible websites.
GEL Test Docs – Real-world test scenarios you can use in your own projects.
Official Guidelines – The complete philosophy of their design system.

Most Common Mistakes

Missing alt text – Images without descriptions are invisible to screen readers.
Low contrast – If the text color is too close to the background color, many people won't be able to read it.
Empty labels – Form inputs without tags. Screen readers need to know what the user should type.
Skipped heading levels – Jumping from <h1> straight to <h3>. It breaks the structure of the page.

Pro-tip

You don't have to test everything manually. You can add WCAG checks to your CI/CD pipeline (using tools like Axe-core) to catch bugs before they go live.

What is your favorite tool for accessibility? Let me know!