noscriptタグを使ってJavaScript無効を対策する

JavaScriptを用いてWebページにアニメーションを加える際、ブラウザの設定で「JavaScriptを無効化」しているユーザーにも配慮する必要があります。

例えば、JavaScriptでページのコンテンツを表示させるようにしていた場合、上記のユーザーには何も表示されません。

そのようなユーザーに対して、「JavaScriptを有効化してください」という警告メッセージを表示させ、ユーザーがページから離脱するのを防ぐ方法について解説します。

noscriptタグを使ってJavaScript無効を対策する

noscriptタグとは

「noscriptタグ」は、divタグやaタグと同様に、HTMLタグの一種です。

その特徴として、noscriptタグ内に書かれた内容は、「scriptが実行されない＝JavaScriptが無効化されている」場合にのみ表示されます。

つまり、JavaScriptを無効化しているユーザーに対して表示したいメッセージを、noscriptタグを使って記述することで警告メッセージを表示させることができます。

noscriptタグの使い方

<noscript>
	<div>
		<p>お手数ですがJavaScriptの設定を有効にし、再読み込みしてください。</p>
		<p>Color Piece ホームページ管理者</p>
	</div>
</noscript>

このサイトに記述しているnoscriptタグです。

使い方は非常にシンプルで、表示したい内容をnoscriptタグで囲うだけです。

CSSで装飾することもできるので、余白などを調整すると以下のように表示されます。

ブラウザ毎の「JavaScript有効化の手順」を記載する、もしくは記載されたページのURLを貼ってあげるとより親切ですね。

noscriptタグを使う場面

JavaScriptでコンテンツを表示させている場合

JavaScriptを使って、ページのコンテンツが表示されるようなアニメーションを採用している場合、JavaScriptが無効化されているといつまで経ってもコンテンツが表示されません。

なぜ何も表示されないか、その原因を瞬時に理解できるユーザーはごく僅かなので、noscriptタグを使って教えてあげましょう。

UI/UXの関係上、JavaScriptが必須の場合

UIは「ユーザーインターフェース」、UXは「ユーザーエクスペリエンス」のことですが、簡単に言えばユーザーがそのWebページを利用するにあたりJavaScriptが必須の場合です。

例えば、別記事で紹介したような「JavaScriptを使った計算シュミレータを掲載しているページ」であれば、JavaScriptが無効化されていると全く意味のないページとなってしまいます。

おわりに

Webページを制作する際は、あらゆるユーザーを想定して制作する必要があります。

予期せぬエラーでせっかくアクセスしてくれたユーザーを取りこぼしてしまうのは非常に勿体ないですからね！

手間はかかりますが、それに見合う見返りはあると思います。