Name: アクセシブルなフォトギャラリーを作る
Author: Labby

アクセシブルなフォトギャラリーを作る

画像とキャプションの正しい対応、キーボード操作、ネイティブダイアログ、分かりやすい画像読み込みエラーを備えたレスポンシブな写真展を作ります。

プロジェクトウェブ開発

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、ここをクリックしてください

はじめに

「アクセシブルなフォトギャラリーを作る」は、HTML、CSS、JavaScript の基礎を学び、それらを組み合わせて一通り使える閲覧体験を作りたい方のための実践プロジェクトです。サムネイル、大きな画像、タイトル、説明の対応が閲覧中も正しく保たれる、ローカルの写真展を制作します。

ガイド付きラボでは、ギャラリーのレイアウトと詳細ビューアーを段階的に作ります。独立したチャレンジでは、同じタイトルの写真、長いタイトル、異なる縦横比を含む別の写真展に、同じ手法を応用します。各ラボには、それぞれ独立した開始用ファイルが用意されています。

学習内容

このコースを修了すると、次のことができるようになります。

固定の写真 ID を使って、正しいサムネイル、大きな画像、代替テキスト、キャプションを対応付ける。
意味のある HTML と視認できるキーボードフォーカスを備えた、レスポンシブなギャラリーを作る。
ネイティブの dialog 要素で写真を表示し、移動時に画像、タイトル、説明をまとめて更新する。
最初と最後の写真で移動の限界を明確にし、Esc でビューアーを閉じ、開いた元のカードへフォーカスを戻す。
画像の読み込みに失敗したとき、別の写真に黙って差し替えずに分かりやすいメッセージを表示し、誤ったファイルパスを修正する。

このコースの対象者

このコースは、個別に学んだ Web の演習を組み合わせて、実際に使える写真展を作りたい方を対象としています。

前提知識： HTML 要素、基本的な CSS レイアウト、JavaScript のオブジェクト、関数、DOM 操作、イベントに慣れている必要があります。プロジェクトファイルを開いて保存できることも前提です。ギャラリーに必要なセマンティクス、ネイティブダイアログの動作、フォーカスの扱いはガイド付きラボで説明します。React の知識は不要です。

学習環境： LabEx は準備済みの WebIDE、Terminal、Gallery とローカル画像を提供します。WebIDE で既存の HTML、CSS、JavaScript を読み、動作を予測し、必要な箇所を編集して保存します。Gallery では実際のサイトを観察し、キーボード操作を確かめます。ギャラリーの画面ラベルは英語のままです。