インターフェイスの可用性のテスト

1）なぜ、私たちが考えることは「準備ができている」

• WCAG 2の基準を満たした。1/2.ターゲットプラットフォームの2つのAAレベル;
• インターフェイスは完全にキーボードから渡されます。
• スクリーンリーダーの正しい作業。
• コントラストは規範に準拠しています。
• すべての状態/エラー/ステータスは、マウスなしで視界から利用できます。
• ローカライゼーション、RTL、減動機、モバイル機能が考慮されています。

2）試験戦略（ピラミッドA11y）

1.Autotests/linters（問題クラスの40-60％までの高速カバレッジ）。
2.手動パターンチェック（キーボード、フォーカス、コンテンツ、ロジック）。
3.Assistive Tech （AT）セッション：スクリーンリーダー、スケーリング、カラーフィルタ。
4.ユーザーとのフィールドテスト（可能であれば）。

目標：機能に乗算しないように、コンポーネント/パターンレベルで全身欠陥をキャッチします。

3）基本チェックのチェックリスト（クイックラン）

• キーボード：すべてがタブ/矢印で到達可能です。焦点の順序は論理的です。モーダルにはトリックトラップがあります。ESC/Enter/Spaceが動作しています。
• フォーカスインジケータは、任意のトピック/背景に表示されます。
• コントラスト：テキスト≥ 4。5：1（通常）、≥ 3：1（大）、アイコン/コントロールが読み取り可能です。
• セマンティクス：正しいタグ（'button'、 'a'、 'label'、 'ul/li'、 'th/td'）、必要に応じてのみロールと'aria-'。
• スクリーンリーダー：階層別タイトル、ボタン/リンクの意味のある名前、アイコン/画像の選択肢。
• フォーム：明示的な'ラベル'、ヒント/エラーが関連しています（'aria-describy'）、エラーテキストが特定です。
• ダイナミクス：トースト/バナー/エラーは'aria-live' （'polite'/'assertive'）を介して発表されます。
• アニメーションは'prefers-reduced-motion'を尊重します。インターフェイスを「振る」ことなく。
• ローカライズ/RTL：キー画面が整列され、数値/日付/通貨がユーティリティによってフォーマットされます。
• モビリティ：タッチターゲット≥ 44 × 44 px、ズームは禁止されていません、画面回転はコンテンツを壊しません。

4）役割、責任、成果物

設計システム：各部品の記述のA11yの条件。
開発者：自動チェック、A11y-assertsによるユニット/インタラクションテスト。
QA：手動スクリプト+ATセッション；重大度/頻度のレポート。
UX/コンテンツ：エラー/ステータスのマイクロコピー、可読性を声に出します。
アーティファクト：チェックリスト、スクリプト、ATスクリーンキャスト、WCAG参照の欠陥のリスト、推奨事項。

5）自動化されたチェック

Linters/analyzers： axe、 eslint-plugin-jsx-a11y、 pa11y、 Lighthouse。
パイプラインでは、重要な違反（ロール/ラベル/コントラスト/タブトラップ）のPRをブロックします。
コントラストスナップショット：テーマ/状態のビジュアルテスト。

6）手動テスト： シナリオ

6.1キーボード

キーボード（タブ/シフト+タブ/Enter/スペース/矢印）のみでページを通過します。
チェック：フォーカスの可視性、優先度、すべてのアクションの可用性、「トラップ」と「死んだ」要素の欠如。
内部のモーダル：フォーカスでは、閉じたときにイニシエータに戻ります。

6.2スクリーンリーダー（最小セット）

デスクトップ：NVDA/JAWS （Windows）、 VoiceOver （macOS）。
モバイル：VoiceOver （iOS）、 TalkBack （Android）。
私たちはチェックします：正しい見出し（H階層）、ボタン/リンクの名前、テーブルを読む（'th'/'scope'）、ステータスを宣言する、わかりやすいフォームエラー。

6.3コンテンツとマイクロコピー

「エラー400」なしで、あいまいさなしで、重要なテキストを大声で読みます。
エラー=「何が間違っている++制約/フォーマットを修正する方法」。

6.4ダイナミクスとリビングリージョン

成功の乾杯は"aria-live="polite"、エラーは"assertive"です。
テキストで説明された進捗状況/ダウンロード；骨格はスピナーに好まれる。

7）フォームとエラー（詳細）

各フィールドには関連付けられたラベルがあります（プレースホルダではありません）。
エラーはフィールドに関連付けられています：'aria-invalid=」true」'、' aria-describby=」［error id］」'。
書式式（日付、電話番号）は事前に指定されています。マスクは入力/挿入を壊しません。
送信時にエラーの概要バナー+自動スクロールし、最初のエラーに焦点を当てます。
エラーテキスト：特定の、技術的な専門用語なし。

8）テーブル、リスト、グラフ

表：見出し'th'とscope=「col/row」'、署名、履歴書。
リストは実際の'ul/ol/li'であり、divasではない。
グラフ-代替テーブル/説明；凡例は利用可能です。色≠単一の信号です。

9）マルチメディアとアニメーション

ビデオ：字幕/トランスクリプト；キーボード制御；自動再生なし（または静かな）。
GIF/microanimations： 'prefers-reduced-motion'をオフにします。発生を避けること。
振動/サウンド-オプションで、視覚的/テキストを複製します。

10）モバイルアクセシビリティ

インタラクティブな≥ 44 × 44 px、十分な間隔。
スケーリングを禁止しないでください（'user-scalable=no'なしのメタビューポート）。
フォーム/キーボード：正しいタイプ（'tel'、 'email'、 'number'）、システム機能を非表示にしないでください。
暗いテーマとシステムフォント「more」でチェックインします。

11）ローカライズ、数値、RTL

コンテキストを持つi18nキーを介した文字列；長い言語（DE/TR）はレイアウトを壊さない。
日付/通貨形式-ユーティリティ、文字列ではありません。
RTLモード：ナビゲーションアイコンをミラーし、フォーカスとキャリッジの順序、双方向入力を確認します。

12）クリティカルフローの特異性（iGaming）

支払い/結論

指示、制限/期限/手数料をテキストでクリアします。
プロバイダのエラーはコードなしで明示的に宣言されます。行動に代わるものがあります。
動作確認：論理CTA、キャンセル可能性に焦点を当てます。

CCM/検証

写真/ドキュメントのステップバイステップのヒント。進歩とETA。
ぼやけ/まぶしさ/切り捨てエラー-修正の例。
ニュートラルなトーン、ユーモアはありません。

13）欠陥重大度の評価

ブロッカー：キータスク（キーボード/スクリーンリーダー）は完了できません。
重要：重要な機能は機能しますが、深刻な障壁があります。
メジャー：邪魔になります、回避策があります。
マイナー：化粧品/タスクに影響を与えることなくガイドに準拠していません。

各欠陥は、WCAG基準と再現されているスクリプトへの参照です。

14） Doneの定義（A11y）

マウスなしでキーボードスクリプトを渡すのは100％です。
axe/Lighthouse：重大な/高い違反はありません。
すべてのテーマ/状態におけるAAコントラスト。
主要経路（navbar、型、モーダル、トースト）のスクリーンリーダー実行。
新しいコンポーネント/フィーチャーのA11yドキュメント（ロールモデル、アリア、フォーカス、例）。
A11yテストの回帰はCIで緑色です。

15）プロセスとオートメーション

開発前：タスクのA11y-criteria、フォーカス/エラー状態のレイアウト。
開発中：ローカルアセンブリ中のlinters/ahe；コントラスト/フォーカスのビジュアルスナップショット。
CI：重要なページによるpa11y/axe-scan；［ブロッカー/クリティカル］の下にドロップを構築します。
リリース後：四半期ごとの監査、A11y-tagによるユーザーの苦情の監視。

16）アンチパターン

ラベルの代わりにプレースホルダ。
'button'/'a'の'div'を指定します。
障害者フォーカスリング「美のために」。
唯一のステータスキャリアとしての色。
フォーカストラップ/ESCのないモーダル。
モバイルでスケーリングができません。
「エラー400/500」人間の説明なし。

17）テストスクリプトテンプレート

シナリオ1-キーボードナビゲーション（フォームページ）

1.最初のフィールドにタブし、データを入力します。
2.Shift+Tab back-正しい順序を確認します。
3.コール検証（送信）-フォーカスが最初のエラーに移動します。
4.ESCキーでモジュレータを閉じ、フォーカスがイニシエータに戻ります。

シナリオ2-スクリーンリーダー（支払いページ）

1.ページヘッダー（h1）に移動し、セクションを聞いてください。
2.メソッドの選択を開きます-役割/状態の宣言が聞こえます。
3.意図的に合計エラーを作成します。メッセージが読み込まれ、フィールドに関連付けられます。
4.成功した支払いトーストは「礼儀正しい」と宣言しました。

シナリオ3-ダイナミクス

1.プロセス/ETAに関するテキストがあります。
2.ネットワークエラーの場合-キーボードからアクセス可能な「アサーティブ」バナーには「、繰り返し/ヘルプ」パスがあります。

18）便利なマイクロテンプレート

トーストのための役割/アリア

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

フィールドへのリンクエラー

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka（意味属性）

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19） A11y実践のための迅速な実施計画

1.現在のコンポーネント/パターン（コントラスト/フォーカス/ロールセマンティクス）の監査。
2.デザインシステム編集：各コンポーネントにA11yパーティションを追加します。
3.ツール：ローカルとCIでup/axe/pa11y/LighthouseのLinterを設定します。
4.トレーニング：デザイナー/開発者/コピーライターのための短いガイド。
5.パイロット：最も一般的な欠陥（モーダル、フォーム、トースト）の3-5を修正します。
6.規制：A11y基準のDoD；四半期ごとの監査。

最終的なチートシート

キーボード、フォーカス、コントラスト、スクリーンリーダー、ダイナミクスをチェックします。
aria-live経由でステータスを発表する。エラー-フィールドに関連しています。
尊重は動きを減らしましたり、スケーリングを禁止しません。
「どのように見えるか」ではなく、意味論（タグ/ロール）を考える。
チェックを自動化しますが、常に手動で補足します。
WCAG、重大度および再生スクリプトを参照して欠陥を修正します。