Shadcn Sheet
コンポーネントのアクセシビリティエラー解決法
ShadcnのSheet
コンポーネント使用時に以下のエラーが発生する場合の原因と解決策を解説します。
コンソールエラー
bash
DialogContent requires a DialogTitle for the component to be accessible for screen reader users.
問題の原因
このエラーが発生する主な理由:
- Shadcnの
Sheet
コンポーネントは内部的にDialog
コンポーネントを継承 - アクセシビリティ要件として
<SheetContent>
内に<SheetTitle>
が必要 - タイトルがない場合、スクリーンリーダーユーザーがコンテンツを理解できない
- 質問のコード例には
<SheetTitle>
が存在しない
基本解決策:SheetTitle
の追加
最もシンプルな解決法は<SheetTitle>
を追加すること:
typescript
<SheetContent side="right">
<SheetTitle>メニュー</SheetTitle> {/* 必須要素 */}
<div>
<p>シートのコンテンツ</p>
</div>
</SheetContent>
非表示タイトルの実装方法
デザイン上タイトルを表示したくない場合、視覚的に非表示にしつつスクリーンリーダーにはアクセス可能にする方法:
Tailwind CSSを使用する場合(推奨)
typescript
<SheetTitle className="sr-only">
メニューのタイトル
</SheetTitle>
カスタムCSSを使用する場合
css
/* グローバルCSSに追加 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
完全な修正コード例
typescript
<Sheet open={openMenu} onOpenChange={setOpenMenu}>
<SheetTrigger asChild>
<Button variant="ghost">
<MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="fixed z-50">
<SheetTitle className="sr-only">メインメニュー</SheetTitle> {/* 修正箇所 */}
<div>
<p>シートのコンテンツ</p>
</div>
</SheetContent>
</Sheet>
sr-only
とhidden
の違い理解
プロパティ | 視覚的表示 | スクリーンリーダー | レイアウト |
---|---|---|---|
sr-only | 非表示 | アクセス可能 | 影響なし |
hidden (display: none) | 非表示 | アクセス不可 | DOMから削除 |
補足とベストプラクティス
タイトルテキストの重要性
- 空のタイトルは避ける(
<SheetTitle />
のみはNG) - コンテキストを説明する簡潔なテキストを使用
- 例: "ユーザーメニュー", "設定パネル"
- 空のタイトルは避ける(
コンポーネントの構造
エラーの発生メカニズム
- Shadcnが内部で
react-aria
などのライブラリを使用 - ダイアログ/シート開封時に
DialogTitle
の存在チェックを実行 - タイトルなしの場合コンソール警告とアクセシビリティ属性の不足
- Shadcnが内部で
これらの解決法を適用することで、エラー解消とWCAG 2.1 AAレベルのアクセシビリティ基準を満たすコンポーネントが実装できます。