I’m still here on my ongoing mission of coding accessibly. There is one HTML element that has become a huge stepping stone for me once I learned how to properly use it. That stepping stone was the button element. What? The button element? Why the heck do we need that? Well, if you’ve ever seen code like below, or have written code like this ( points to herself ), then this post is for you:
<!-- Have you written this for modal integration? --> <a href="#">I trigger a modal</a> <!-- Or how about for carousel navigation? --> <a href="#">Previous Slide</a> <a href="#">Next Slide</a> <!-- Or how about a show/reveal effect --> <div class="container"> <img src="images/some-image.jpg" alt=""/> <a href="#">Click for more!</a> <div class="more-content"> <p>Some more info is here!</p> </div> </div> <!-- There's something wrong with the above methods. --> <!-- We're going to go over what they are. :-) -->
To be honest, I’d been writing code like the above for years until I realized I was missing opportunities. I know other developers that also write code like the above. Why is this the case? Well, there have been some theories of ignorance and fear being the source. In my case, “semantics” was just one of those words that I didn’t come across in the beginning. I just wanted to build things that I could see. It was like trying to build a cabinet with a box full of tools without truly understanding the tools. Sure I can hammer in all the nails and call it a day. Or I can take the time to see what’s in the toolbox. Maybe I’ll find that a screwdriver might be a better tool for some areas of the end product then a hammer. In the end, using the right tools for the job will result in a higher quality product… or cabinet?
And semantics – what does that even mean? Take it from a gal who was thrown head first into web development from a fine arts degree and had to google words like “repository” during her first week. There’s so much lingo out there! Even now, as a more experienced dev, it makes my head spin. So let’s go over it all, shall we? How to use the button element and when it’s the right tool for the job.
10 Comments