アクセシビリティ · Tinyrack Design System

アクセシビリティをシステム要件として扱う

視覚情報、色、細かなポインター操作、モーション、広い画面に依存しなくてもタスクを完了できる方法を先に決め、その後で視覚表現を選んでください。ネイティブ HTML と Tinyrack のコンポーネント契約から始め、HTML だけでは表せない情報に限って ARIA を追加します。トークンは適切な判断を一貫して適用する助けになりますが、誤った構造をアクセシブルにはできません。

WCAG の確認項目は、完成したプロダクトフローの受け入れ条件として扱ってください。トークンやコンポーネント単体で、ページ全体の適合を保証することはできません。コンテンツ、構成、アプリケーションの状態、支援技術での動作も検証します。

セマンティクスとアクセシブルな名前

動作に合う要素を選んでください。操作にはボタン、移動にはリンク、文書構造には見出し、フォームコントロールにはラベルを使います。すべてのインタラクティブなコントロールに、実行する操作や移動先が分かる名前が必要です。通常は表示テキストが最も伝わりやすい名前です。アイコンだけのコントロールには aria-label を使い、装飾アイコンはアクセシビリティツリーから隠してください。

アイコンボタンとファウンデーショントークンを利用できるよう、グローバルスタイルシートに以下を追加してください。

@import "@tinyrack/ui/core.css";
@import "@tinyrack/ui/components/icon-button.css";

その後でアイコンボタンをレンダリングします。

import { TRIconButton } from '@tinyrack/ui/components/icon-button';

<TRIconButton aria-label="ラックの状態を更新">
  <span aria-hidden="true">↻</span>
</TRIconButton>

説明やエラーメッセージを対象フィールドに関連付けてください。Tinyrack の Field ガイドでは、ラベル、説明、エラー、コントロールの構成を確認できます。必須の説明をプレースホルダーやツールチップだけに置かないでください。

キーボード操作と視認できるフォーカス

すべてのポインター操作を、キーボードでも実行できるようにしてください。メニュー、タブ、ラジオグループなどの複合ウィジェットでは、コンポーネントに記載されたキー操作に従い、クリック可能な div で作り直さないでください。フォーカス順序を読む順序に合わせ、オーバーレイを閉じた後はフォーカスを戻し、正の tabIndex は避けます。

Tinyrack コンポーネントは、共通の :focus-visible スタイルで --tinyrack-focus、--tinyrack-focus-width、--tinyrack-focus-offset を使います。コンポーネントを装飾するときも、この表示を維持してください。独自のインタラクティブ要素が必要な場合は、同じセマンティックトークンを適用します。

フォーカスの位置はコントロールの境界に合わせます。テキスト入力、テキストエリア、Select トリガーなど、フィールド全体に境界線があるコントロールでは、2px の表示を境界線の内側に描画します。境界線がないコントロール、小さな選択コントロール、独立した操作には外側のフォーカス表示を使い、テキスト、アイコン、状態表示を覆わないようにします。検証エラーのあるフィールドでは、同じ内側の位置に danger の境界色を使い、関連付けたエラーメッセージでも問題を説明してください。

.rack-action:focus-visible {
  outline: var(--tinyrack-focus-width) solid var(--tinyrack-focus);
  outline-offset: var(--tinyrack-focus-offset);
}

Tinyrack はこの表示をキーボードフォーカスにだけ描画します。テキストフィールドはフォーカスの入り方に関係なく :focus-visible に一致するため、そのままではマウスクリックでも Tab と同じリングが描かれます。WCAG が求めるのはキーボードフォーカスの表示なので、コンポーネントが入力方式を追跡し、data-tr-focus-modality としてドキュメント要素に公開し、コンポーネントの CSS がその属性を読み取ります。

入力方式に依存するコンポーネントは、マウントされている間だけ追跡を実行します。それらのコンポーネントを使わずスタイルシートだけを読み込む場合や、最初のコントロールがマウントされる前から実行したい場合は、自分で開始してください。

import { TRFocusModalityProvider } from '@tinyrack/ui/providers/focus-modality';

export function App({ children }: { children: React.ReactNode }) {
  return <TRFocusModalityProvider>{children}</TRFocusModalityProvider>;
}

追跡がない場合は属性が付かず、ポインターフォーカスでも表示が描かれます。表示を隠す方向ではなく、アクセシブルな動作を保つ方向に倒れます。

コントラストと色以外の手掛かり

--tinyrack-surface 上の --tinyrack-text、--tinyrack-primary 上の --tinyrack-on-primary、対応するステータスのテキスト・表面・境界ロールを選んでください。サポートするすべてのテーマと状態で、実際に表示された組み合わせを検査します。WCAG を基準に確認する場合は、通常テキストに 4.5:1 以上、大きなテキストに 3:1 以上、重要なコントロール境界と状態表示に 3:1 以上を使ってください。

色は意味を補強するもので、色だけで意味を伝えてはいけません。danger ロールにはエラーメッセージ、警告色にはアイコンやラベル、選択色には aria-selected などのプログラムで判別できる状態を組み合わせます。Tinyrack のセマンティックロールはカラーとテーマを参照してください。

ターゲットサイズ

ポインターターゲットは 24×24 CSS ピクセル以上にするか、WCAG 2.2 の最小ターゲット規則で認められる間隔を確保してください。頻繁にタッチする操作には、より大きなターゲットが適しています。Tinyrack のコントロール高は md が 32px、lg が 40px です。入力環境に合わせて選び、アイコンのみまたは独自コントロールでは幅と高さの両方を確認してください。見た目のアイコンは小さいまま、パディングで操作領域を広げられます。

密集した 1 行に収めるために、隣接する操作を縮めないでください。折り返す、補助操作をメニューへ移す、間隔を広げる方法を選びます。共通のサイズレシピはコントロールと状態で確認できます。

ズーム、リフロー、ローカライズ

1280px 幅の画面を 400% に拡大した場合に相当する、320 CSS ピクセルのビューポートでもタスクを完了できるよう、レイアウトをリフローさせてください。テキストの折り返しを許可し、コンテンツの高さを固定せず、ラベルが長くなっても操作へ到達できるようにします。データテーブルは、ラベルを持つ領域内で横スクロールできますが、ページと周囲の本文に二方向のスクロールを要求しないでください。

英語、韓国語、日本語をブラウザーズームと狭いビューポートで確認してください。英語の文字列だけを基準に領域を確保しないでください。列を積み重ねてもソース順序を維持し、安全な箇所では長い連続文字列を折り返し、ラベルが 2 行になっても意味を保ちます。レスポンシブな判断はレスポンシブレイアウト、読みやすい行長はタイポグラフィを参照してください。

モーションの軽減

モーションは状態や空間の変化を説明するために使い、唯一の手掛かりにはしないでください。OS からモーション軽減が要求されたら、必須ではない動きを取り除きます。動きを生じない即時の不透明度や色の変化は、軽減時にも維持できます。

.rack-panel {
  transition: transform var(--tinyrack-duration-normal)
    var(--tinyrack-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .rack-panel {
    transition: none;
  }
}

時間とイージングの選び方はモーションで確認してください。

実践的な検証チェックリスト

読み込み中、空、エラー、無効、バリデーションの各状態を含む、実際にビルドしたフローを検証してください。

キーボードだけで前後に移動します。フォーカスが見えること、キー操作が想定どおりであること、オーバーレイを閉じた後のフォーカスが自然に戻ることを確認してください。
アクセシビリティツリーを検査します。ランドマーク、見出し順序、コントロール名、説明、状態、ライブ通知を確認してください。
コントラストツールでライト・ダークテーマ、ホバー、フォーカス、選択、無効、ステータスの各状態を検査します。色がなくても情報が残ることを確認してください。
狭い画面とタッチまたは粗いポインターのエミュレーションで、ポインターターゲットと間隔を検査してください。
テキストを 200% に拡大し、400% 相当でリフローを確認します。ページ全体の横スクロールなしで、コンテンツと操作を利用できることを確認してください。
モーション軽減を有効にし、すべての状態変化が伝わることを確認してください。
ローカライズ済みコンテンツを確認し、重要なフローはサポート対象の代表的なスクリーンリーダーとブラウザーで検査してください。

自動検査はマークアップやコントラスト計算の回帰を検出しますが、キーボード、ズーム、スクリーンリーダー、タスク単位の確認を置き換えるものではありません。