Learn Accessibility - Full a11y Tutorial

Learn how to write accessible HTML by solving coding challenges. Click here to get to the challenges: scrimba.com/links/accessibility
This course is all about making the web a better place for everyone. You'll dive into what it truly means to build accessible websites and why it's so important.
Instructor and web developer Fredrik Ridderfalk will teach you the fundamentals of accessible development, like understanding contrast ratios, exploring the accessibility tree, getting familiar with WCAG levels, and much more. All while challenging you to get your hands on the keyboard so that you build up a11y muscle memory.
If you have any feedback to Fredrik, please reach out to him on X here: / ridderfalk
Follow Scrimba on KZbin for more tutorials: / scrimba
⭐️ Code ⭐️
Download the code via Scrimba: scrimba.com/links/learn-to-co...
⭐️ Contents ⭐️
⌨️ (0:00:00) Accessible Development Intro
⌨️ (0:01:32) Understanding web accessibility
⌨️ (0:06:09) Aside - Text contrast
⌨️ (0:10:02) Aside - Use of color
⌨️ (0:11:23) Text contrast
⌨️ (0:17:56) Aside - Alternative Text
⌨️ (0:25:13) Aside - Links
⌨️ (0:32:36) Links and alternative text
⌨️ (0:37:46) Aside - Labels
⌨️ (0:44:02) Aside - Radio Buttons
⌨️ (0:45:54) Labels
⌨️ (0:49:07) Semantic HTML
⌨️ (0:54:55) Lists
⌨️ (0:59:41) Text-size
⌨️ (1:03:06) Headings
⌨️ (1:06:01) ARIA
⌨️ (1:11:07) ARIA live regions
⌨️ (1:16:58) Aside - Skip Navigation Link Part 1
⌨️ (1:20:33) Aside - Skip Navigation Link Part 2
⌨️ (1:22:36) Skip Navigation Link
⌨️ (1:24:23) Final challenge part 1
⌨️ (1:27:27) Final challenge part 2
⌨️ (1:31:43) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@justawhisper4545]

Oh God, you read my thoughts.. This is what I want

[@ayushdey5494]

Lie

[@beemoore6578]

This makes me so happy, even as someone with disabilities, I have no idea where to start for others or myself 😅 once again thank you for this free education fr.

[@AlfonsoNeilJimenezCasallas]

Accessibility or A11y is one of the most required main features on web applications nowadays!

[@Sushovan_95]

Thanks for the course. ❤

[@ivangerginov5648]

Thank you for the great lesson! This teaching style is great, it was entertaining rather than exhausing.

[@l0gic23]

Lets go!! Been waiting for this one! Hope they cover the Draft WCAG 3 standard, plain language, and inclusive language.

[@AL3XXX1ZZ]

Inclusive language is against accessibility.

[@ratneshshukla1645]

Thank you @FredrikRidderfalk for creating such detailed examples of the accessibility videos 😊.

[@mahendranath2504]

Thank you so much, I'm so thankful to you because I would learn how all kinds of people would use websites for their convenient way

[@shivalkondwar]

I really liked this tutorial. It's just what I needed. Thanks for sharing it.

[@devT44]

Thank you. Really needed. Very helpful.

[@SuperOblivionfan]

Awesome video concept. Havent watched yet but excited to. Web accessibility just seems like an afterthought in most cases, which is just sad. A wheelchair ramp shouldnt be an afterthought in a building so why is it so often an afterthought on the web? Likewise in tutorials / learning materials it is an afterthought which may be why this attitude propagates. Thank you for making this :)

[@rafidhoda]

Yesssss 👏👏👏 awesome course that everyone needs to take : )

[@khalidelgazzar]

Looks like a grear crash course. Thank you!

[@ChristInGod]

Thank You sir❤

[@Mekebib]

Great Job!! Thank Very much You !!!

[@gamingbeast710]

Nice ❤

[@Enjoyablewalks]

Finally 🎉🎉

[@adisoftweb]

I'm interested is there any significant differences if we use the 'button' or 'input type->submit' element. And the second thing, what is the opinion if we when the page loads immediately set in focus: 'skip to main content'?

[@valikonen]

The presentation idea it's good but you repeat same ideas more then it's necessary

[@Wallrod]

t2s is t1e w3t t3d in t3h

[@archanab14]

1st comment 🎉

[@ef316]

Making the image smaller is a bad idea, since the problem would occur again on smaller devices. 14:19

[@AmeeliaK]

There will be a lot of demand for a11y in May 2025 😂

[@robotron1236]

This is so absurd. I don't hate gay people, but this stuff is getting out of hand. Just treat everyone like a normal person and stop with the pandering. Just teach. I want information, not a political brainwashing scheme.