ウェブページに JavaScript を追加する

JavaScript について

JavaScript はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることができますが、JavaScript は全く新しいレベルの可能性を開きます。

HTML から JavaScript を起動する方法

ブラウザー内で、 JavaScript それ自体は何もしません。 JavaScript は HTML ウェブページの中から実行します。 HTML の中から JavaScript コードを呼び出すには <script> 要素が必要です。 script の使い方には、外部スクリプトにリンクするか、ウェブページにスクリプトを正しく埋め込むか、 2 つの方法があります。

外部スクリプトのリンク

通常、スクリプトは自分自身で .js ファイルに書きます。ウェブページから .js スクリプトを実行したい場合は、 <script> を使用し、スクリプトファイルを指す src 属性にその URL を指定してください。

HTML の中で JavaScript を書く

src 属性を提供する代わりに <script> タグの間に JavaScript コードを追加することもできます。

ちょっとした JavaScript が必要なときには便利ですが、 JavaScript を別個のファイルで管理すると、次のようなことが簡単にできることがわかります。

• 作業に集中する
• 自給自足の HTML を書く
• 構造化した JavaScript アプリケーションを書く

アクセシビリティに配慮したスクリプトの使用

アクセシビリティは、あらゆるソフトウェア開発において大きな課題です。 JavaScript を賢く使用すればウェブサイトをよりアクセシビリティの高いものにできますし、スクリプトを無頓着に使用すれば大惨事になることもあります。 JavaScript が意図通りに動くようにするには、JavaScript を追加するための最善の手法について知っておく価値があります。

• すべてのコンテンツを（構造化された）テキストとして利用できるようにしましょう。 コンテンツは可能な限り HTML に頼ってください。例えば、 JavaScript で素敵な進捗バーを実装した場合、HTML 内で一致するテキストのパーセント表示で補完するようにしてください。同様に、ドロップダウンメニューはリンクの順序なしリストとして構造化すべきです。

• すべての機能をキーボードからアクセスできるようにしましょう。

  • ユーザーがすべてのコントロール（リンクやフォーム入力など）を合理的な順序で移動できるようにしましょう。
  • ポインターイベント（マウスイベントやタッチイベントなど）を使用している場合は、キーボードイベントで機能を複製しましょう。
  • キーボードのみを使用してサイトをテストしましょう。

• 制限時間を設定したり、予測したりしないでください。 キーボードで操作したり、コンテンツが読み上げられたりするのに余計な時間がかかります。ユーザーやブラウザーがある処理（特にリソースの読み込みなどの非同期操作）を完了するのにかかる時間は、ほとんど予測できません。

• アニメーションは控えめで短く、点滅しないようにしましょう。 点滅は煩わしく、発作を発生させます。さらに、アニメーションが数秒以上続く場合は、ユーザーがキャンセルできるようにしましょう。

• ユーザーに対話をさせましょう。 意味しているのは、コンテンツを自動的に更新したり、リダイレクトしたり、再表示したりしないことです。カルーセルを使用したり、警告なしにポップアップを表示したりしないでください。

• JavaScript のないユーザーのためにプラン B を用意しましょう。 スピードとセキュリティを向上させるためにJavaScriptをオフに設定していることがあり、ユーザーはネットワークの問題によってスクリプトを読み込むことができないことがよくあります。さらに、サードパーティーのスクリプト（広告、トラッキングスクリプト、ブラウザー拡張機能）がブラウザースクリプトを壊す可能性もあります。

  • 少なくとも、 <noscript> で <noscript>このサイトを使用するには、 JavaScript を有効にしてください</noscript> というような短いメッセージを残してください。
  • 可能な限り、JavaScript の機能を HTML とサーバーサイドスクリプトで再現するのが理想的です。
  • 単純な視覚効果だけなら、 CSS の方が直感的に実現できることが多いでしょう。
  • ほとんどの人が JavaScript を有効にしているので、 <noscript> はアクセシビリティのないスクリプトを書く言い訳にはなりません。

もっと学ぶ

• <script>
• <noscript>
• Writing JavaScript with Accessibility in Mind (Manuel Matuzovic, 2017)
• Accessibility guidelines from W3C