---
title: "アクセシビリティ"
description: "Tanrei がトークンとコンポーネント仕様に組み込んでいるアクセシビリティ要件と、それを守らせるチェック。"
url: "https://tanrei.chnotchy.com/ja/foundations/accessibility/"
last_updated: 2026-10-23T17:33:05.000Z
---

# アクセシビリティ

> 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 行のテキストを収めるために固定の高さに頼る箇所はありません。ネイティブの実装は、各プラットフォームが備える文字拡大の仕組みを使います。

## モーションの低減

動きを減らす設定がオンのときは、位置や大きさの変化を伴うアニメーションを取り除くか、短いフェードに置き換えます。繰り返し続けるものはありません。[モーション](https://tanrei.chnotchy.com/ja/foundations/motion/)を参照してください。

## セマンティクス

仕様は、コンポーネントの WAI-ARIA ロールと、アクセシブルネームの決まり方を定めます。各プラットフォームは、このロールをネイティブの対応物に対応づけます。SwiftUI ではアクセシビリティトレイト、Compose と Flutter ではセマンティクスのプロパティ、React Native では `accessibilityRole` です。Web では、ブラウザーとテストツールが本物のセマンティクスを読み取れるように、シャドウルートの中でネイティブ要素を優先して使います。

## テストの方法

| プラットフォーム | 自動チェック |
| --- | --- |
| Web | Playwright 上の axe-core |
| SwiftUI | XCTest のアクセシビリティ監査 |
| Compose | Accessibility Test Framework のチェック |
| Flutter | `meetsGuideline` マッチャー |
| React Native | ロールとラベルのアサーション、およびギャラリーアプリを通したネイティブの監査 |

> [!NOTE]
> **ノート**
>
> 自動チェックで見つかるのは、実際の問題の一部にすぎません。これは最低ラインです。これらのコンポーネントで作ったものは、必ずスクリーンリーダーとキーボードで確かめてください。