DEV Community

Cover image for They...just...won't...learn 🤦‍♂️ - a button is a <button>! [Series: Accessibility Rants]

They...just...won't...learn 🤦‍♂️ - a button is a <button>! [Series: Accessibility Rants]

GrahamTheDev on May 27, 2021

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...
Collapse
 
jayjeckel profile image
Jay Jeckel

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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! ❤

Collapse
 
jayjeckel profile image
Jay Jeckel

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. :)

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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! 🤣🤣

Thread Thread
 
jayjeckel profile image
Jay Jeckel

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. 👍

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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)!

Collapse
 
eljayadobe profile image
Eljay-Adobe

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.

Collapse
 
grahamthedev profile image
GrahamTheDev

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!

Collapse
 
baenencalin profile image
Calin Baenen • Edited

Can I make these into poorly animated YouTube videos?

Collapse
 
grahamthedev profile image
GrahamTheDev

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!)

Collapse
 
baenencalin profile image
Calin Baenen

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.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Not at all, you have creative freedom, go for it however works best for you!

Collapse
 
baenencalin profile image
Calin Baenen

Of course I'm gonna mention the articles, I have to credit you, after-all.
That would just be adding context.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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 🤣

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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 🤣

Thread Thread
 
baenencalin profile image
Calin Baenen

Looks like you had a duplication.

Thread Thread
 
baenencalin profile image
Calin Baenen

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.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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!

Collapse
 
grahamthedev profile image
GrahamTheDev

Hey, did you ever manage to make these into videos or did life get in the way? (I know what it is like!!)

Collapse
 
baenencalin profile image
Calin Baenen

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)

Collapse
 
milkywayrules profile image
Dio Ilham D

Wow, who tf do that kind of sh*t. Buttons should be

Collapse
 
milkywayrules profile image
Dio Ilham D

Lol, unexpectedly, but i can do XSS, huh?!

Collapse
 
milkywayrules profile image
Dio Ilham D

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Hmm a

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

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...

Collapse
 
grahamthedev profile image
GrahamTheDev

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 an href for "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! 🤣

Collapse
 
madsstoumann profile image
Mads Stoumann

Yeah, not a fan of TikTok either!

Collapse
 
qucchia profile image
qucchia

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!)

Collapse
 
best_codes profile image
Best Codes

Are you still active on here?

Collapse
 
grahamthedev profile image
GrahamTheDev

Me or the person who posted? 💗

Thread Thread
 
best_codes profile image
Best Codes

I was asking the person who posted, sorry. :D

Thread Thread
 
best_codes profile image
Best Codes

Nice post by the way. I enjoyed it!

Collapse
 
grahamthedev profile image
GrahamTheDev

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! ❤

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

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!)

Collapse
 
miguelmj profile image
MiguelMJ

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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! 😁

Collapse
 
chrislemus profile image
Chris

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!

Collapse
 
grahamthedev profile image
GrahamTheDev

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.

  1. Add the CSS so a <button> can be styled correctly.
  2. Find every <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!)
  3. Update internal guides - depends how well maintained they are in the first place I guess.

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!

Collapse
 
ayabouchiha profile image
Aya Bouchiha

I enjoyed very much reading this article 😁

Collapse
 
grahamthedev profile image
GrahamTheDev

Hehe, glad you enjoyed my "angry rant"! 🤣

Collapse
 
ayabouchiha profile image
Aya Bouchiha

😂😂

Collapse
 
felixdorn profile image
Félix Dorn

Fun! (and very true)

Collapse
 
grahamthedev profile image
GrahamTheDev

Glad you enjoyed it ❤

Collapse
 
wduqu001 profile image
Willian Duque

Amazing article!

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks a lot, glad you enjoyed it. ❤️

Collapse
 
catniac profile image
catniac

I'm enjoying these rants too, thanks for writing them ;)

Collapse
 
grahamthedev profile image
GrahamTheDev

Thank you, new one ready for tomorrow, even more angry as people seem to like that lol! ❤️

Collapse
 
filatovv profile image
Yuri Filatov

very useful and interesting article, thank you very much!

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks a lot, I am glad you enjoyed it.

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Ok, no more div or archor for a button, button is for button 👍 Thank you, as always this article gave me new knowledge.

Collapse
 
grahamthedev profile image
GrahamTheDev

Angry man works! 🤣🤣

Collapse
 
grahamthedev profile image
GrahamTheDev

Absolutely! 😜🤣

Collapse
 
grahamthedev profile image
GrahamTheDev

This tactic won't work on this site, if you want to link to your content at least make it relevant, at the moment it has no relation to the article.