WCAG is hard to read and complicated and it puts a lot of developers off when talking about making their applications accessible.
In this series I am going to try and simplify things down and offer a different approach to WCAG that is hopefully more accessible!
This is one of 4 series I am writing this year, you can see the other series here:
This came about because whenever I start talking about accessibility I get the same responses:
- It is complicated
- WCAG makes no sense!
And you know what people are (kind of) right!
If WCAG was easier to understand I think more people would embrace accessibility!
And I am arrogant enough to believe that I am the one to solve this problem! 🤣
A complete run through of the WCAG "rules" and guidance covering:
- examples of code / markup,
- simplified explanations of the guidance and none of the "fluffy" stuff that causes confusion (where the W3 team attempt to accommodate rare edge cases)
- who it affects (user story and why it matters)
- who's responsibility it is in a team
To achieve this I will be using the following structure in each article:
- Introduction (what does this criterion cover / summary)
- Why is this criterion important
- user story
- relevant "temporary disabilities" such as broken arm, direct sunlight etc.
- Disability categories it impacts (cognitive, visual, hearing etc.)
- General UX improvements fixing this item brings
- Business Impact (for persuading business owners / stakeholders)
- How to test whether your site passes this criterion
- How to fix any problems
- General guidance
- Code examples (for web)
- Design examples (if this is visual, such as contrast)
- Exceptions to this criterion
- Additional Tips
- Tricks for long term consistency
- Conclusion and further reading
That should hopefully make the guides much easier to skim through to find what you need!
I want to be able to point people to an article when explaining an accessibility concept to them (especially as part of my ultimate UI series!).
Additionally I want to make accessibility more accessible (the irony!) so that more people embrace it.
Finally I am working to "get known" for accessibility within the industry for a product I am building, so this is a way to showcase my knowledge while hopefully helping the developer and designer communities!
All of the WCAG success criterion (including the WCAG 2.2 draft items).
It will also explain the conformance levels of A, AA and AAA and other terminology in the first episode of the series!
|Audio-only and Video-only (Prerecorded)||1.2.1||A|
|Audio Description or Media Alternative (Prerecorded)||1.2.3||A|
|Audio Description (Prerecorded)||1.2.5||AA|
|Sign Language (Prerecorded)||1.2.6||AAA|
|Extended Audio Description (Prerecorded)||1.2.7||AAA|
|Media Alternative (Prerecorded)||1.2.8||AAA|
|Info and Relationships||1.3.1||A|
|Identify Input Purpose||1.3.5||AA|
|Use of Color||1.4.1||A|
|Images of Text||1.4.5||AA|
|Low or No Background Audio||1.4.7||AAA|
|Images of Text (No Exception)||1.4.9||AAA|
|Content on Hover or Focus||1.4.13||AA|
|No Keyboard Trap||2.1.2||A|
|Keyboard (No Exception)||2.1.3||AAA|
|Character Key Shortcuts||2.1.4||A|
|Pause, Stop, Hide||2.2.2||A|
|Three Flashes or Below Threshold||2.3.1||A|
|Animation from Interactions||2.3.3||AAA|
|Link Purpose (In Context)||2.4.4||A|
|Headings and Labels||2.4.6||AA|
|Link Purpose (Link Only)||2.4.9||AAA|
|Focus Appearance (Minimum)||2.4.11||AA|
|Focus Appearance (Enhanced)||2.4.12||AAA|
|Page Break Navigation||2.4.13||A|
|Label in Name||2.5.3||A|
|Target Size (Enhanced)||2.5.5||AAA|
|Concurrent Input Mechanisms||2.5.6||AAA|
|Target Size (Minimum)||2.5.8||AA|
|Language of Page||3.1.1||A|
|Language of Parts||3.1.2||AA|
|Change on Request||3.2.5||AAA|
|Labels or Instructions||3.3.2||A|
|Error Prevention (Legal, Financial, Data)||3.3.4||AA|
|Error Prevention (All)||3.3.6||AAA|
|Accessible Authentication (No Exception)||3.3.8||AAA|
|Name, Role, Value||4.1.2||A|
As you can see that is quite a list!
First thing is first, you should bookmark this page as it will serve as the "index" for the series so you can quickly jump between articles (I will link to each article in the above table as they are released).
Then follow me on DEV.to if you don't already!
After that the only other thing you should do is follow me on Twitter as I will be releasing some bonus material over there and upping my Twitter game too this year!
I hope this series will get people, both beginners and seasoned pros, more interested in accessibility and help you improve your designs and code!
Plus if people come up with better ways to explain things it is always good to get community feedback so I can improve my articles!
I hope this series is useful for everyone and (fingers crossed) becomes a well known resource that helps us all fix the 97.4% of websites that have accessibility errors!