1. アクセシビリティとは何か

アクセシビリティとは、年齢や体の状態に関係なく、誰でも使いやすいように工夫する考え方です。

たとえば、文字を音声で読み上げる機械や、キーボードだけで操作する人にも情報が正しく伝わることが大切になります。

Reactのリスト表示でも、アクセシビリティを意識すると見えない部分の使いやすさが大きく向上します。

2. 正しいHTML要素でリストを作る

リストを表示するときは、見た目だけでなく、意味を持ったHTMLを使うことが重要です。

項目が並ぶ場合は、 ulやolとliを使うことで、機械にもこれはリストだと正しく伝わります。


function App() {
  const items = ["りんご", "みかん", "ばなな"];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

（果物の名前がリストとして表示されます）

3. keyはアクセシビリティにも関係する

keyは、 Reactがリストの中身を正しく管理するための目印です。

画面を読み上げる機械も、要素の並びが安定していることで、正しい順番で読み上げられます。

重複しない、分かりやすいkeyを設定することが大切です。

4. ボタン付きリストで操作しやすくする

リストの中に操作がある場合は、必ずbuttonを使います。

divをクリックできるようにするより、 buttonを使う方が、キーボード操作や読み上げに対応できます。


function App() {
  const tasks = ["掃除", "洗濯", "買い物"];

  return (
    <ul>
      {tasks.map(task => (
        <li key={task}>
          {task}
          <button>完了</button>
        </li>
      ))}
    </ul>
  );
}

（各項目の横に完了ボタンが表示されます）

5. 読み上げを意識したテキストを書く

画面に表示される文字は、そのまま音声で読み上げられます。

記号だけの表示や、意味が分かりにくい言葉は避けた方が良いです。

誰が聞いても内容が分かる表現を心がけます。

6. aria属性で補足情報を伝える

ariaは、画面を読み上げる機械に補足説明を伝えるための仕組みです。

見た目では分かるけれど、言葉が足りない部分を補うことができます。


function App() {
  const messages = ["新着メッセージ", "未読メッセージ"];

  return (
    <ul aria-label="メッセージ一覧">
      {messages.map(message => (
        <li key={message}>{message}</li>
      ))}
    </ul>
  );
}

（読み上げ時にリストの内容が分かりやすくなります）