リストを選択する、という「魔法」。aria-selectedでアクセシブルなUIを作ろう
こんにちは！Webの世界へようこそ。
HTMLを書き始めたばかりの頃って、「タグは覚えたけど、これってどう動かせばいいの？」と迷子になってしまうこと、ありますよね。
今日は、Webサイトでよく見かける「リストアイテムをクリックして選択状態にする」という機能について、少しだけ深く、でも優しくお話しします。
「ただ色が変わるだけ」と思われがちなこの操作。実は、HTMLには「今、これが選ばれているよ！」とコンピューターや画面読み上げソフトに伝える魔法の言葉があるんです。それが `aria-selected` 属性です。
—
なぜ「aria-selected」が必要なの？
例えば、お買い物サイトのサイズ選択を想像してみてください。
「S」「M」「L」というボタン（リスト）が並んでいて、クリックすると色が反転しますよね。
人間は見た目で「あ、Mが選ばれているな」とわかります。でも、目の不自由な方が使う「画面読み上げソフト」は、ただの色変わりだけでは「どの項目が選ばれているのか」を判断するのが難しいんです。
そこで登場するのが `aria-selected`。
これは「この項目は今、選択されています！」という名札を、裏側でそっと掲げてあげるようなものです。これがあるだけで、Webサイトは誰にとっても使いやすい「優しい場所」に変わります。
—
ステップ1：HTMLでリストの枠組みを作る
まずは、リストの土台となるHTMLを用意しましょう。ここでは「お好みのトッピング」を選ぶリストを想定します。
- チョコチップ
- キャラメル
- ベリーソース
ここで大切なポイントが3つ。
1. `role=”listbox”` と `role=”option”`：HTMLに「これはただのリストじゃなくて、選択リストなんだよ」と教えてあげます。
2. `aria-selected=”false”`：最初は何も選ばれていないので、`false`（偽）にしておきます。
3. `tabindex=”0″`：これを書くことで、マウスだけでなくキーボードの「Tabキー」でも操作できるようになります。これがアクセシビリティの第一歩です！
—
ステップ2：JavaScriptで「選ばれた！」を検知する
次に、JavaScriptを使って「クリックされたら名札を書き換える」という処理を書いてみましょう。
// リスト内のすべての項目を取得します
const items = document.querySelectorAll(‘[role=”option”]’);
items.forEach(item => {
item.addEventListener(‘click’, () => {
// 1. 他の項目が選択されていたら、一旦その名札（aria-selected）をfalseにします
items.forEach(i => i.setAttribute(‘aria-selected’, ‘false’));
// 2. クリックされた項目だけ、名札をtrueにします
item.setAttribute(‘aria-selected’, ‘true’);
console.log(“今選ばれているのは: ” + item.textContent);
});
});
どうでしょう？意外とシンプルですよね。
「全部の選択を解除してから、選んだものだけをTrueにする」。この手順を踏むことで、単一選択のUIが完成します。
—
ステップ3：CSSで「選ばれていること」を伝える
最後に、CSSで見た目を整えましょう。`aria-selected` の状態に合わせてスタイルを切り替えるのがコツです。
/ 選択されていないときの見た目 /
[role=”option”] {
padding: 10px;
cursor: pointer;
border: 1px solid #ccc;
}
/ 選択されたときだけ、色を変える魔法のCSS /
[role=”option”][aria-selected=”true”] {
background-color: #ffcccc; / ほんのりピンクに /
border: 2px solid #ff6666;
font-weight: bold;
}
CSSのカッコの中に `[aria-selected=”true”]` と書くことで、「属性がTrueのときだけこのスタイルを適用してね」と指示を出しています。これなら、JavaScriptで属性を書き換えるだけで、見た目も自動的に変わってくれるんです。
—
最後に：つまずいても大丈夫！
最初は「role？ aria？ 何か難しそう…」と感じるかもしれません。でも、これらは「誰かに優しくするための工夫」です。
完璧に使いこなそうと気負う必要はありません。「あ、このリストは選択できるものだから、aria-selectedを付けてみようかな？」という小さな気づきが、あなたの作るWebサイトを確実に素晴らしいものにしていきます。
まずはコードをコピーして、ブラウザで動かしてみてください。「色がパッと変わる瞬間」って、やっぱり何度見ても楽しいですよ！
また何か分からないことがあれば、いつでも聞きに来てくださいね。あなたのWeb制作ライフを、ずっと応援しています！
コメント