diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index 27011abc50..a44f04c4d2 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -898,19 +898,49 @@ igc-badge::part(base) { ## アクセシビリティ -{Platform} Badge は視覚的なステータスを伝えるものであり、そのステータスが重要な場合は、意味のあるテキストまたは周囲のアクセシブルなコンテキストを持つ必要があります。 +{Platform} Badge は、短いカウント、状態、または通知を伝える非インタラクティブなステータス表示です。 ### キーボード インタラクション -バッジは視覚的なステータス インジケーターであり、インタラクティブなキーボード操作は提供しません。バッジが装飾する要素のフォーカス動作に従ってアクセスされます。 +バッジはフォーカスを受け取らず、キーボード入力を処理せず、コンポーネントのインタラクション イベントを公開しません。 + +| キー | アクション | +| -- | -- | +| n/a | バッジはキーボードによるインタラクティブ操作に対応していません。 | ### スクリーン リーダー / ARIA -バッジが支援技術では他に得られない情報を伝える場合は、周囲のコンポーネントに意味のある表示コンテンツまたはアクセシブルなラベルを提供してください。特定の周囲のコントロールについて、実際のアナウンス内容を確認してください。 +バッジ ホストは `role="status"` を使用して、コンテンツをステータス情報として公開します。 + + + +- コンポーネントは `aria-roledescription` を設定して、バッジとその現在の `variant` を識別します。 +- テキストのないバッジ (`dot` バッジを含む) が支援技術では他に得られないステータスを伝える場合は、`aria-label` を追加してください。 +- バッジのコンテンツまたはアクセシブルなラベルは、装飾されるアイテムに固有のものにしてください。例えば、単に `3` ではなく `3 件の未読メッセージ` のように記述してください。 + + + + + +- コンポーネントは `role="status"` と `aria-label="badge"` で初期化されます。 +- Angular はバッジの種類とそのアイコンまたは値から `aria-roledescription` を導出します。`badge` が意味のあるアクセシブル名でない場合は、`label` 入力を設定してください。 +- テキストのないバッジや `dot` バッジのステータスが支援技術では他に得られない場合は、意味のある `label` を追加してください。 + + ### アクセシビリティ準拠 -このコンポーネントのアクセシビリティ準拠は、製品の公式アクセシビリティ ステートメントおよびレンダリングされる使用状況のコンテキストに対して検証する必要があります。 +インフラジスティックスは、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における {ProductName} のアクセシビリティ サポートを文書化しています。 + +| 基準 | コンポーネントの準拠方法 | +| -- | -- | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | バッジはセマンティックな `status` ロールを公開します。xplat 実装は現在のバリアントに基づくロールの説明も公開します。Angular はバッジの種類とコンテンツに基づいてアクセシブルなラベルとロールの説明を公開します。 | + +ユーザー側の責任: + +- バッジに意味のあるテキストがない場合、特に `dot` バッジの場合は、ステータスを説明するアクセシブルな名前を提供してください。 +- バッジの色のみをステータスの表示手段として使用しないでください。テキスト、アイコン、または他のアクセシブルな手掛かりと組み合わせてください。 +- テーマ スタイルをオーバーライドする際は、バッジの前景色と背景色のコントラストを十分に確保してください。 ## トラブルシューティング diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx index 53e21e41ed..59a1da73fd 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -44,7 +44,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3. -## アナトミー +## 構造 {Platform} ボタン グループは、関連するトグル ボタンを共有コンテナーと個々のボタン アイテムを持つ単一グループに整理します。 @@ -53,7 +53,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3. name="Button Group" description="ボタン グループ コンポーネントは、関連するトグル ボタンを共有コンテナー内に整理し、ユーザーが単一または複数の選択を行えるようにします。" src={buttonGroupAnatomy.src} - alt="共有コンテナー、ボタン アイコン、ラベルを示すボタン グループのアナトミー" + alt="共有コンテナー、ボタン アイコン、ラベルを示すボタン グループの構造" />