切り取られたテキスト

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

静的テキストは、現在の状態やサイズ変更されても、表示内容が切り取られてはならない。

Not for use with personal data

求めるポイント

静的テキスト要素の表示内容は、デフォルトの文字サイズでも、より大きなダイナミックタイプサイズでも切り取られてはならない。

失敗例 ❌

iOS app screen showing a heading and paragraph text clipped in a fixed-height container, with content cut off on the right side of the screen when Dynamic Type size is increased

固定された高さの制約がテキストコンテナの成長を防ぎ、内容に合わない

ユーザーがダイナミックタイプサイズを大きくすると、リサイズされたテキストがコンテナ境界で切り取られる

テキストは省略記号やスクロールバー、アクセス方法の表示もないまま切り取られる

成功例 ✅

iOS app screen showing a heading and paragraph text in a flexible-height container, text wraps across multiple lines and no content is clipped

柔軟な高さにより、テキストが複数行にわたって折り返されるとコンテナが垂直に成長する

どのダイナミックタイプサイズでも内容は切り取られない

大きな文字サイズに依存するユーザーもすべての情報を画面でアクセスできる

一目で分かる

このルールはユーザーに大きな影響を与える
このルールはiOS 17.0以降を必要とし、開発者が調整可能な表示された静的テキスト要素で実行される
静的テキストは、現在の状態やサイズ変更されても、表示内容が切り取られてはならない
テキストを折り返したり成長させるよう修正:
- 設定 numberOfLines = 0 (UIKit)、または
- 削除 .clipped() / .lineLimit() (SwiftUI)

ユーザーへの影響

視覚障害、認知障害のあるユーザーや、ダイナミックタイプでより大きな文字サイズを使用するユーザーは、クリップされた情報にアクセスできない可能性があります。WCAG 1.4.4（テキストのリサイズ）は、ユーザーがテキストを拡大してもテキストコンテンツが表示および使用可能であることを要求しています。このルールは、すでにクリップされているコンテンツや、ユーザーが文字サイズ設定を大きくするとクリップされる可能性のあるコンテンツを特定するのに役立ちます。

切り取られたテキストの問題を確認

見つける アクセシビリティ iOSの設定
選択 表示とテキストサイズ
最大のアクセシビリティ文字サイズを選択するようにトグルで選択 大きな文字 パネルで
画面上の変化を観察する:
- アクセス不可能: コンテンツがこのビューによってクリップされる
- アクセス可能: コンテンツが折り返される、垂直に成長する、またはスクロールしてアクセスできる

問題を解決

開発者調整可能なテキストコンテナが、サポートしたい最大のダイナミックタイプサイズでも、完全なコンテンツを表示できる十分な幅と高さを持っていることを確認する
テキストが折り返されたり垂直に成長することを可能にするオートレイアウトの制約を使用する
設定 numberOfLines プロパティを、 numberOfLines = 0
スクロール可能なコンテンツに対しては、長いテキストが切り捨てられることなく表示にスクロールできるよう、スクロールビュー自体が正しくサイズされていることを確認する

UIKit

UIKitでこの問題を解決するためには、通常、テキストの修正とレイアウトの修正を組み合わせて行う必要があります。設定 numberOfLines を0に設定すればラベルが折り返されますが、ラベルやそのコンテナに高さの固定制約があると、折り返されたテキストが切り捨てられます。 greaterThanOrEqualToConstant 高さの制約を活用し、コンテナが実際に成長できるようにします。

設定 numberOfLines = 0 に UILabel 複数行折り返しを許可する（テキスト修正）
```
label.numberOfLines = 0
```
コンテナが折り返されたテキストに合わせて成長できるように、固定の高さのAuto Layout制約を>=に置き換えます
```
label.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight).isActive = true
```

SwiftUI

SwiftUIのレイアウトシステムは、要素をそのコンテンツに合わせて自動的にサイズを調整します。固定の frame や clipped() プロパティは避けてください。 .fixedSize および minHeight プロパティは、親要素がまだテキストに自分のサイズ制約を課しているというエッジケースでのみ必要です。

使用する .clipped() プロパティおよび/または固定サイズのフレームは、テキストが切り捨てられる違反の主な原因です - これらの制約を取り除くことが通常必要です
```
// before
Text("Long content that needs to wrap")
    .truncationMode(.tail)
    .clipped()
    .frame(width: 50, height: 20)
// after
Text("Long content that needs to wrap")
```
削除 .lineLimit(1) するか、nilに設定して、サポートとしてテキストを折り返すことを可能にします
```
Text("Your text here")
    .lineLimit(nil)
```
親ビューがテキストのサイズを制約している場合、 .fixedSize(horizontal: false, vertical: true) を使用して垂直方向に拡張できるようにします
```
Text("Long content that needs to wrap")
    .fixedSize(horizontal: false, vertical: true)
```
オプションで、 minHeight をフレームに設定して、コンテンツに合わせて成長できるようにします
```
Text("Content").frame(minHeight: minHeight)
```

使用する ViewThatFits （iOS 16+）は、より大きなサイズで配置を切り替える適応レイアウトで、クリッピングが発生する前に防ぎます

ViewThatFits {
    HStack { Text("Label"); Text("Value") }   // compact — fits on one row
    VStack { Text("Label"); Text("Value") }   // falls back to stacked if needed
}

React Native

React Nativeでこの問題を防ぐためには、ビューが柔軟な高さを持つことを確認します。次のいずれかの方法を使用できます。

高さを設定しないこと - コンテナはコンテンツに合わせて自動的にサイズを調整します。
```
<View style={{ padding: 8 }}>
  <Text>{text}</Text>
</View>
```
使用する minHeight プロパティを代わりに使用し、 height - これは短いコンテンツの下限を設定しますが、コンテナはテキストがより多くのスペースを必要とする場合に自由に背が高くなれます。
```
<View style={{ minHeight: 30, padding: 8 }}>
  <Text>{text}</Text>
</View>
```
コンテンツに合わせて成長し、自然なサイズを下回ることのないフレックスレイアウトを使用します。
```
<View style={{ flexGrow: 1, flexShrink: 0, padding: 8 }}>
  <Text>{text}</Text>
</View>
```
固定の高さの代わりにパディングを使用する - テキストの本来のサイズとパディングの量がコンテナの高さを決定します。
```
<View style={{ padding: 16 }}>
  <Text>{text}</Text>
</View>
```
設定する numberOfLines={0} して、テキストが任意の行数で折り返せるようにし、明示的な lineHeight と組み合わせて垂直スペーシングを管理します。
```
<View style={{ padding: 8 }}>
  <Text numberOfLines={0} style={{ lineHeight: 30 }}>{text}</Text>
</View>
```

Flutter

Flutterでこの問題を解決するには、通常、テキストの修正とレイアウトの修正を一緒に行う必要があります。 Text ウィジェットはデフォルトで折り返しますが、固定の高さの親や非柔軟な Row の子が折り返されたテキストを切り捨てることがあります。コンテンツに合わせてサイズを調整し、Dynamic Typeがフォントをスケールできるようにシステムのテキストスケーラを尊重してください。

許可する Text を使用して複数行に渡って折り返し、 maxLines を設定せずに softWrap: trueを保持します。これはデフォルトです
```
Text(
  longString,
  softWrap: true,
)
```
テキストを包んでいるコンテナにパディングを使用して、ボックスがコンテンツとともに成長するようにします
```
Container(
  padding: const EdgeInsets.all(8),
  child: Text(longString),
)
```
包む Text を使用して Expanded いる場合 Flexible の中に Row場合、フォントの拡大に伴って複数行に折り返すことができます
```
Row(
  children: [
    const Icon(Icons.info),
    Expanded(child: Text(longString)),
  ],
)
```
画面をスクロール可能にして、拡大されたテキストがビューポートを超えたときにもアクセスしやすいようにします
```
SingleChildScrollView(       
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Text(longString),
  ),
)
```

このルールを無視してもよいでしょうか？

テキストが切り捨てられることには重大な影響があり、ほとんどの場合、この問題を改善することをお勧めします。切り捨てられたテキストは単なる未読の状態であり、大きなDynamic Typeサイズを必要とするユーザーに対する同等の回避策はありません。

まれなケースでは、装飾的または冗長な要素がある場合、結果を無視することを検討してもよいでしょう。たとえば、近くの別の要素や画像のアクセシビリティラベルによって完全に伝えられる短いラベルです。「ルールを無視する」について詳しくは、ルールの無視について詳しく学びましょう。

リソース

Deque University コースページ

1.4.4a リサイズ（200%）（ネイティブモバイル iOS を参照）

注: Deque University リソースへのフルアクセスにはサブスクリプションが必要です。

その他のリソース

WCAG 2.1 解説文書
- 関連する項目: 解説 SC 1.4.4 - テキストのリサイズ