Merge pull request #55 from openameba/remove/3.2.5

Remove/3.2.5

content/3/2/2.md

@@ -1,47 +1,25 @@
 ---
 layout: single
-title: 3.2.2 予測できない変化を起こさない
+title: 3.2.2 入力時に予測できない変化を起こさない
 ---
 
-# 3.2.2 予測できない変化を起こさない
+# 3.2.2 入力時に予測できない変化を起こさない
 
-フォーム入力時に、下記のようなユーザーが予測できないような動作を行うと混乱させてしまう可能性がある。また、全盲の人や特定の認知能力の低下している人などには、変化に気づきづらい・気を取られるなど操作が困難になってしまう可能性がある。そのためユーザーが予測できない動作は行わないようにする。
+データの入力時やフォーム要素の選択時に、ユーザーが予測できないような動作を行うと混乱させてしまう可能性がある。特に、全盲の人や特定の認知能力が低下している人は、変化に気づきづらい・気を取られるなどで操作が困難になってしまう可能性が高い。予測できない変化として代表的な例は次のようなものである：
 
-- ラジオボタンやチェックボックスの選択で、ポップアップを開いてしまう
+- セレクトボックスをキーボードの上下キーで移動するだけで、選択されセレクトボックスが閉じてしまう
+- ラジオボタンやチェックボックスの選択で、ポップアップウィンドウを開いてしまう
 - フォームの最後の項目を入力すると、自動的にフォームを送信してしまう
+- 1文字入力すると自動で次の入力欄にフォーカスが移動してしまう
 
 
-[3.2.5 要求による変化](https://waic.jp/docs/WCAG20/Overview.html#consistent-behavior-no-extreme-changes-context) では、ログアウト後の5秒経過したら画面で自動的にTOPに戻すなど、ページ全体で予測できない変化は起こさないのが望ましいとされている。
+[3.2.5 要求による変化](https://waic.jp/docs/WCAG20/Overview.html#consistent-behavior-no-extreme-changes-context) では、入力時に限らずより対象を広げた規程である。例えば、ログアウト後に5秒経過後自動的にトップページへ遷移するなど、ページ全体で予測できない変化は起こさないのが望ましいとされている。
 
 ## 具体例
-### 新規タブやポップアップを開くことを事前に伝える
 
-{{< figure
-  src="/a11y-guidelines/img/3/2/2/3.3.2_A_OK.svg"
-  alt="新規タブを示す良い例"
-  rule="good" >}}
-  新規タブを開くリンクの横には、それを示すアイコンが表示されている。ユーザーはそのリンクを開くと起きる動作が予測できる。
-{{< /figure >}}
+[達成基準 3.2.2 の事例](http://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html#consistent-behavior-unpredictable-change-examples-head)も参考になる。
 
 ### セレクトボックスの具体例
-#### 決定ボタンのあるフィルターコンポーネントの例
-
-{{< figurelist >}}
-  {{< video
-    src="/a11y-guidelines/img/3/2/2/3.2.2_B_OK.mp4"
-    isList="true"
-    rule="good" >}}
-    決定ボタンを押した時にフィルター操作を実行する
-  {{< /video >}}
-
-  {{< video
-    src="/a11y-guidelines/img/3/2/2/3.2.2_B_NG.mp4"
-    isList="true"
-    rule="bad" >}}
-    選択しただけでフィルター操作が実行されてしまう。キーボードで操作しているユーザーは、選択肢を上下に移動するだけでフィルター操作が実行されてしまうことになる。
-  {{< /video >}}
-{{< /figurelist >}}
-
 
 #### 決定ボタンのないフィルターコンポーネントの例
 
@@ -63,13 +41,20 @@ title: 3.2.2 予測できない変化を起こさない
 
 ## レビュー・テスト方法
 
-- 企画時、デザイン時、実装時に、下記をチェックする
-  - 各コントロール（ラジオボタンやリンク、フォーム要素など）を選択した時の動作を確認する
-  - ユーザーが想定できない挙動を自動で行っていないかを確認する
+### 実装時
+
+- 各コントロール（フォーム要素とセレクトボックス）をキーボードで操作する
+- EnterキーまたはSpaceキーで確定せずに下記の処理が行われていないことを確認する
+  - APIリクエストが発生する
+  - 画面が切り替わる
+  - フォーカスが切り替わる
+- 発生する場合、その処理をユーザーが想定できるものであることを確認する
+
+### 仕様、デザイン時
+
+実装時のチェック方法を想定し、予想できない処理が行われていないことを確認する
 
 ## 参考文献
 
 - [Understanding Success Criterion 3.2.2 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html)
 - [達成基準 3.2.2 を理解する | WCAG 2.0解説書](http://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html)
-- [Understanding Success Criterion 3.2.5 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html)
-- [達成基準 3.2.5 を理解する | WCAG 2.0解説書](https://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html)

content/_index.md

@@ -108,7 +108,7 @@ WCAG2.1に記載の項目のうち、Amebaブランドのサービスで準拠
 #### 3.2 予測できる
 
 - [3.2.1 フォーカス時にコンテンツを大きく変更しない](/a11y-guidelines/3/2/1)<span class="Label">A</span>
-- [3.2.2 予測できない変化を起こさない](/a11y-guidelines/3/2/2)<span class="Label">A</span>
+- [3.2.2 入力時に予測できない変化を起こさない](/a11y-guidelines/3/2/2)<span class="Label">A</span>
 - [3.2.3 ナビゲーションの位置を統一する](/a11y-guidelines/3/2/3)<span class="Label">AA</span>
 - [3.2.4 一貫した識別性を持たせる](/a11y-guidelines/3/2/4)<span class="Label">AA</span>