accessibility

アクセシビリティ（WCAG 2.2 AA）

基本原則

• セマンティック HTML 要素と ARIA ランドマーク
• キーボード操作を優先し、フォーカス状態を明確に表示
• レイアウトのメインコンテンツへのスキップリンク
• インクルーシブで、人を尊重する表現

セマンティック HTML

<header>、<nav aria-label="...">、<main id="main-content">、<section aria-labelledby="...">、<footer> を使用します。見出しの階層（h1 → h2 → h3）は必ず守ってください。

スキップリンク

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute ...">
    Skip to main content
</a>

フォームのアクセシビリティ

• すべてのコントロールにラベルを付ける：<label for="email"> を使用するか、アイコンのみの入力には aria-label を設定します
• 必須フィールド：視覚的な *（aria-hidden="true"）とともに required aria-required="true" を使用します
• エラーメッセージ：aria-describedby で関連付け、aria-invalid={hasError} を設定します
• 検証に失敗した場合：最初の無効な入力にフォーカスを移します
• 検証を妨げるためだけに送信ボタンを無効にすることは絶対に避けてください

<input id="email" aria-invalid={hasError} aria-describedby={hasError ? 'email-error' : undefined} />
{#if hasError}
    <p id="email-error" class="text-destructive">Please enter a valid email address</p>
{/if}

キーボード操作

• 自然なタブ順序は DOM の順序に従います。正の tabindex は避けてください
• 非表示または非アクティブな要素には tabindex="-1" を使用します
• ダイアログ：開いたときに最初の操作可能な要素にフォーカスを移し、閉じたときにトリガーにフォーカスを戻します
• ボタン以外の操作可能な要素では、Enter と Space のキーイベントを処理する必要があります

アイコンボタン

aria-label を必ず追加し、アイコンを支援技術から隠します。

<button aria-label="Delete event">
    <TrashIcon aria-hidden="true" />
</button>

アイコンに表示テキストを添える場合は、アイコンを隠すだけで十分です：<PlusIcon aria-hidden="true" />。

ARIA パターン

動的な更新にはライブリージョンを使用します。

<div aria-live="polite" aria-atomic="true">{#if loading}Loading events...{/if}</div>
<div role="alert">Error: Failed to save changes</div>

展開可能なコンテンツ：トリガーに aria-expanded と aria-controls を、パネルに hidden を使用します。

色とコントラスト

• 最小コントラスト比：通常のテキストは 4.5:1、大きなテキストと UI コンポーネントは 3:1
• 色だけに頼らず、アイコンやテキストも組み合わせます

<span class="text-destructive"><AlertIcon aria-hidden="true" /> Error: Invalid input</span>

テスト

E2E テストで axe-playwright（AxeBuilder({ page }).analyze()）を使用し、アクセシビリティ違反を検出します。