テキストエリア
component感想や問い合わせ内容など、長めの文章を入力する欄です。入力できる残り文字数のカウンターを付けられます。
size × state
valid · maxlength=100
isInvalid=true
bg negative/50 · border 2px negative/500 · エラーテキスト＋赤いカウンター
使用例
入力するとカウンターがリアルタイム更新
100文字以内で記入してください
改善のヒントを教えてください
機能
このコンポーネントの用途
複数行のテキスト入力。文字数カウンタ付き。
1 行入力なら textarea ではなく input。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓textarea-control で囲み、必要なら maxlength ＋ textarea-counter を出す。
NG
- ✕1 行入力に使わない → input。
- ✕エラー色を直書きしない → isInvalid 用クラスを使う。
ラベルは可視ラベルで（placeholder に頼らない）
ラベル又は説明文可視ラベルを for／id で関連付ける。placeholder は入力例にとどめる。
<label for="bio">自己紹介</label> <textarea id="bio" class="textarea textarea-md"></textarea>
placeholder をラベル代わりにしない。入力すると消え、SR でも安定して読まれない。
<textarea class="textarea textarea-md" placeholder="自己紹介"></textarea> <!-- ラベルなし -->
テキストエリアのアクセシビリティ
ネイティブ <textarea> を土台に、DS が境界色・フォーカス・エラー表現・文字数カウンターを担保します。可視ラベルの関連付けと、カウンター超過の通知はプロダクト側で付与します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
ラベルは常に可視。エラーは色だけでなく境界色＋エラーテキストで伝え、文字数カウンターで残量を示す。
文字は rem / トークンで拡大に追従。高さは可変で、拡大や折り返しでも内容が切れない。
Tab で移動して複数行を入力。フォーカス時に境界色が強調される。
ラベルの関連付けで名前が確立。サポート／エラーは aria-describedby、エラーは aria-invalid、残量は aria-live で通知できる。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<textarea>ベース — 役割・値が標準で確立 - ✓フォーカス時に境界色を強調（フォーカスの可視化）
- ✓エラーは
textarea-errorの境界色＋textarea-error-textで表現 - ✓文字数カウンター（
textarea-counter）で残量を可視化。超過時は赤で強調
実装時の必須対応
プロダクト側で担保する
- !可視ラベルを
for／id（またはaria-labelledby）で関連付ける - !サポート文・エラー文を
aria-describedbyで結び付け、エラー時はaria-invalid="true" - !文字数カウンターは
aria-live="polite"で残量・超過を通知する（maxlengthと併用） - !高さを固定して内容を切らない（
overflow: hiddenで隠さない）
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | 入力欄へ出入りする |
| Enter | 改行を入力する（複数行） |
- SRラベル・サポート文／エラー文が読まれ、残量・超過が
aria-liveで通知される - 操作200% 拡大でも入力内容が切れず読める
- 自動axe / Lighthouse でラベル関連付け・
aria-invalid・コントラストを確認
エラーは色＋テキスト＋ARIA で伝える
達成基準：WCAG 3.3.1 エラーの特定 / 1.4.1 色の使用境界色＋エラーテキストを aria-describedby／aria-invalid で関連付け、カウンターは aria-live。
<textarea class="textarea textarea-error" aria-invalid="true" aria-describedby="err"></textarea> <span id="err" class="textarea-error-text">＊入力は必須です</span>
赤い境界線だけでは、なぜエラーか・どう直すかが伝わらない。
<textarea class="textarea textarea-md textarea-error"></textarea> <!-- エラー文も aria もない -->