Why you shouldn't use a div for everything - creating accessible buttons and navigations

I think it's important to highlight when we've made past mistakes and show the right way to do it when we find those mistakes.

🔗 Links

📚 Resources I used to help make this video:

⌚ Timestamps
00:00 - Introduction
00:29 - The mistake I made
01:18 - Why divs don’t make good buttons
03:10 - Fixing the styling of the button
03:48 - The second big mistake
05:20 - Adding extra context to our button
09:27 - Fixing up the CSS
10:47 - Updating the original jQuery to JavaScript
12:03 - Adding the aria-expanded to the JS
13:20 - Making improvements to the JS
18:38 - The next problem - removing the menu when it’s closed
19:31 - Why it’s important to do all this
20:49 - Toggling the display of the ul
23:29 - Fixing the animation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[RhayvenBlood]

As a blind developer, I just want to say I love your content and love your focus on accessibility ;__;

[KayinAngel]

I'd love to see more vids on accessibility - it's definitely the only area where I'm not very well versed in.

[cintrond]

Thank you so much for making this. I'm going to share this video with my team because you concisely captured years worth of "learning the hard way" in a short focused video.

[wickedwifestre]

As a developer at the beginning of my journey, I really appreciate you reminding us that everyone makes mistakes. I always learn so much from your videos but I especially appreciate how open you are about your process.

[tharsis]

I know, I know, pedantic JS time. That collapsed if statement for controlling the menu feels really wrong to me. I understand why you've done it like that that to a degree, but you could definitely get rid of the if(...); surrounds so that you just have 'isOpened ? closeMenu() : openMenu()'. To me, empty if blocks just make me feel...off, even if it does work perfectly fine.

Despite that minor bit, though, fantastic video! Excellent coverage on button and nav menu accessibility. The final bit of pedantry for me would be that maybe you could swap out <ul> for <menu>? Apparently <menu> might signify to accessibility tools that the <li>s within contain interactable content, unlike the information content of a <ul>, but I don't think any tools really care at the moment and according to the MDN it looks like they're both considered virtually identical by the browser. Still, could be something that might become more relevant in the future. Or not.

[yttos]

With all due respect, screw those people giving you push back on such amazing coverage. We're lucky to have you uploading such wonderfully full and robust content. I think we'd all appreciate you pointing out how to make sites more accessible. I think we all appreciate how you teach the right way, not the fast way.

[robrasti]

"It's our job to do it properly" is pretty much how I define my career of coming in to projects that are behind and broken and having to fix them. Thanks for all you do, it helps to know resources like you are out there to direct my developers to for some concise and well built coding examples.

[m_nasyr]

Mini-course about accessibility would be amazing!

[naveenramkumar]

I am pretty sure you don't need the if condition for the ternary operator.
so, instead of if(isOpened ? closeMenu() : openMenu())
It should just be isOpened ? closeMenu() : openMenu().

Also I think the closeMenu and openMenu should be the same function with an argument of the true/false
Let me know what you think

[ahuggingsam]

Really good to see people A) be willing to admit and address mistakes they make and B) take assistive technology seriously. I'm not good at assistive stuff, but I do care about it and a lot of it is pretty subtle imo, so it's really nice to see it being addressed like this.

[TheCRibe]

Owning up to your "mistakes" and showing why and how to fix them is the definition of a true top level humble dev. You should never be afraid to own up, great work on this video !

[onrgms]

Thank you for your great tips Kevin! BTW you don't need the "if()" block, 'cause you already used the "?" operator.

[stMusic]

I loved looking at the word 'butt' for 5 seconds there (2:46). Everyone makes mistakes sometimes, you just have to learn from them :)

[RideTheTeacups]

When you added your poll, I knew it was this one!!! Who hasn’t done that at some point?

My Senior Dev at my first job didn’t care about clickable divs, so I was off to a poor start. I eventually realized it was an issue, but I had a hard time properly evangelizing to the rest of the team.

After switching jobs, we’re now extremely a11y aware, and it’s incredible. Really thrilled to see you bringing awareness here! Thank you.

[Weeniehutnurse]

I just graduated college and your videos actually helped me get a job. I’ve been taking everything you say and right notes, and apply it to websites I make for my portfolio. I talk about it in my interviews and got a job as a remote full stack developer who focuses on front end! Thank you so much Kevin! I’ll continue watching your content, to continue learning!

[rychei]

I learned a LOT... Learning from mistakes and fixing them is probably more helpful than perfectly clean tutorials.

[thecoderabbi]

Kevin this is great! Going back to something you didn't do right and correcting it openly👍

[erichobbs]

I've seen you use these data and aria attribute selectors in your CSS before, and I feel like it's finally clicked for me as to why this is such a good idea. If I am reading the CSS, seeing that a style is applied when aria-expanded = opened, makes the intent and meaning of that style a lot clearer. Another side benefit of doing things properly.

[emilioclemente]

Amazing video! It helps knowing that even the best make mistakes and are constantly learning. I am not alone in this never ending but passionate walk

[katrinaaponte]

I love that you didn't just delete the video and pretend like it didn't exist. Instead, you took the time to make a whole new video explaining why it was a mistake, and how to correct it. Love your channel!