アクセシビリティの基礎
画像にaltテキストを追加し、使いやすいWebページを作成します
「アクセシビリティの基礎」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
アクセシブルなページを作る
アクセシビリティの基本
次のレッスンへようこそ！今日は、障害のある人を含むすべての人が利用できるWebページを作る方法を学びます。アクセシビリティは、使いやすいWebサイトを構築するうえで重要な要素です。
アクセシビリティとは？
アクセシビリティとは、能力にかかわらず、すべてのユーザーがWebページを利用できるようにすることです。次のような人々が対象になります。
- 視覚や聴覚に障害がある人。
- スクリーンリーダーなどの支援技術を使う人。
- マウスではなくキーボードを使ってWebサイトを操作する人。
より多くの人が利用できるページの作り方を学びましょう！
画像に代替テキストを追加する
<img>タグのalt属性を使って、画像を説明します。これにより、スクリーンリーダーが視覚障害のあるユーザーに画像の内容を伝えられます。
例：
<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />
セマンティックHTMLを使う
セマンティックタグ（<header>、<nav>、<footer>など）を使うと、支援技術がページの構造を理解しやすくなります。
例：
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<footer>
<p>© 2024 My Blog</p>
</footer>
キーボード操作
リンクやボタンなど、すべてのインタラクティブ要素にTabキーでアクセスできることを確認してください。tabindex属性を使うと、タブ移動の順序を制御できます。
例：
<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>
入力欄にラベルを付ける
<label>タグを使って、入力欄の内容を明確に説明します。for属性を使って、ラベルと入力欄を関連付けます。
例:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
色のコントラスト
誰もがコンテンツを簡単に読めるように、テキストと背景色の間に十分なコントラストを確保します。オンラインツールを使って、色のコントラスト比を確認しましょう。
ヒント: コントラストを高くすると、視覚に障害のあるユーザーにとって読みやすくなります。
例:
<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>
自分で試す
アクセシブルなフォームを作成してみましょう。次の例をご覧ください。
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form</title>
</head>
<body>
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">Sign Up</button>
</form>
</body>
</html>
アクセシビリティのまとめ
よくできました！
おめでとうございます！Webページを誰もが利用しやすくする方法を学びました。アクセシビリティは、現代のWeb開発に欠かせない要素です。次のレッスンでは、HTMLコードがWeb標準に準拠していることを確認するための検証方法を学びます。スキルをさらに磨く準備をしましょう！
よくある質問
「アクセシビリティの基礎」レッスンは無料ですか？
はい。「アクセシビリティの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「アクセシビリティの基礎」で何を学びますか？
画像にaltテキストを追加し、使いやすいWebページを作成します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「アクセシビリティの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 読みやすいコードを書く
- アクセシビリティの基礎
- HTMLを検証する
- HTMLコメント