26 December 2018 - The 'hidden' Attribute - Finally a way to 'abuse' INPUT safely
By Jason M. Knight (aka Deathshadow)

For a while now as we've transitioned from using JavaScript for things like menus and modals to CSS using pseudo-classes such as :checked, there has been the problem that for non-CSS users you end up with a empty unassociated checkbox and label in the markup. This could be considered bad accessibility and confusing to users who do not get your screen media layout.

But now the W3C has added the hidden attribute to the HTML specification:

https://www.w3.org/TR/html51/editing.html#the-hidden-attribute

By using it all modern UA's are supposed to ignore the element as if it does not exist. Whilst this doesn't help in older user agents, it is a step in the right direction and is supported by Gecko, Blink, and Chakra... meaning support is surprisingly far along. No shock really though, since it's basically treated as display:none; -- just even screen readers and CSS disabled it is supposed to be obeyed.

So what does it do? Well, it makes the element not display -- it also doesn't disable the element for interaction, so if you have an INPUT unlike setting display:none it won't disable a checkbox INPUT from being toggled in IE/Edge.

This means when you do things like:

<input type="checkbox" id="toggle_mainMenu" class="toggle" hidden>
<label for="toggle_mainMenu" hidden>

People not using screen media CSS aren't stuck there scratching their heads wondering what the blazes that unlabeled checkbox is even for.

Now, that said for legacy UA support such as IE, I would still suggest that something like this:

.toggle {
	position:absolute;
	left:-999em;
}

Be applied to hide the element without disabling it. But notice how the label is also hidden... it can be reshown as simple as:

.toggle + label {
	display:inline;
}

Since as I mentioned, it is basically treated as display:none by the CSS engine. Setting any display state other than none will bring an element with the hidden attribute on it back into normal behavior.

I know to a lot of developers who give a flying purple fish about accessibility, usability, and so forth, just endlessly mindlessly slopping JavaScript into their pages for nothing this may feel like something minor; but for those of us who are migrating away from using hundreds of K of JavaScript for trivial UI features? This is perhaps one of the most important changes in recent memory to HTML.

... and it's really sad how little attention is being paid to it.

Now, that said, I've seen people using/abusing it for scripting only elements. Cut it out. If a DOM element only exists for the purpose of client-side scripting, you really have no business putting it in the HTML. It will be complete gibberish scripting off and a waste of bandwidth. Whist yes, hidden fixes the former problem, the latter part remains. ... and is a good part of why I consider how people use things like React and Vue on the client-side to be mentally enfeebled incompetence. Not that the server-side is much better in that regard with the whole "Virtual DOM" bullshit.

In any case, I would now say it is safe to use extra INPUT of type radio or checkbox with relative impunity as CSS triggers for behaviors, just set it and any other associated elements like their LABELs to 'hidden' and modern UA's will ignore it as content.

I've even done some testing, and both Google and Yandex seem to ignore "hidden" content as well. Baidu not so much. This is good since excess/non-functional elements could be a ranking penalty, and it means they've already recognized how it could be abused for content cloaking.

I'm happy with it, how about you folks?

Projects

  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.

/for_others

Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.

Advertisement

Best Viewed With Eyeballs