アクセシビリティ
Tanrei がトークンとコンポーネント仕様に組み込んでいるアクセシビリティ要件と、それを守らせるチェック。
Tanrei におけるアクセシビリティは、システムそのものに課した制約です。トークンのビルドは、コントラストを満たさないスキームを出力しません。コンポーネント仕様は、ロール、キーボード操作の表、ターゲットの保証がそろっていなければ有効になりません。
トークンのビルドは、すべてのスキーム（ライトとダーク、それぞれ標準・中・高コントラスト）を次のしきい値で測り、届かない組があれば失敗します。
| 対象 | 標準・中コントラスト | 高コントラスト |
|---|---|---|
| テキストと、内容の色で描くアイコン | 4.5:1 | 7:1 |
| ステータスの印と、そのステータスのトーナルコンテナ | 3:1 | 3:1 |
| コントロールの識別や操作に必要な境界とグラフィック | 3:1 | 3:1 |
| 隣接するサーフェスに対するフォーカスリング | 3:1 | 3:1 |
大きなテキストのための低いしきい値はありません。WCAG は、レギュラーで約 24px 以上、ボールドで約 19px 以上のテキストには低いコントラストを認めていますが、ビルドはテキストのロールをすべて 4.5:1（高コントラストでは 7:1）で見ます。色のロールは、自分がどの大きさで使われるかを知らないからです。
無効な要素と純粋な装飾は対象外です。標準のコントラストでは、outline-variant の細い線もこれに含まれます。コントロールがあることを示す唯一の手がかりが枠線である場合に、outline-variant ではなく outline を使わなければならないのは、この例外があるためです。
次の条件は、すべてのテーマとすべてのコントラストレベル、あわせて 6 通りの組み合わせで成り立ちます。成り立たなければビルドは失敗します。
(X, on-X)のロールの組と、すべてのサーフェスロールの上のテキストのロール（on-surface、on-surface-variant、link、インテントの色）は、いずれも 4.5:1 以上。2 つの高コントラストのスキームでは 7:1 以上。- ステータスの色は、そのステータスのトーナルコンテナに対して 3:1 以上。
outlineは、すべてのサーフェスロールに対して 3:1 以上。- 既定のシステムの中・高コントラストでは、
outline-variantは、すべてのサーフェスロールに対してそれぞれ 3:1 以上と 4.5:1 以上。outlineは常にそれより強い。 focus-ringは、サーフェスに対して 3:1 以上。
チェックを通すためにしきい値を緩めることは、プロジェクトの規則で禁じています。
The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.
| トークン | 値 | プレビュー |
|---|---|---|
--tanrei-sys-target-minimum | 32px | |
--tanrei-sys-target-pointer | 44px | |
--tanrei-sys-target-spacing | 8px | |
--tanrei-sys-target-touch | 48px |
生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json
見た目の大きさは、ヒット領域ではありません。 Tanrei の小さいボタンは高さ 32 で、密度の高いツールバーに向いていますが、それでもタッチでは 48 以上、ポインターでは 44 以上の範囲で反応します。コンポーネントはヒット領域を見えない形で広げ、隣り合うターゲットとの間を 8 以上空けます。すべての仕様がこの保証を宣言し、すべてのプラットフォームがそれをテストします。
操作可能なコンポーネントはすべて、キーボードと支援技術によるフォーカスに対して、「すき間、その外にリング」のフォーカスインジケーターを表示します。表示は即座で、アニメーションはしません。フォーカスの順序は読む順序に従います。無効なコンポーネントはフォーカスの順序から外れます。
各コンポーネントの仕様には、キーと動作の表が含まれます。この表は、ドキュメントの各ページの「アクセシビリティ」に掲載しています。ハードウェアキーボードに対応するプラットフォームは、この表のとおりに実装します。
テキストを 200% にしても、インターフェースは使える状態でなければなりません。コンテナはテキストに合わせて大きくなり、ラベルは省略される前に折り返し、1 行のテキストを収めるために固定の高さに頼る箇所はありません。ネイティブの実装は、各プラットフォームが備える文字拡大の仕組みを使います。
動きを減らす設定がオンのときは、位置や大きさの変化を伴うアニメーションを取り除くか、短いフェードに置き換えます。繰り返し続けるものはありません。モーションを参照してください。
仕様は、コンポーネントの WAI-ARIA ロールと、アクセシブルネームの決まり方を定めます。各プラットフォームは、このロールをネイティブの対応物に対応づけます。SwiftUI ではアクセシビリティトレイト、Compose と Flutter ではセマンティクスのプロパティ、React Native では accessibilityRole です。Web では、ブラウザーとテストツールが本物のセマンティクスを読み取れるように、シャドウルートの中でネイティブ要素を優先して使います。
| プラットフォーム | 自動チェック |
|---|---|
| Web | Playwright 上の axe-core |
| SwiftUI | XCTest のアクセシビリティ監査 |
| Compose | Accessibility Test Framework のチェック |
| Flutter | meetsGuideline マッチャー |
| React Native | ロールとラベルのアサーション、およびギャラリーアプリを通したネイティブの監査 |
ノート
自動チェックで見つかるのは、実際の問題の一部にすぎません。これは最低ラインです。これらのコンポーネントで作ったものは、必ずスクリーンリーダーとキーボードで確かめてください。