Learn Accessibility - Full a11y Tutorial
Вставка
- Опубліковано 1 лип 2024
- 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 UA-cam 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
![Career Change to Code - The Complete Guide [Full Course for Aspiring Developers]](http://i.ytimg.com/vi/YdWkUdMxMvM/mqdefault.jpg)
![Career Change to Code - The Complete Guide [Full Course for Aspiring Developers]](/img/tr.png)
Accessibility or A11y is one of the most required main features on web applications nowadays!
Thank you @FredrikRidderfalk for creating such detailed examples of the accessibility videos 😊.
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.
Oh God, you read my thoughts.. This is what I want
Lie
Thanks for the course. ❤
I really liked this tutorial. It's just what I needed. Thanks for sharing it.
Thank you. Really needed. Very helpful.
Thank you for the great lesson! This teaching style is great, it was entertaining rather than exhausing.
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
Yesssss 👏👏👏 awesome course that everyone needs to take : )
Lets go!! Been waiting for this one!
Hope they cover the Draft WCAG 3 standard, plain language, and inclusive language.
Inclusive language is against accessibility.
Looks like a grear crash course. Thank you!
Thank You sir❤
Great Job!! Thank Very much You !!!
Nice ❤
Finally 🎉🎉
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 :)
Now I am confident 😁....
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'?
anybody else have problem with lighthouse form inspect, my scores ranges randomly, and i had to take the snapshot with accessibility to even get a score, i didn't get it out of hundread.
The presentation idea it's good but you repeat same ideas more then it's necessary
t2s is t1e w3t t3d in t3h
Making the image smaller is a bad idea, since the problem would occur again on smaller devices. 14:19
1st comment 🎉
There will be a lot of demand for a11y in May 2025 😂
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.