Welcome
Firstly, welcome to my first post with Substack. I've had an account for a while, as I considered how I would best use it. I decided with the release of Offcanvas Helper v1.1.4, (an extension for Blocs Website Builder) it would be worth discussing a new feature I added to the Accessibility options.
The option to create a button tag will convert a link being used to toggle your Offcanvas to a much more suitable button tag, while preserving any attributes and/or classes you have applied. But what does that mean?
A (very basic) regular link would look something like this…
<a href="some_url”>My Link</a>Where a (very basic) button would look like this...
<button>My Button</button>From a user perspective they appear to work the same, that is unless you are someone who uses assistive technology to help you access and navigate the internet. A link and button have different although similar purposes, and in many ways our dependency on no code/ low code apps has meant we really don't take care about how we build our websites - I am guilty here myself, and this is why I am now making big efforts to improve my knowledge and application of accessibility.
Page Builders
Page builders are excellent tools for Web designers and developers. I use several of these tools every day. They come with speed and help us build fantastic websites without needing to write code. But, they do tend to disconnect us with the way our website is being built under the hood as we focus more on the cosmetics.
No page builder is perfect. For instance, when adding a button to your website, the generated markup might not always be correct for the use case. Sometimes, what appears as a button might actually be a link dressed up with some fancy styling.
So what is the difference?
A link should be used for navigating to another page, or location on a page, a button should be used to trigger an action on the page.
Since in our case, we are talking about triggering an Offcanvas menu, our trigger element should be a button. In Bootstrap, an Offcanvas is basically a modal, and so opening an Offcanvas menu is an action on the page.
Let's break it down a little more to help us understand.
How They Act
Think of a link as a teleporter. Click on it, and it takes you somewhere else, like another webpage or a different spot on the same page. A button, however, is more like a magic wand. When you click it, something happens on your current page, like a form being sent, or a menu popping up.
What They Mean
Using a link or a button sends a message to your website and the person using it. It's like saying, "Hey, this is a teleporter" (for a link) or "Hey, this is a magic wand" (for a button). This is super important for our friends using screen readers, as it helps them understand what's going to happen when they interact with something.
How They Work with Keyboards
Links and buttons play differently with keyboards. You can 'click' a link by pressing the 'Enter' key. But with a button, you have two options: 'Enter' or 'Space'.
Conclusion
So, next time you're whipping up a website, whether you're crafting code by hand or using a handy page builder, take a moment to think. Will you be handing your users a teleporter (link) or a magic wand (button)? Your choice can make a world of difference in how people interact with your site and why I added this new feature into Offcanvas Helper.
By making these small but mighty decisions, we can make sure our websites do not just look great, but also super friendly and welcoming for everyone. And that's what the web's all about, right? A place for everyone to connect, share, and learn.
So, let's keep brushing up on our knowledge and making the web a better place, one link (or button) at a time. Happy building.
I never really thought about the differences between a button or link! Thanks for this thoughtful description of when to use either.
Great content Pete, thanks for sharing!