「その説明、誰に届いてる？」アクセシビリティの第一歩：aria-describedbyで“伝わる”フォームを作ろう
Web制作を始めたばかりの頃、フォーム作りって少し緊張しませんか？「名前を入力して、メールアドレスを入れて…」とコードを書いていく中で、ふとこんな悩みにぶつかるはずです。
「パスワードの入力欄の下に『8文字以上で入力してください』って小さく書きたいんだけど、これってどうやってプログラムに教えればいいんだろう？」
見た目上はただの文字ですが、視覚障害のある方が使う「スクリーンリーダー（画面読み上げソフト）」を使っている方にとっては、その説明文が入力欄と結びついていないと、「ここは何を入力すればいいの？」と迷子になってしまうかもしれません。
そこで今日は、魔法の属性`aria-describedby`を使って、どんな人にも親切なWebサイトを作るコツをお話ししますね。
—
そもそも「関連付け」ってどういうこと？
例えば、スーパーのお会計で「ここがレジです」という看板があるのに、肝心のレジ機が離れた場所にあったら困りますよね。Webの世界でも同じです。「入力欄」と「説明文」を物理的に近くに置くだけでなく、プログラム的にも「この説明文は、この入力欄のためのものですよ」と紐付けてあげる必要があります。
ここで登場するのが`aria-describedby`です。
イメージとしては、入力欄に「付箋（ふせん）」を貼って、そこに「説明文のID」を書いておくような感じです。「この入力欄について困ったら、あのIDの場所を見てね！」と教えてあげるんですね。
—
さっそくコードを書いてみよう！
難しく考えなくて大丈夫です！たったの2ステップです。
1. 説明文にIDをつける（名前を呼べるようにする）
2. 入力欄に`aria-describedby`を書いて、IDを呼び出す
※パスワードは半角英数字8文字以上で入力してください。
これだけで、スクリーンリーダーは入力欄にフォーカスが当たった瞬間、「パスワードを入力、編集テキスト。※パスワードは半角英数字8文字以上で入力してください」と、補足説明までしっかり読み上げてくれるようになります。
これなら、画面が見えにくい方でも迷わずお買い物ができますよね。
—
ここでちょっと「つまずきポイント」をフォロー
よくある質問が「`aria-label`と何が違うの？」というもの。大丈夫、最初は混乱します！
- `aria-label`：入力欄そのものの「名前（ラベル）」を教えるもの。
- 例：「ユーザー名」
- `aria-describedby`：入力欄の「補足説明」を教えるもの。
- 例：「※8文字以上で入力」
「名前（ラベル）」は必須だけど、「補足説明」は状況に応じて足すもの。そう覚えると、少しスッキリしませんか？
—
現場の視点：やりすぎには注意！
ここまで読んで「じゃあ全部のテキストに`aria-describedby`を付ければいいんだ！」と思ったあなた、ストップです！
実は、なんでもかんでも紐付けてしまうと、今度は読み上げが長すぎて、ユーザーさんが「もういいよ！」と疲れてしまうことがあります。「この説明がないと、入力できないかも？」という、本当に必要な時にだけ使うのが、プロのこだわりポイントです。
最後に：Webは誰にでも開かれている
アクセシビリティというと「難しいルール」に感じがちですが、根っこにあるのは「目の前のユーザーさんに迷ってほしくない」という、ただそれだけの優しさです。
今日覚えた`aria-describedby`は、あなたのコードに「思いやり」という機能をインストールするようなもの。ぜひ、次回のフォーム制作から「この入力欄、誰かに説明が必要かな？」と一呼吸置いてみてくださいね。
皆さんの作るWebサイトが、一人でも多くの人に「使いやすい！」と思ってもらえることを、心から応援しています！また分からないことがあれば、いつでも聞きに来てくださいね。
コメント