Learning About Wcag Compliance

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!