なぜ今、Radix UIで「リスト」を再定義する必要があるのか
フロントエンド開発の現場で、もっとも軽視されがちなタグの代表格といえば `
- `, `
- ` が5つあれば、読み上げソフトは「5つのアイテムがあるリストです」とユーザーに伝えます。
これを `
` で代用すると、ブラウザはそれが「関連性のあるグループ」なのか「ただのレイアウトの断片」なのかを判断できません。キーボード操作（特にフォーカス管理）においても、意味的な構造が欠如していると、ユーザーは今自分がどこにいるのかを見失ってしまいます。Radix UIが提供するのは、「DOMの構造的正しさ」を保ちながら、複雑なインタラクションをARIA属性で補完するというアプローチです。
—
実践：Radix UI的アプローチによるセマンティック・リスト
今回は、単なる表示用リストではなく、Radix UIの設計思想を取り入れた「キーボード操作可能なリスト」を例に解説します。
1. `ul`, `li` の基本：構造の明確化
まずは、リストのセマンティクスを崩さないことが大前提です。Radixの `primitive` を意識した、クリーンなコンポーネント設計を見てみましょう。
// ListItem.tsx
import React from ‘react’;/
- Radix UIの設計思想を意識したListItem
- 余計なdivでラップせず、直接liにスタイルを当てることで
- スクリーンリーダーが構造を正しく解釈できるようにする
/
export const ListItem = ({ children, className }: { children: React.ReactNode, className?: string }) => (- {children}
);
// List.tsx
export const List = ({ children }: { children: React.ReactNode }) => (-
{children}
);
2. `dl`, `dt`, `dd` による「定義リスト」の活用
意外と忘れられがちなのが `dl`（Description List）です。「用語と説明」という関係性を持つデータには、これ以上の選択肢はありません。Reactで `dl` を扱う際は、フラグメント `<>…` を使って構造を保つのがポイントです。
// DefinitionList.tsx
export const DefinitionList = ({ items }: { items: { term: string, description: string }[] }) => (-
{items.map((item, index) => (
- {item.term}
- {item.description}
{/ 用語 /}{/ 定義 /}
))});
—
現場で差がつく「ARIA属性」の適正な付与
Radix UIがなぜ優れているかというと、`aria-expanded` や `aria-selected` といった属性の管理を自動化してくれるからです。もしリスト要素に対して、後から「折りたたみ機能」などを追加する場合、以下のルールを徹底してください。
1. 親要素に `role=”list”` を明示する: 稀にCSSリセットでリストスタイルを消すとスクリーンリーダーがリストと認識しないブラウザがあるため、念のため付与するのは賢い手です。
2. インタラクティブな項目には `tabIndex={0}` を使う: リスト内の項目をキーボードで移動させたい場合、Reactの `onKeyDown` ハンドラと組み合わせてフォーカス制御を行います。実践的なTips：キーボードナビゲーションの実装例
// NavigableListItem.tsx
export const NavigableListItem = ({ text }: { text: string }) => {
return (- {
if (e.key === ‘Enter’ || e.key === ‘ ‘) {
console.log(`${text} が選択されました`);
}
}}
>
{text});
};—
まとめ：泥臭い積み重ねが、エンジニアの「信頼」になる
「リストタグなんて今さら」と思うかもしれませんが、こういった細部へのこだわりこそが、シニアエンジニアとそうでないエンジニアを分かつ境界線です。
Radix UIのソースコードを覗くとわかりますが、彼らは「見た目」よりも「構造」に圧倒的なリソースを割いています。我々も、CSSで見た目を整える前に、「このDOM構造は、目が見えない人にとっても直感的に理解できるか？」を一度立ち止まって考えてみてください。
その「泥臭い」配慮こそが、ユーザーにとって最高のUXを生み出し、結果としてあなたの書くコードの価値を底上げします。明日からの実装では、ぜひ `ul` や `dl` をもう一度見つめ直してみてください。きっと、より美しいマークアップが見えてくるはずです。
- `, そして `
- ` でしょう。正直に告白すると、かつて僕も「ただの箇条書きだし、`div` で囲ってスタイルを当てれば見た目は同じだろ？」と安易に考えていた時期がありました。
しかし、アクセシビリティ（A11y）の要件が厳格化する現代のWeb開発において、その考え方は「技術的負債」以外の何物でもありません。特に、Radix UIのようなヘッドレスUIライブラリに触れると、「セマンティックなマークアップこそが最高のUXの土台である」という真理に突き当たります。
今日は、Radix UIの設計思想を借りつつ、リスト系要素を単なる「見た目の容器」から「意味のある構造」へと昇華させるための実践的なテクニックを共有します。
—
ブラウザは「リスト」をどう解釈しているのか
まず、ブラウザのエンジン（BlinkやWebKit）がリストタグをどう処理しているかを理解しましょう。
`
- ` や `
- ` を正しく使うことは、単にCSSで箇条書きの点が出るだけではありません。スクリーンリーダーがDOMを解析する際、これらは「リストの開始」という明確な境界線として認識されます。例えば、リスト内に `
コメント