Skip to content

Shadcn Sheetコンポーネントのアクセシビリティエラー解決法

ShadcnのSheetコンポーネント使用時に以下のエラーが発生する場合の原因と解決策を解説します。

コンソールエラー

bash
DialogContent requires a DialogTitle for the component to be accessible for screen reader users.

問題の原因

このエラーが発生する主な理由:

  1. ShadcnのSheetコンポーネントは内部的にDialogコンポーネントを継承
  2. アクセシビリティ要件として<SheetContent>内に<SheetTitle>が必要
  3. タイトルがない場合、スクリーンリーダーユーザーがコンテンツを理解できない
  4. 質問のコード例には<SheetTitle>が存在しない
<warning> **重要な注意点** - このエラーは単なる警告ではなく**アクセシビリティ違反** - タイトルがないと障害を持つユーザーがコンテンツを利用できない - WCAG(Web Content Accessibility Guidelines)準拠のため必須要件 </warning>

基本解決策: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-onlyhiddenの違い理解

プロパティ視覚的表示スクリーンリーダーレイアウト
sr-only非表示アクセス可能影響なし
hidden (display: none)非表示アクセス不可DOMから削除
<danger> **絶対に避けるべき方法** ```typescript // 悪い例 - スクリーンリーダーから完全に非表示 <SheetTitle className="hidden">...</SheetTitle> ``` この方法ではアクセシビリティ要件を満たせず、エラーが解消されない上に法的リスクの原因になります。 </danger>

補足とベストプラクティス

  1. タイトルテキストの重要性

    • 空のタイトルは避ける(<SheetTitle />のみはNG)
    • コンテキストを説明する簡潔なテキストを使用
    • 例: "ユーザーメニュー", "設定パネル"
  2. コンポーネントの構造

  3. エラーの発生メカニズム

    • Shadcnが内部でreact-ariaなどのライブラリを使用
    • ダイアログ/シート開封時にDialogTitleの存在チェックを実行
    • タイトルなしの場合コンソール警告とアクセシビリティ属性の不足

これらの解決法を適用することで、エラー解消とWCAG 2.1 AAレベルのアクセシビリティ基準を満たすコンポーネントが実装できます。