12 July 2019 -
ARIA Roles - Why do these exist?
By Jason M. Knight (aka Deathshadow)
My momma always said...
As I've been taking my notion of creating my own version of HTML more and more seriously -- both out of disgust with the WhatWG and no longer having any confidence in the W3C -- I've been double-checking my assumptions and conclusions about various bits of HTML 5 and many of the "newer" technologies. Amongst these was that I considered ARIA roles a silly, pointless, bloated bit of trash.
I was not prepared however for once I "really dug into them" how outright mentally enfeebled the entire train wreck of stupidity is. Shockingly so! I cannot even believe this is actually a thing, as it appears the entire reason it was created was to let the people who incorrectly, endlessly, and mindlessly throw non-semantic containers at everything to slop even more code into the processs to claim their having a semantic meaning. This is as if not dumber than the new "structural tags" with their pointless redundancies.
I ended up reading everything MDN had on the subject, since as always the actual specification from the W3C is written in the same gibberish legalese they always use; reeking of being created in Finnish, translated to Japanese by a Russian, then Google translated to an "Engrish moist goodry" so bad I can almost hear a Vietnamese hooker saying "Me love you long time" as I try to work my way through it... but seriously their examples for ANY of the properties screams how mind-numbinging dumbass this stuff is. Take this one:
<section role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
<div role="listitem">List item 3</div>
</section>
The what now?!? If the entire point is to abuse tags like SECTION and DIV to do UL and LI's huffing job, why not just use UL and LI? It gets even dumber when you get to crap like this:
<div role="table" aria-label="Semantic Table Elements" aria-describedby="semantic_table_desc">
<div id="semantic_table_desc">Semantic Elements to use instead of ARIA's table roles</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader">ARIA Table Role</span>
<span role="columnheader">Semantic Element</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">table</span>
<span role="cell">table</span>
</div>
<div role="row">
<span role="cell">rowgroup</span>
<span role="cell">thead, tbody, or tfoot </span>
</div>
</div>
</div>
Are you huffing kidding me?!? I thought the people using it incorrectly with nonsense like <form role="form"> -- where if you use the correct tag you are NOT supposed to use the role -- were idiots, but the specification itself is utter and complete garbage if this is what it's for! Why the bloody blue hell would ANYONE write that instead of the proper bloody semantics of:
<table>
<caption>Semantic Elements to use instead of ARIA's table roles</caption>
<thead>
<tr>
<th scope="col">Aria Table Role</th>
<th scope="col">Semantic Element</th>
</tr>
</thead><tbody>
<tr>
<td>table</td>
<td>table</td>
</tr><tr>
<td>rowgroup</td>
<td>thead, tbody, or tfoot</td>
</tr>
</tbody>
</table>
The really funny part is multiple sections both on MDN and in the specification actually say things along the lines of If possible, use the correct element instead.
-- when is it not "possible" to simply write the correct blasted markup?!? How is that even a thing you'd encounter as a developer?!?
The handful of roles that -- by the WAI-ARIA rules -- are not redundant to existing tags are all not only still in draft, they appear to be about presentational and layout concepts. Take role="tabpanel". A "tab panel" is a LAYOUT concept and has / should have diddly squat to do with semantics or accessibility, the alleged target audience for ARIA!.
I mean, get a load of this asshattery:
<div role="region" aria-labelledby="region-heading">
<h2 id="region-heading">This heading's <code>id</code> attribute helps this region have an accessible name</h2>
<!-- region content -->
</div>
That's what a numbered heading does. It's a HEADING!, aka a label for all content that comes after it until you reach a heading of equal/lower depth/higher order or a HR. So we're talking quite possibly DIV for nothing, id for nothing, and now we also have role and aria-labelledby for?
It's all there, black and white, clear as crystal.You get NOTHING!!!
Good day sir.
Much less, isn't this the same functionality the so-called structural (and ultimately redundant) SECTION tag is supposed to provide?
I swear, the current level of stupid at the W3C knows no bounds. Rather than try to get anyone to use HTML properly, they just keep adding more bloated redundant crap in the blind hope that it MIGHT get people to try and add semantics? If they're not doing it with the existing tags, throwing more code at it isn't the huffing answer. Growing a pair, creating an authoritative specification that tells the people using it how to huffing use it, and having the giant set of brass to say "ENOUGH, LEARN DAMNIT!!!" is the answer.
This limp, soft, soulless, impotent, laissez-faire attitude on the part of the W3C, where they are documenting what can be done is the antithesis of creating an actual specification. Sure, I CAN put a number 2 bolt in the hole for a number 6, doesn't mean it's going to hold the load. They have written the only official documentation for HTML entirely for browser makers, and effectively told the people using the language on a daily basis to "go somewhere else" for third party tutorials and guides. "This specification is not for you" seems to be the message they have for those of us actually writing websites!
... and it's how we end up with people doing dumbass trash like <form role="form"> or <ul role="list"> which isn't even what ARIA roles are even for. They seem to be for when you use the wrong tag... in which case, in the name of the Sun and our divine savior Joe Pesci, STOP USING THE WRONG TAGS!!!
