![Cover image for They...just...won't...learn 🤦♂️ - a button is a <button>! [Series: Accessibility Rants]](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fns5ehkmbdf6ome5crc3z.jpg)
Preword: Here we are with yet another on of my angry rants on Accessibility.
If you haven't seen these before, the anger is just for fun, but the message is important, I am not actually angry 😋.
If you aren't sure where I am being silly just ask, I know sarcasm doesn't always translate well in the written word!
Why should I use a <button>? A <div> works!
Works for what? Sure it might work with a mouse, but a lot of people with disabilities rely on a keyboard, and a <div> is not focusable.
Do you not care about people with disabilities?
Are you heartless?
Even an angry soul like me cares, so what is your excuse?
Obviously, you could add tabindex="0" to the <div> to make it focusable, but then you also need to add keyboard handlers for the Enter and Space keys (yes both, buttons work with space and enter!).
You also need to add focus indicators.
That all seems like a lot of work to me.
All of this can be solved with a <button>.
As an added bonus, it will even interpret Enter and Space as a click so you can just attach a click handler!
As a further super special bonus just for you, it also receives focus right out of the box! So you don't need extra tabindex attributes cluttering your beautiful HTML.
But wait...there's more!
As well as gaining focus right out of the box, it also has a focus indicator by default, as well as a hover state! (although I would probably add your own versions as they aren't great out of the box!)
So even if you forget to add them, someone else has already done the work for you.
I know all that, but native <button> elements are ugly, that is why I use a <div>.
Let me drag you into the 21st century.
You can remove all the styling from a native button element using this magical thing called CSS.
Then you can make it look however you want! Isn't that amazing!
I know CSS is complicated and scary (I mean, you can't write HTML so you don't have a chance with CSS) so let me help you with a quick <button> reset example.
A quick example
You don't even need a couple of the CSS properties I added below unless you are supporting IE9, but for the sake of 20 bytes you might as well have them.
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
color: inherit;
font: inherit;
line-height: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
A jsfiddle to showcase your new "styleless" button!
In the following jsfiddle you will see the <button> and the <div> look identical, but you can still press Tab and focus the button despite it not having tabindex="0"...shocking!
The button in that fiddle is essentially a <div> now, but with magical powers!
You can then apply all the same styles that you would have done with a <div>...jackpot!
Obviously if you have been using a <div> in place of a <button> you probably need a reminder to make sure you set styles for :focus and :hover states too. I just reminded you, go do it now!
Yeah don't worry, I know not to use a <div>, I use a <a href="#" instead so it has focus states!
I can sum up my reaction to that statement in one simple emoji:
🤦♂️
In some ways this is even worse, you already know that a <div> is not semantically correct and doesn't allow keyboard focus, why on Earth would you then think "I will use a hyperlink". I think it deserves a second facepalm...🤦♀️
This pattern is from 2008 people! It was necessary back in a dark time when we had IE7 and IE8 to contend with, a time when we only had HTML 4 and buttons couldn't be styled properly. Those days are behind us now! Rejoice in the wonderful world of HTML5!
But How do I know when to use an anchor and when to use a button? I hear you ask!
If you remember one thing remember this: "A hyperlink (<a>) changes the URL".
It is essentially that simple, should I use a hyperlink or a button here?
Simply ask yourself "does it change the URL"?
-
Yes - use an anchor with a valid
href-<a href="an-actual-url-not-javascript-void-and-not-a-lone-hash"> -
No - use a
<button>.
Don't forget, you can still run some JavaScript before changing the URL, you can even use AJAX to load the new page in, but navigation (a URL change) means an anchor, otherwise use a <button>.
I know a lot of you will now be saying "but what about X scenario"...you are wrong (probably, there is one use case I can think of...).
But that rule doesn't always work now, does it?
Oh, you are a smart one aren't you?
You know about the Achilles heel in my argument...you ask "What about a no JavaScript fall-back?"
Yup you are right, they are few and far between but they are valid. But notice that in any of those scenarios href="#" would not be valid as it wouldn't fall back to anything!
For example, the following is an acceptable pattern for something like a button that opens an off-canvas menu on mobile, but has a sitemap as the fall-back for when JS fails:
<a href="https://yoursite.com/sitemap" role="button" class="button">Menu</a>
But you should add the role="button" with JavaScript.
That way if there is no JavaScript (for example when a JS file request fails) it is still just a valid hyperlink as far as a screen reader is concerned.
When JS works (99% of the time) it will receive role="button" and should be treated as a button and it all makes sense again.
Yet again I will repeat: for this pattern to work the URL should be a valid fall-back URL.
Oh and don't forget, you should also add an event handler for Space as a button works with Space and Enter if you do this (hyperlinks only work with Enter)!
If none of that made sense to you don't worry, I will do an actual (non-angry man rant) full article on this in the future that explains it all properly.
Why do we still have this problem?
Old tutorials New tutorials and libraries based on old and out-dated tutorials based on even older tutorials.
There are at least 3 articles currently in my feed with this exact problem (what do you think sent me into grumpy mode?!)
So if you are writing tutorials....learn HTML...it is really easy!
And if you can't learn HTML...find another profession!
Yes, even not angry me thinks this, you have no place building anything front-end website wise if you can't learn HTML.
It is the easiest thing to learn in front-end web development.
If you are a code newbie and want to build things for the web, learn HTML first, you will be light years ahead of the competition in only a couple of days!
Let's start calling people out!
Yes, I am advocating bullying. But nice bullying!
Any time you see someone use <a href="#" as a <button>, tell them they are a noob and show them the light. (don't tell them they are a noob, that is the angry man talking! Just lead them into the welcoming arms of semantic HTML).
Any time you see <div class="button" - cringe, draw a deep breath and tell them the error of their ways.
OK but what could I possibly say?
You know what, I will make it easy for you, just copy paste this into the comments section under their article:
Great article but please can you use
<button>elements for buttons.It makes the page more accessible for people who rely on assistive technology (generally people with disabilities).
As an added bonus it makes life easier for you as a developer!
Every article where we don't use semantic HTML means code newbies learn bad habits (as we all start with the "copy paste" phase, the best way to learn / get things done!) who then create websites that result in more people being excluded in this world.
Those same code newbies then have to unlearn bad habits you taught them once they start learning about accessibility. You are making things more difficult for them.
97.4% of websites have accessibility errors.
I am sure, given the rest of the article being so great, that you don't want to contribute to that problem."
Optional extra paragraph and GIF for particularly bad offenders or repeat offenders
"Oh and if you don't fix the article, the angry accessibility rant guy @InHuOfficial may pay your website a visit. You don't want that..."
(and before you ask, I am definitely not cool enough to justify comparing myself to John Wick! But this is my article so let me have my little fantasies, they ease the angry man syndrome you know!)
End rant
Once again this is mostly for fun, the message is important though, use semantic elements and make the web a better place for everyone!
If you are writing on dev.to or other sites be especially careful with any mark-up you release (that isn't meant to be "just for fun"), the impact is more significant than you think!
And on a serious note, if you think you have a scenario where you need to use an anchor as a button, mention it in the comments, it may be a valid use case I haven't come across or it may be that a decision elsewhere is "forcing your hand" to use the incorrect element. It would be great to explore that together!
For the Algo!
My new sign off experiment!
If you enjoyed this article, give it a ❤, if you thought it was special give it a 🦄 and above all, don't forget:
Leave a comment for the algorithm! (even if it is just to tell me to stop being so angry 😉!)
Top comments (53)
I'm enjoying these rants very much, thanks for writing them.
The only part I disagree with is "unless you are supporting IE9, but for the sake of 20 bytes you might as well have them".
IE should not be supported, not even if it is as easy as 20 bytes. It would be better to spend extra time and effort implementing a notification telling IE uses to switch to a modern browser than it would supporting IE in any way. IE should be killed, with fire if possible.
The problem, when we are talking about accessibility, is that a lot of users still rely on IE.
We recently made the decision to drop support for IE9 and 10 as usage for screen reader users is now below 1% but IE11 - still has over 10% of the screen reader market.
There are multiple reasons for this but one is compatibility with old screen reader software.
A lot of people who use a screen reader get used to a particular assistive device and the way it works, so switching from JAWS to NVDA is not a straight forward decision. (look at Stephen Hawking's voice - he could easily have had a better voice as technology advanced, but he liked it, he was used to it, it was part of his identity etc.)
Because of the cost of JAWS (£699 in the UK) a lot of people can't afford to upgrade. Old versions of JAWS don't play well with other browsers so we end up with people still using IE11.
Yes IE needs to die and I definitely support telling people to upgrade, but supporting vs offering a perfect experience are two different things.
As long as all actions can be performed and the site looks OK and is usable / accessible, it doesn't matter if it isn't pixel perfect.
Anyway - I think you have just given me inspiration for my next "angry accessibility rant", I will make sure to give you a mention in the nice part at the end as I think that is a great topic to cover! ❤
First: 700 moneys for a screen reader!? That is disgustingly expensive. I understand that in the real world all software can't be FOSS, people have to make a living, but seeing prices like that makes my blood boil. Why are people not shaming and boycotting this company for gouging people with disabilities? Are there any FOSS competitors that could be supported to help reduce this companies ability to overcharge for something so essential?
I hear what you're saying and understand your desire to serve your users above all else. However, having learned webdev back near the start of the second browser wars, I'm of the opinion that supporting IE causes far more harm to the entire web community than it provides benefit to the few that are helped. The sooner websites stop supporting IE (or better yet actively work to not support it), the sooner the entire ecosystem will be forced to move past it and that will benefit everyone. The needs of the many, as it were.
I'm honored I could help inspire another article and I'll definitely be looking forward to reading it. :)
Yes NVDA is completely free and Mac users get VoiceOver built in, there is also Windows Narrator built into Windows if you like pain (that is being unfair, it is way better now than it used to be)! 😋
JAWS is an impressive piece of kit, I don't think you can fault them for the price really as it literally talks to every piece of software on a PC and when they started there was nothing came even close to letting people who had vision impairments enjoy the PC experience and access software and the web.
Ironically if you are in the US it is only $95 a year....why they have different pricing around the world I have no idea!
I do agree, hell I have experienced the browser wars along side you and it was painful. It is the chicken and the egg scenario.
I want IE to die a (not so quiet) death, but I also can step back and realise that I am more "tech savvy" than most people and that it is just an overhang from the days when we didn't have "evergreen" browsers.
If we switch off support overnight people it would be force people to upgrade....but only if they know how to do it and a lot of people can barely turn a computer on!
Hell I remember the old "IE7 is dead" banners that advocated using FireFox for a better web experience, this is nothing new!
I can also make a pretty good business case for still supporting IE11 as 1-2% of all people still use it....that can be quite significant if none of your competition support it and you do. One site we support has 6% IE 9-11 users, they come to our site as they can't use others!
It is one of those "pain points" I am happy to put up with, I design for the latest and greatest, I just make sure I can polyfill the hell out of anything I implement so it works on IE11, I don't care if IE11 is performant.
In 5 years we will probably be having the same conversation about FireFox as it will be the only non-webkit browser left. Hell we could argue that Google Chrome is firing up the browser wars again as it is constantly introducing new features not in the HTML specs etc.
You and I signed up to work in this madhouse, we can't hate the battlefield we have chosen to fight on! 🤣🤣
I see what you're saying about JAWS, but outside of maybe the medical and aeronautic fields, no software should cost multiple hundreds, not these days when development gets cheaper and easier by the year. NVDA is definitely going on my list of projects to contribute to when I get time and to recommend others do likewise.
I personally think the pain of forcing the community past IE is worth it, even if a few suffer the fate of being left behind, but I'm willing to accept that my position is perhaps overzealous and you are probably arguing the more rational stance.
I would and do argue that Chrome is the new IE; it's a browser owned by a giant for-profit corporation that got it's oversized market share through shady means and only plays lip service to complying with standards, completely ignoring them when it suits their bottom line. What is even worse, more and more players are giving up and joining Chrome bandwagon instead of competing against it. Firefox may have its issues, but at least it is still competing and providing a much needed alternative to browser engine hegemony. I dare say the day Firefox dies, so will the idea of browsers being free (as in freedom and as in beer).
Ah, see that is where I'm lucky, I ducked out of this particular madhouse early on (partially because of IE compatibility madness) and have been quite happy on the battlefield that is front- and back-end desktop development. But, while I may work on the desktop, I live on the web, so I'm always interested in making it better.
Anyway, it's time I stop procrastinating and get back to work. In fact, I think I'll go crawl through a few of our applications and make sure tab orders are correct, all input widgets have labels, and that menu items have their keyboard shortcuts set correctly. Keep fighting the good fight, improving accessibility is important work. 👍
Lucky you with your desktop “write it this way and it will work” fanciness! 🤣
Yeah fun conversation but work beckons (we’ll tea beckons as it is 7pm here in the UK)!
IE is, effectively, EOL'd. Edge is the now.
And I say that as once upon a time being a software engineer who worked on IE 10 and IE 11.
A previous project I worked on at the same company was adding accessibility to our product. In hindsight, I can say without any regrets the product would have been better had accessibility been taken into account from the start, rather than as a follow-up. To underscore that: the product would have been better, period, for having had accessibility from the start. Even if the accessibility aspect itself were ignored, for a moment. Why? Because the accessibility is a user-interface, and the product would have had a FAR better separation-of-concerns if the accessibility user-interface in addition to the graphics user-interface were worked on together, from the start.
Singing from the same hymn sheet here, accessibility makes you design better interfaces and put thought into “where should this button go”.
As you said, having it “in your minds” while developing, even if you don’t understand all the actions you should take, will still make the product better. Then when you do get someone in to help with accessibility they will be pleasantly surprised at how straight forward the fixes are!
Can I make these into poorly animated YouTube videos?
Fire away, have fun and let me know when they are done, I would love to see them! ❤
If you want to give the original articles a shout out in the video it would be appreciated (but not necessary!)
Though, I dunno if this would be a deal breaker to change your mind, but I'd do it more in a story like way, similar to an "A: ..., B: ..." script.
Not at all, you have creative freedom, go for it however works best for you!
Of course I'm gonna mention the articles, I have to credit you, after-all.
That would just be adding context.
I can't wait to see the end result 😁, I really hope when you say poorly animated you mean really bad animation, I think it would just be perfect! lol.
If you do get them done then the next angry man rant I do after that will have to feature your video at the end 🤣
I can't wait to see the end result 😁, I really hope when you say poorly animated you mean really bad animation, I think it would just be perfect! lol.
If you do get them done then the next angry man rant I do after that will have to feature your video at the end 🤣
Looks like you had a duplication.
And by poorly animated, I mean use a still image of a drawing I made for the video, and update it every once and awhile based on the voice-over audio.
Yeah, my mouse double clicks really fast sometimes for no reason, never managed a double post before though, it normally gets caught by dev.to!
Hey, did you ever manage to make these into videos or did life get in the way? (I know what it is like!!)
Life did get in the way. - I wasn't letting them be my first priority.
I'm working on RuntDeale and currently Janky (in C).
The videos have been in the back of my mind, but I'm going to do it when I can set aside a day to plan it out, and make that.
(Besides, I've given you time to create plenty of posts, which means more content! ;p)
Wow, who tf do that kind of sh*t. Buttons should be
Lol, unexpectedly, but i can do XSS, huh?!
Hmm a
Did you see the TikTok developer guidelines?
There you have an anchor as a button, right in the official documentation! 😂
developers.tiktok.com/doc/login-ki...
Well this is the company that actively suppressed disabled users.
What makes it even worse is that there is an
<a>element that doesn't even have anhreffor "login". That means it isn't focusable (something I missed in my rant ironically!)...not that anything on that page has focus indicators....oh it hurts me so much, why did you do this, I thought we were friends! 🤣Yeah, not a fan of TikTok either!
I'm new to DEV and this is the first post I've read here, and I'm loving it! Thanks for injecting some humour to web development (I'm not saying it's not fun already!)
Are you still active on here?
Me or the person who posted? 💗
I was asking the person who posted, sorry. :D
Nice post by the way. I enjoyed it!
Thank you for the kind comment, I am glad you enjoyed it.
Finally, I hope I speak for everyone when I say welcome to the community! ❤
I hope you are enjoying the angry rant series.
In reality I am here to help any way that I can, if you have any questions on accessibility just ask! I might even write an article to address any problem you need help with (and I promise it will be a nice one!)
You definitely grabbed my attention, I really learnt something, so good job! By the way, tell us the results of our experiment with the algo hehehe
I will do, with the tiny bit of data I have it looks like the answer will be "ask for likes and comments, it works" though!
Glad you enjoyed the article! 😁
Styling libraries may be contributing to this issue. Whenever I use a styling library, they require anchor tags to be used as buttons. Its a bit annoying and I could just write the styles for a button tag but that slow things down. The problem is not writing the same styles for a button tag, but making sure the styling library works with your button element. And also making sure css features work on older browsers, which means the developer needs to do a bit of homework to make sure the styling is compatible across multiple platforms. And don’t forget that all task have a deadline, would risk missing a deadline for a anchor tag?
After styling has been corrected to use button elements instead of anchor. How do we make sure the next developer is aware of the changes? Is there a internal documentation for styling library or will they use the documentation on the styling library’s site?
I guess things would be better if we could get all the rant guys to build a styling library and maintain. Because they are as many libraries for styling compared to programming libraries.
I do agree on just getting rid of IE all together!
As I said libraries and tutorials are one of the biggest offenders and I do kind of get where you are coming from.
However that is a poor excuse really.
<button>can be styled correctly.<a href="#"in the project, replace with a<button>- might take half a day on a gigantic project even if you do it manually (and if it is that large there will be a large dev team so you can give this job to a junior dev as a nice lesson in why accessibility first thinking saves a load of headaches!)At the most you are talking a day or two and that would be on something monstrous.
If your company got sued under the ADA (over 3500 cases last year) - "it was the library we use" would not hold up in court!
The above is still a little bit of the angry man having fun:
I am also a realist, I know the things you mention are real problems and I am dumbing them down.
What I am really saying is just fix it going forward, make better decisions when choosing libraries and frameworks. Put accessibility on the table and say "we have a problem here, how can we fix this as part of ongoing maintenance, how can we fix it going forward" - often it is really simple and just involves understanding why it is a problem (point them to my angry man rant if you want 🤣) and everything falls into place.
And if there is a little resource doing mundane things like adjusting the shade of blue used on page X - perhaps get them to fix a couple of anchors to buttons instead!
Baby steps!
I enjoyed very much reading this article 😁
Hehe, glad you enjoyed my "angry rant"! 🤣
😂😂
Fun! (and very true)
Glad you enjoyed it ❤
Amazing article!
Thanks a lot, glad you enjoyed it. ❤️
I'm enjoying these rants too, thanks for writing them ;)
Thank you, new one ready for tomorrow, even more angry as people seem to like that lol! ❤️
very useful and interesting article, thank you very much!
Thanks a lot, I am glad you enjoyed it.
Ok, no more div or archor for a button, button is for button 👍 Thank you, as always this article gave me new knowledge.
Angry man works! 🤣🤣
Absolutely! 😜🤣