Code an accessible icon with JavaScript

Veröffentlicht am: 04 September 2021
auf dem Kanal: Leanne R

1,226

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...

Auf dieser Seite können Sie das Online-Video Code an accessible icon with JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leanne R 04 September 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,226 Mal angesehen und es wurde von 36 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

6,505

317