もっとも初歩のアクセシビリティ7つのポイント～小さな工夫で変わるWebサイト改善ヒント

アクセシビリティとは、障がいのある方や高齢者、すべてのユーザーが快適に使えるようにする工夫のことです。ウェブサイトは誰にでも見やすく、使いやすいことが大切です。今回は初心者でも簡単に実践できる7つのポイントを紹介します。少しずつ改善して、より使いやすいサイトを目指しましょう。

1. 画像に代替テキスト（alt属性）をつける

画像には必ずalt属性を設定しましょう。スクリーンリーダーを使う方も内容を理解できます。装飾だけの画像でも簡単な説明をつけることがポイントです。

• ダメな例：alt=””（空欄で説明がない）
• いい例：alt=”学生があつまってじゃんけんをしている様子”（画像内容を簡潔に説明している）

※ただし、キャプションがついている場合は空のaltでも良い場合があります

2. 見出しタグ（H1・h2・H3）で構造を明確にする

見出しタグを正しい順序で使うことで、スクリーンリーダーがページ構造を理解しやすくなります。H1は1ページ1つ、H2やH3などの中見出しは章や小項目に使いましょう。

• ダメな例：H1が複数ある、H1の次にH3がある
• いい例：H1はページタイトル、H2で章、H3で小項目と順序を整理している

3. コントラストを十分にする

文字と背景の色の差（コントラスト）が低いと、視覚に障がいのある方が読みづらくなります。十分なコントラストを確保しましょう。

• ダメな例：薄いグレー文字に白背景で読みづらい
• いい例：黒文字に白背景（コントラスト比をはっきりする）

4. リンクやボタンにわかりやすいラベルをつける

リンクやボタンは「こちらをクリック」ではなく、内容がわかる文章にします。スクリーンリーダーでも使いやすくなります。

• ダメな例：「〇〇〇〇〇〇はこちら」の中で、リンクが「こちら」だけ
• いい例：「〇〇〇〇〇〇はこちら」の全体をリンクにする

5. フォームにラベルをつける

お問い合わせフォームや検索フォームには必ずラベルをつけましょう。入力欄が何の情報か明確になり、誰でも操作しやすくなります。

• ダメな例：テキストボックスだけで「名前」「メールアドレス」と書かれていない
• いい例：各入力欄にタグで「名前」「メールアドレス」と記載する

6. 動画に字幕や文字起こしをつける

動画を掲載する場合、字幕や文字起こしをつけることで、耳が不自由な方や音声が出せない環境でもユーザーに内容が伝わります。

• ダメな例：音声だけで字幕や文字起こしがない
• いい例：動画に日本語字幕を付け、文字起こしも同ページで提供されている

7. キーボード操作でも使いやすくする

マウスを使わず、キーボードだけで操作できることも大切です。リンクやボタンがタブキーで移動できると便利です。

• ダメな例：ボタンがキーボードで選択できない
• いい例：タブキーでリンクやボタンに移動でき、Enterで操作可能

まとめ

アクセシビリティは特別な知識がなくても、基本を押さえれば大きく改善できます。少しずつ改善して、すべての訪問者に優しいウェブサイトを目指しましょう。

他の記事を読む

デザインプレビューとは? – Web担当者が理解しておきたい基本用語

担当者がウェブサイトの公開前に気をつけておきたいポイント

デザインファイルとは? – Web担当者が理解しておきたい基本用語

サムネイル画像とは何か? Web担当者が理解しておきたい基本用語

「こちら」だけのリンクを改善！クリックしやすいリンクとは

YouTubeを使わずに動画を掲載できますか？ – よくある質問にお答えします

CTAとは? Web担当者が理解しておきたい基本用語

ヘッダー・フッターとは? – Web担当者が理解しておきたい基本用語

大学の周年事業サイトに入れたい内容4選

原稿を用意しよう – ウェブサイトの発注担当者が知っておきたい作成フロー