There is a widespread pattern on the web that I don't understand.
I start with the problem statement, then suggest a workaround
that I would like to get feedback on. I close with the suggestion
that the interplay of CSS and noscript could be improved by a
:noscript CSS-pseudoselector.
Take Google+ as an example, though there are many Javascript-
using sites with similar issues. Pages start with something like
<style>
body { visibility: hidden; }
</style>
and then Javascript is used to override that default. For instance
https://plus.google.com/111191895515210271225/posts/HN2ZTbf7Cgg
I assume there is some rationale for hiding content by default?
Perhaps it is that if one shows content by default, there would
be a flash of uncontrolled content before the scripts run.
The problem is that users who disable Javascript by default see
nothing at all on such sites, even though the content could be
read just fine by removing the default styling. Try the example.
If the rationale above is correct, there would seem to be a simple
workaround, which is to hide content via a css class, and to attach
that class dynamically, before the content is parsed and rendered.
That way content is hidden by default only when script is enabled:
..
<style>
.script .hidden {display:none}
</style>
</head>
<body>
<script>
document.body.className = "script";
</script>
<!-- no script: text visible -->
<!-- with script: text not visible by default,
can be made visible by script, when ready
-->
<div class="hidden">
hear this
</div>
..
Am I missing something here? If this works as expected, then
why do major players like Google+ (don't get me started on
Twitter) fail to make their content accessible to non-Javascript
users?
While looking into this, it occurred to me that the noscript
element isn't half as useful as it could be - in particular, we
might be better of with script/noscript CSS-pseudoselectors:
<style>
:script { display: none }
</style>
I would like your feedback on these observations: am I on
the right track?
Claus
http://clausreinke.github.com/
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
