アクセシビリティ

Plain Elements はコンポーネントの操作性を実装しますが、アクセシブルな名前、コンテンツ、スタイル、アプリケーション全体のテストは利用者の責任です。

ライブラリが行うこと

• ARIA 属性の同期(状態に応じた aria-expanded、aria-controls、aria-labelledby などの更新)
• 各コンポーネントに必要なキーボード操作(矢印キー、Escape、Enter / Space など)
• フォーカス管理(開閉時のフォーカス移動と、閉じたときのトリガーへのフォーカスの復元。モーダルの Dialog では、ネイティブ <dialog> によるフォーカスの閉じ込めをそのまま利用します)

利用者が行うこと

ドキュメントのマークアップに従う

コンポーネント例に示すマークアップを使ってください。

• Dialog には <dialog>、ネイティブ Accordion には <details> / <summary> を使います。
• トリガーは、他に適したネイティブインタラクティブ要素がない限り <button type="button"> を使います。
• Tabs は HTML にネイティブなタブ要素がないため、ライブラリが ARIA タブパターンを追加します。

ラベルと説明を用意する

すべてのコントロールにはアクセシブルな名前が必要です。可視テキストを優先し、それが難しい場合だけ aria-label や aria-labelledby を使ってください。

data-dialog-title や data-dialog-description のような属性を指定すると、対応する要素が aria-labelledby / aria-describedby で自動的に関連付けられます。

<pe-dialog id="delete-project">
  <dialog>
    <h2 data-dialog-title>Delete project?</h2>
    <p data-dialog-description>This action cannot be undone.</p>
    <button type="button" data-dialog-close>Cancel</button>
    <button type="button">Delete project</button>
  </dialog>
</pe-dialog>

Tooltip には、操作の理解や完了に必須の情報を含めないでください。

キーボードとフォーカスを確認する

フォーカスを常に見える状態にします。コンテンツの開閉、無効化、動的な変更が起きた後のフォーカス位置も確認してください。

アプリケーション全体のテスト

• キーボードのみで完成した UI を操作する。
• アクセシビリティツリーで名前、ロール、状態、関係を確認する。
• 対象のスクリーンリーダーとブラウザでテストする。
• フォーカス、ズーム、コントラスト、動きの軽減、ハイコントラストを最終的な CSS で確認する。