Code an accessible icon with JavaScript

Опубликовано: 04 Сентябрь 2021
на канале: 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...

На этой странице сайта вы можете посмотреть видео онлайн Code an accessible icon with JavaScript длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Leanne R 04 Сентябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 1,226 раз и оно понравилось 36 зрителям. Приятного просмотра!

6,505

317