I'm tired of seeing it happen and this seems to be getting worse rather than better over time, so I'm going to rant about it now. If your website doesn't properly support middle-click (and right-click) for linking documents, then you're doing web development wrong! In fact, in the United States, it's actually illegal.
For the uninitiated normal human who might stumble upon this post, HTML is how web pages are designed. HTML is defined as a limited set of "HTML tags" (or just "tags") that define the structure of how the web browser is supposed to render a HTML document. As time has marched forward and specifications for HTML have evolved/adapted to the changing needs of the web, the set of "HTML tags" has changed too. However, what hasn't ever changed is that if you want to form a link between two documents, the ONLY acceptable tag is the "a" tag, which is shorthand for "anchor." The "a" tag is treated specially by all web browsers. It is the fundamental basis of how the web works. Using any other HTML tag except the "a" tag for document linking breaks basic web browser functionality.
In HTML, the "div" tag is, put as simply as possible, a "generic box." The "div" tag wasn't formally defined until HTML 3.0 and is the mostly defacto standard for laying out webpages these days. In web developer circles, a "div" is known as a "block level" container. Each tag in HTML can be "inline" or "block" level or some unholy union of the two (e.g. "inline-block"). Inline tags are used inline with text. Block level tags form the structure of a document. To keep this as simple/short as possible, to position things correctly on a webpage for today's websites, many divs are needed.
As the web marched on, people decided that putting both style and semantics/layout into HTML was a bad idea. Because it kind of was. Cascading Style Sheets, or CSS, entered the picture. CSS was originally a fairly simple thing but has since ballooned wildly out of control. There is no official single 600 page document specification (i.e. PDF) for CSS but the various specifications for CSS have evolved into an overly complex nightmare that literally no one on Earth actually knows the entirety of. Not even those who write the actual web browsers for a living know all of CSS. CSS is the worst styling language ever invented for the singular reason that it is quite literally impossible to fully comprehend/grok/understand all of it.
Somewhere along the line, it was decided we needed more complex solutions than what HTML and CSS alone could provide. Enter the nightmare that is ECMAScript, better known as the basis of Javascript. No one on Earth, not even the people who write web browsers, can claim to know Javascript. The official specification for ECMAScript alone, on which Javascript is based, is over 900 pages of technical documentation! By the time you get to page 50, you've already forgotten half of what you read let alone fully implement it successfully and correctly in software. Javascript is the worst scripting/programming language ever invented for the singular reason that it is literally impossible to fully comprehend/grok/understand all of it. CSS and Javascript are the primary reason why your average web browser now weighs in at over 100MB in size (compressed download). It's completely insane, but we're kind of stuck with all of it though because of the next paragraph.
In HTML, the "a" tag carries some baggage with it. By default, in most browsers, it displays a "hyperlink." That's the famous blue/purple text with a line underneath it that everyone is familiar with where, when clicked, it takes you somewhere else on the web! Overriding the default styling of the "a" tag in CSS is slightly annoying, but not difficult. However, for some reason, some web developers have decided that they would like to reinvent the wheel. The "div" tag does not carry as much predefined styling baggage with it and so, it is within that unholy block level canvas we find a "div tag + CSS + Javascript" combination upon which they wrongfully paint a replacement for the humble hyperlink that should, instead, be a simple "anchor tag + CSS" combination! Ever since someone, somewhere decided to allow "div" tags to become "clickable" for navigation purposes, Javascript is required to exist in perpetuity. That someone, whoever they are, should probably be publicly flogged - even if you disagree, you would still watch that. Look, I understand the temptation to use a "div" for a clickable element because they are a lot simpler to style and you're "already using Javascript" in every instance where this happens and implementing a Javascript click() handler can be easier. That doesn't make it okay to use them for that purpose though. Just because you can do something does not mean you should and, in this case, the "hyperlink div" both should not and must not ever be used.
And now, the final piece of this picture. The average mouse peripheral has left- and right-click buttons. Most mice also have scroll wheels. Did you know that you can press the mouse wheel down on a proper hyperlink and it will also act like a click on that link? The mouse scroll wheel doubles as a "middle-click" button. Not every application supports middle-click but it exists and web browsers are one specific application that support middle-click. The mouse as an input device and all of its buttons serve several useful and essential purposes when accessing the web.
Now that the background/history bits have been covered, we can move onto the fundamental problem: When a "div" is used instead of the "a" tag, multiple default behaviors in web browsers break! When you middle-click on an "a" tag, the default behavior in most modern browsers is to open that link in a new tab while remaining on the current tab. This is useful and essential if you want to stay on the same page but have one or more pages/documents load up in the background to look at in a few minutes. If you need to open multiple documents, middle-clicking on hyperlinks is very efficent...when it works! However, when you middle-click on a "div" tag masquerading as a clickable link, nothing happens! Also, when you right-click on a "div" tag that is pretending to be a hyperlink, the wrong right-click context menu appears - or none at all because right-click might be suppressed altogether with Javascript! In addition, "div" elements generally aren't read by assistive technology like screen readers without additional specialty attributes being applied (e.g. ARIA labels/roles) making the web that much harder to navigate for a lot of people. Using a "div" instead of an "a" tag for navigation is, in fact, disabling core functionality of a web browser and functionally disabling the ability to navigate the web!
While "div" usage is the most common abuse, using Javascript-dependent "a" tags is a less common abuse but still prevalent. Middle-click on such "a" tags can result in strange behavior like putting Javascript in the URL bar or going to the homepage of a website instead of the correct location. Right-click functionality is also broken for those scenarios. There is no valid, legitimate excuse for breaking basic web browser functionality for hyperlinks/document navigation because those are just excuses for not doing proper web development.
The United States has a Federal law on the books called the Americans with Disabilites Act (ADA), which, among other things, prohibits businesses, people, and entities like the U.S. government from disabling services for not just the disabled but everyone, everywhere in the U.S.! U.S. law, especially the ADA, broadly defines what it means to be disabled. You are, probably, right now, disabled in some way that U.S. law recognizes as legally disabled. Blocking basic web browser functionality by choosing to use a "div" instead of an "a" tag for hyperlinks directly violates the ADA. If you are a web developer who does that, then you have violated U.S. Federal law. ADA violations carry steep penalties of $55,000 (USD) or more per violation. So stop doing that already! At this point, I'd be happy to be called in as an expert witness web developer in a case involving "div" vs. "a" tags in a forward-temporal, unlimited damages, all Persons class action ADA lawsuit (i.e. the class is everyone, the case reaches a verdict but never concludes, and any future violation by anyone else going forward is instantly punishable by that court of law) and become "that guy who forced us all to use 'a' tags correctly for hyperlinks" that every web developer out there ends up "hating" for inexplicable reasons. But that's how absolutely frustrating this is!
Who are the worst offenders that use "div" instead of "a" tags for hyperlinks? Restaurant, grocery store, and banking website developers. All of those businesses have terrible websites but the worst of those three are the restaurant websites because, for some reason, they REALLY like their broken div-click unnavigable websites that directly violate the law. They also really love their broken websites that just don't work in general - broken payment systems, broken links, broken menu items (i.e. the actual menu of items they make/serve), broken scrolling, broken dialogs and other UI, broken images - I've seen it all and legitimately wonder how in the world they actually stay in business let alone why they even bother with having a website in the first place. However, I keep running into the same div-hyperlink problem everywhere else lately. What inspired me to write this post isn't because I visited a restaurant or grocery store or banking website (although my continued, ongoing terrible experience with those websites certainly played a small role) but rather Merriam Webster's dictionary website. Yup, even the boring, old Merriam Webster dictionary website is in on the action of actively violating the ADA. We truly live in the worst timeline!
Comments
Post a Comment