Webのスライダーは、画像や案内を同じ領域で切り替える部品です。カルーセルやスライドショーとも呼ばれます。音量などの値を動かす入力部品のsliderとは別の意味です。W3Cのチュートリアルは、項目の切替、キーボード操作、変更の通知、動きの停止を扱っています。

架空の手入れ案内で、説明書の確認、道具の準備、作業の判断という三つの項目を切り替えます。ただし本来は順序を一度に見せたほうが理解しやすいこともあります。比較したい価格、申込みの条件、緊急の注意のように見落とせない情報は、スライダーの後ろの項目だけへ置かないでください。

本例は自動で切り替えず、前と次のボタンを押す手動式です。画像のスワイプ、無限に流れる広告、複数の部品の同期などは扱いません。目的に必要な機能を先に決め、学習用の最小例で操作を理解します。既存CMSへの挿入では、テーマやプラグインの作る部品との競合を別に確認します。

作る方法は、一覧で見せる、自分でHTML・CSS・JavaScriptを書く、既存CMSの部品を使う、の順に用途へ照らして選びます。CMSは文章や画像を管理画面から更新する仕組みです。同時に比較する条件や必須の注意は一覧が候補になります。切替が必要で仕組みを学ぶなら本稿の自作例、既存サイトで編集を続けるなら環境に対応した部品を検討します。既存部品にもキーボード操作や停止、更新と互換性の確認が必要です。

この章の根拠：出典1出典2

新しいslider-demoフォルダーへ三つのファイルをUTF-8のプレーンテキストで保存します。HTMLにあるlinkとscriptは同じフォルダーのCSSとJavaScriptを指定します。deferはHTMLの読込み後にスクリプトを実行する指定です。全文を既存のWordPress投稿へそのまま貼る方法とは違います。

HTMLでは三つの案内を全て表示し、操作ボタンの領域だけhiddenにしています。JavaScriptを読めない場合でも内容は一覧として読めます。次章の処理が準備できたときだけ一つの案内を表示し、ボタンを出します。これにより、読み込みの失敗が情報の消失にならない構成にします。

ボタンはbutton要素で、type="button"を明記します。divへクリック処理を足しただけでは、ボタンと同じキーボード操作にはなりません。「前の案内」「次の案内」という名前を付け、矢印の見た目だけに頼らない例にしています。実際の画像へ変える場合は、その画像が伝える内容を代わりの文章で説明します。

この章の根拠：出典2出典3出典4

JavaScriptは現在の位置をindexという番号で持ちます。プログラム内は0から数え、画面へは1から表示します。次のボタンなら番号へ1を足し、前なら1を引きます。端まで進むと最初へ戻る計算なので、三つの次は一つ目です。自動再生のタイマーはありません。

show関数は現在以外の案内へhiddenを付け、現在の案内からhiddenを外します。非表示にする項目の中へフォーカスを移す処理はありません。操作後も押したボタンへ位置を保つので、繰り返し前後へ進めます。位置の文章をaria-live="polite"の領域へ更新し、支援技術にも変更を知らせる意図です。読み上げの実際の挙動はブラウザーと支援技術で確認が必要です。

CSSはhiddenの付いた案内へdisplay:noneを指定します。一般のslideへdisplay:blockなどを指定するとhiddenの表示を上書きする場合があるため、競合を確認します。全ての条件がそろったあとshow(0)を実行し、操作領域を出します。これは独自の練習例で、W3Cの完全な実装や適合認証を再現したものではありません。

この章の根拠：出典2出典4

index.htmlをブラウザーで開き、初めは一つ目と1/3の位置が出ることを見ます。次を押すと二つ目、三つ目、また一つ目へ進みます。前を押すと逆の順番になります。表示の案内名と位置の文章が合っているかを確認します。見出しが長い例を入れて、途中で切れないことも試します。

Tabキーで前と次のボタンへ移り、EnterまたはSpaceで切り替えます。選択位置の枠が見え、切り替えたあとも同じボタンを操作できることを確かめます。マウスを使ったときだけ動く実装になっていないかを見るための確認です。矢印キーやスワイプの操作は本例では実装していません。

フォーカスは、キーボードが次に操作する対象です。本例の切替処理はフォーカスを別の項目へ移す命令を加えていません。Tabで選んだボタンをEnterやSpaceで操作した場合は、そのボタンを続けて操作できるかを確かめます。一方、マウスクリックでボタンがフォーカスを得るかはブラウザーとOSで異なります。MDNはSafariではクリックでフォーカスを与えない設計を説明しています。マウスとキーボードの確認結果を同じ扱いにしないでください。

375px程度の狭い幅と、文字を拡大した状態で、ボタンと文章が読めるかを見ます。画像へ変えるなら画像の大きさ、説明、読み込み中の状態も試します。JavaScriptを読み込まない複製では三項目が一覧で読め、動かないボタンが出ないことを確認します。これらは検証手順であり、読者の実環境で試す前に合格済みとは扱いません。

この章の根拠：出典1出典2出典3出典3

全項目が表示され、ボタンがない場合は、JavaScriptが読めていない可能性があります。slider.jsの名前とscriptのsrcを確認し、開発者ツールのConsoleでエラーを見ます。ボタンだけ出ないときはcontrolsのクラス、prev・next・positionのid、括弧の対応を確認します。重複したidを持つ別の部品を追加しないでください。

全項目が重なって見える場合は、hiddenを上書きするCSSを見ます。学習用のHTMLでは動いても、既存テーマの.slideへ付くルールに影響されることがあります。実サイトへ組み込むなら独自のクラス名と読み込み方を担当者が決め、変更前のファイルとCMSのバックアップから戻せる状態を確かめます。大きい部品へ拡張する場合は、公式の動作例や採用ライブラリーの現行仕様も読みます。

自動再生を足すならタイマーだけで済みません。停止・再開のボタン、フォーカスが入ったときとポインターが上にあるときの停止、読者が明示するまで再開しない条件などを検討します。APGはこれらの制御を説明しています。読者が読める時間や動きへの配慮が必要です。自動再生の必要がない本例には追加しません。

この章の根拠：出典2出典4出典3

完成例は三つのファイルだけで動く小さな練習です。次と前で案内が切り替わり、現在の番号と名前を知らせます。自動回転は使わず、読む人が進む時点を決められます。必要な注意を隠さないことと、一覧のほうが向く内容も判断に含めてください。

公開用へ変える場合は、実際の文章・画像・利用権、支援技術での操作、テーマの競合、読み込み失敗と復旧を別に確認します。本稿のコードをそのまま本番の部品として確定しないでください。ボタンの名前、順序、切替内容を確認表へ書くと、実装担当が必要な動作を理解できます。

この章の根拠：出典1出典2出典4