Code an accessible icon with JavaScript скачать в хорошем качестве

Code an accessible icon with JavaScript

In this video, I show you how to code an accessible like icon using HTML, CSS and JavaScript. I also demonstrate potential accessibility (a11y) problems with icons and how to fix them. 00:33 - Adding the icon to the HTML 01:42 - Styling the icon with CSS 02:33 - Making our icon clickable with a JavaScript event listener 03:05 - Toggling the filled and unfilled heart icon with a function 04:44 - Switching the icon color with our function 05:16 - Demonstrating accessibility problems with Voiceover screenreader 06:03 - Wrapping our icon in an HTML button 06:20 - Adding the correct button attributes 07:07 - Styling the button in our CSS 07:20 - Demonstrating our icon’s contrast problems with Chrome Developer Tools 08:24 - Adding an accessible hover and focus state 09:20 - Toggling the aria-checked attribute in our JavaScript 10:03 - Demonstrating what aria-checked does with Voiceover screenreader 10:34 - Moving the event listener from the icon to the button -- const me = { name: "Leanne 👩🏻", passions: ["coffee☕️", "code 💻", "cats 🐱"], unpopular_opinion: "LOVES CSS ❤️", favorite_colors: ["hotpink", "orangered"], channel_aim: "Show the world that CSS is fun and web development rules! 👑" } -- 🐤 Say hi on Twitter:   / rybaleanne   🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...