Alt text on m.xkcd should not be initially hidden using JS

[marnanel]

On m.xkcd.com, the alt text is hidden and revealed using JavaScript. The text starts out visible, but is immediately hidden when the page loads, using window.onload.

The trouble with this is that on a slow connection (such as the ones you sometimes get with mobile devices!) the page is displayed when only partly rendered. Since the HTML hasn't loaded, window.onload hasn't fired, so the alt-text is still visible. Indeed, since the image probably hasn't loaded either, it's likely to be the only thing visible.

I think the alt text should have style="display:none" set explicitly, to be modified later by the JS.

[Роберт]

On m.xkcd.com, the alt text is hidden and revealed using JavaScript. The text starts out visible, but is immediately hidden when the page loads, using window.onload.

The trouble with this is that on a slow connection (such as the ones you sometimes get with mobile devices!) the page is displayed when only partly rendered. Since the HTML hasn't loaded, window.onload hasn't fired, so the alt-text is still visible. Indeed, since the image probably hasn't loaded either, it's likely to be the only thing visible.

I think the alt text should have style="display:none" set explicitly, to be modified later by the JS.

Another issues is that some people have JavaScript disabled. We would need to think about how the current system works for them (they can see the alt text but it's not hidden) and how the proposed modification would work: (they can see the alt text without viewing source or enabling JS?)

[davean]

Yes, many mobile devices don't support JS. I couldn't find any way to make it reliably accessible with a default hidden.

Suggestions welcome.

[bittyx]

I'm not sure how supported CSS is with mobile devices, but there's a pure CSS solution for this. Do something like:

Code: Select all

<style type="text/css">

.alt-text {display: none;}

.alt-text-btn:focus + .alt-text,
.alt-text-btn:hover + .alt-text,
.alt-text-btn:active + .alt-text
{ display: block; }

</style>

...

<div class="alt-text-btn">SHOW ALT TEXT</div>
<div class="alt-text">Alt text</div>


or something like that. You get the gist.

[chridd]

Yes, many mobile devices don't support JS. I couldn't find any way to make it reliably accessible with a default hidden.

Suggestions welcome.

What about using a URL parameter, so m.xkcd.com/123/ (with alt-text hidden without JavaScript) would have a link to, say, m.xkcd.com/123/?alt=true which would always show the alt text?

[davean]

I'm not sure how supported CSS is with mobile devices, but there's a pure CSS solution for this. Do something like:

Code: Select all

<style type="text/css">

.alt-text {display: none;}

.alt-text-btn:focus + .alt-text,
.alt-text-btn:hover + .alt-text,
.alt-text-btn:active + .alt-text
{ display: block; }

</style>

...

<div class="alt-text-btn">SHOW ALT TEXT</div>
<div class="alt-text">Alt text</div>


or something like that. You get the gist.

Absolutely not at all in the concerned devices?

[bittyx]

I dunno, I have a relatively old mobile phone, with an old version of Opera Mobile that doesn't run javascript (or at least not in my experience), but does display pages correctly styled. Hence the idea. But I agree it was a long shot in more than one way. I guess chridd's solution pretty much stomps over my suggestion in terms of compatibility anyway; though if CSS isn't supported at all, like you say, you don't really have a way of hiding it anyway, except for actually not outputting it at all.

Though I have to wonder, which devices have an advanced enough display that you can use it to read xkcd (or other comics) comfortably, while at the same time not supporting javascript, and not having the option to install a javascript-capable browser?

[Red Hal]

Yes, many mobile devices don't support JS. I couldn't find any way to make it reliably accessible with a default hidden.

Suggestions welcome.

What about using a URL parameter, so m.xkcd.com/123/ (with alt-text hidden without JavaScript) would have a link to, say, m.xkcd.com/123/?alt=true which would always show the alt text?

Thumbs up for this or a variant of it. To keep transfer sizes down it could be a plain text file accessible at "m.xkcd.com/123/titletext" or similar. It would be clunky, but would provide an almost-guaranteed solution.

[davean]

Yes, many mobile devices don't support JS. I couldn't find any way to make it reliably accessible with a default hidden.

Suggestions welcome.

What about using a URL parameter, so m.xkcd.com/123/ (with alt-text hidden without JavaScript) would have a link to, say, m.xkcd.com/123/?alt=true which would always show the alt text?

Thumbs up for this or a variant of it. To keep transfer sizes down it could be a plain text file accessible at "m.xkcd.com/123/titletext" or similar. It would be clunky, but would provide an almost-guaranteed solution.

We did that initially and people hated the experience - particularly the load lag being five to ten seconds on many devices - too long for people to keep their interest.

[Red Hal]

In which case it gets messy. You could try testing for javascript and browser type and deliver the content appropriately with kludgy link to a text file as a last resort/unknown device, but that's extra work for vanishingly little return. If you don't mind my asking, can you give examples of the devices that are having problems?

In the case of a Lynx browser, for example, the problem solves itself as someone visiting the site won't be able to see the image anyway ...

[Ubik]

A possible solution could be to have the alt-text in a noscript element and a piece of JavaScript that does some DOM manipulation to insert an toggleable hidden element with the alt-text in it into the page for those who have JavaScript working. The DOM manipulation part would at least move the duplicated alt-text into the JavaScript portion of the page so that the page as just HTML wouldn't look odd. (The text in noscript element can't be accessed via JavaScript in various browsers, so it can't be just toggled to be visible with JavaScript, also noscript isn't allowed - and doesn't necessarily work either - in head element in current standards so people without JavaScript could have their own CSS rules.)

[davean]

A possible solution could be to have the alt-text in a noscript element and a piece of JavaScript that does some DOM manipulation to insert an toggleable hidden element with the alt-text in it into the page for those who have JavaScript working. The DOM manipulation part would at least move the duplicated alt-text into the JavaScript portion of the page so that the page as just HTML wouldn't look odd. (The text in noscript element can't be accessed via JavaScript in various browsers, so it can't be just toggled to be visible with JavaScript, also noscript isn't allowed - and doesn't necessarily work either - in head element in current standards so people without JavaScript could have their own CSS rules.)

Hum, interesting.