タブで切り替えられるコンテンツってありますよね?
JavaScriptで表示非表示を切り替えるのが一般的だと思いますが、今まではJSオフの対応として、JSからCSS読み込ませることでJSオフのときにもコンテンツが隠れないように対応していました。
結構面倒だし他に方法ないかな~と考えていたら、noscriptという便利なタグのことを思い出し、試してみることにしました。
追記:
Twitterでご指摘をうけたのですが、どうやら style要素 は head要素内 でしか使用してはいけないようです…。
要素型 head要素の子要素
また、HTML5からは head要素内 に noscript要素 を追加してもいいことになったそうです。
HTML5ではnoscript要素がhead要素内にある場合には、noscript要素の中に link要素、style要素、meta要素を配置してもよいことになっています。
本記事を参考にされる方はこちらを踏まえた上でご利用をお願いいたします。
1. noscriptタグでJSオフの時にdivを追加する
HTML
### CSS 冗談半分にやったのにIEでもChromeでも動作してしまいましたw しかしこれではHTML構造的にNGなので、実用的ではありません。 次の方法を試します。 ## 2. noscriptタグでJSオフの時にStyleを追加する ### HTML ### CSS これなら特に問題なさそうです。 linkタグでCSSそのものを読ませても良いかもしれません。 **** 実際にタブ切替を実装したデモを用意したので置いておきます。 * [noscriptタグを使ってタブ切替コンテンツをJSオフでも表示する方法-デモ](/demo/noscript-visible-contents.html) 他にもやっている方がいるか検索してみたところ、やはりいらっしゃいました。 > JavaScript有効/無効に応じてformのactionを切り替えるのをHTMLだけで実現する > > 引用元:[2011-04-19 - あっきぃ日誌](http://d.hatena.ne.jp/Akkiesoft/20110419){:target="_blank"} 応用次第ではアクセシビリティ対応が充実しそうですね。