7 Resources to Improve Your HTML and Accessibility Skills
Learning these resources will make you a better developer by teaching you how to build inclusive websites and web apps.#webdev#HTML#a11y#codenewbieFebruary 1 · 2 min read
Some devs say HTML is easy, but it's not. HTML is complex, and the lack of time put into it makes the web harder to use for many people.
Do your users a favor and learn HTML.
Here is a list with 7 resources about HTML and Accessibility 👇
1. HTMHell
The htmhell.dev website has a "Hell" category with many bad practices with details and tips on how to fix them. These are all taken from real websites.
It also has a "Heaven" section with tips.
Follow them on Twitter! @htm_hell
2. inclusive-components.design
Quoting their website: "A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust, and accessible version of it."
3. Learn Forms! by @ChromiumDev
This is an entire course dedicated to HTML form fields. It covers the basics, testing, design, accessibility, localization, security, and more advanced stuff.
It also has mini quizzes at the end of each section!
4. Accessible Tables Tutorial
The @w3cdev has multiple tutorials about Web Accessibility, I went through this one the other day, and I learned a lot 🤯
Check it out: https://www.w3.org/WAI/tutorials/tables/
They also have Page Structure, Menus, Images, Forms, and Carousels tutorials.
5. The Best Accessibility Practices To Use Emojis on the Web
This article talks about how to use emojis on your websites and apps. The best part is that you can also apply the same practices for SVG and Font Icons.
P.S. I wrote this one 😛
https://horus.dev/blog/happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web
6. Responsive Images
This article by @MozDevNet teaches about the concept of responsive images. If you go through it, you'll learn to use features like srcset and the <picture> element to implement responsive images on your websites and apps.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
7. axe by @dequesystems
axe is tool to run accessibility checks against your website and components.
You can use it as a browser extension or include jest-axe or axe-core in your automated testing pipeline.
And that's it! HTML is a vital part of the web, and if you don't do it correctly, your websites may be a nightmare to use for some users.
If you learn HTML, you'll make better websites, and your users will be happier 🎉
This post was initially published as a Twitter thread, so make sure to follow me on Twitter if you don't want to miss any of the resources I share daily.
- 👨💻 My Twitter account: @HorusGoul
- 🧵 Thread: https://twitter.com/HorusGoul/status/1484556412655005698