fix: 4.1.2のタイトル・概要・具体例・テストチェック方法を修正

src/4/1/2.md

@@ -1,69 +1,64 @@
 ---
 layout: single
-title: HTMLの要素や属性を正しい役割で使用する
+title: カスタムコントロールにAccessibilityNameとroleが適切に設定されている
 number: 4.1.2
 level: A
 tags: sc
 permalink: "{{ number | scNumberToPath }}/"
 ---
 
-# 4.1.2 HTMLの要素や属性を正しい役割で使用する
+# 4.1.2 カスタムコントロールにAccessibilityNameとroleが適切に設定されている
 
 {% include "partials/level.njk" %}
 
 ## 概要
 
-リンクやボタンなどユーザーが操作可能な項目を作成するときに、本来リンクやボタンに使わない要素や属性を使用して記述すると、ブラウザやスクリーンリーダーなどで正しく操作できなくなる可能性がある。そのため、ユーザーが操作可能な項目は、正しい要素や属性を用いて記述する。
+カスタムコントロールを実装する場合、支援技術などのユーザーエージェントがそのコンポーネントを正確に解釈して実行できるよう、AccessibilityNameとroleを設定する。スクリーンリーダーなどの支援技術で動作確認をし、支援技術でも遜色なく機能が操作でき、状態の変化を認識できることを確認する。
+
+<details>
+<summary>カスタムコントロールとは</summary
+
+カスタムコントロールとは、その言語が提供していない「独自のユーザーインタフェースコンポーネント」のことを指す。例えばタブ、 `<input type="checkbox">` を使わないチェックボックスなど。カスタムコントロールは、開発者が機能をスクリプトで実装する必要がある。
+</details>
 
 ## 具体例
 
-### 見出しに見出しタグh1~h6要素を使っている
+### SegmentedControl
 
-<figure>
-<div class="FigureMulti">
-<img src="/img/4/1/2/4.1.2_ng_1.svg" alt="バナー作成の手順が見出しレベル1でマークアップされ、その他の見出しはpタグでクラスhd2もしくはhd3とマークアップされている。">
-<img src="/img/4/1/2/4.1.2_ng_2.svg" alt="見出し一覧のラベルと見出しレベル1のバナー作成の手順が表示されている。">
-</div>
-<figcaption>
-{% label "bad" %}
-見出しタグを適切に使用していない場合。CSSでスタイリングしているため、仕上がりは見出しのように見えていたが、見出しタグを使っていないために、見出し一覧機能を使うと見出しとして表示されない。
-{% endlabel %}
-</figcaption>
-</figure>
+AmebaではSegmentedControlというカスタムコントロールのコンポーネントを利用している。これはページ内で機能やモードを切り替える際に用いる。基本的にはブラウザ標準のラジオボタンと同様の機能をもっており、単一の項目のみを選択できる。ブラウザ標準のラジオボタンとの違いはキー操作体系にある。上下左右キーでの移動だけで選択されるラジオボタンと違い、上下左右キーでの移動に加えEnter, Spaceキー押下しないと選択されない。そのため、キーボードフォーカス中ではあってもActiveではないという、ラジオボタンとは異なる状態が存在する。
+
+デモページ：[SegmentedControl ⋅ Storybook](https://ameba-spindle.web.app/?path=/docs/segmentedcontrol)
 
 <figure>
+<img src="/img/4/1/2/segmented_control.png" alt="">
 <figcaption>
-<div class="FigureMulti">
-<img src="/img/4/1/2/4.1.2_ok_1.svg" alt="バナー作成の手順が見出しレベル1。手順①バナー構成を確認、手順②入稿規定を確認、手順③素材を集めるは見出しレベル2でマークアップされている。">
-<img src="/img/4/1/2/4.1.2_ok_2.svg" alt="見出し一覧のラベルとバナー作成の手順、手順①バナー構成を確認、手順②入稿規定を確認、手順③素材を集めるが見出しの階層となって表示されている。">
-</div>
-{% label "good" %}
-見出しタグを正しく使用している場合。支援技術で、見出しを一覧化して表示する機能を使っても、全ての見出しを表示できるため、必要な情報を選んで読みやすい。
-{% endlabel %}
+Amebaで定義されているSegmentedControlコンポーネントのイメージ。タブのように横並びの３つのボタングループがあり、そのうちの1つが選択されていることがわかる表示になっている。
 </figcaption>
 </figure>
 
 ## テスト・チェック方法
 
-1. コードレビュー
+### Web
+
+
+1. AccessibilityTree（ユーザー補助ツリー）のRole（役割）、Name欄に値が適切に反映されていることを確認する
+    <figure>
+    <img src="/img/4/1/2/web_test1.png" alt="">
+    <figcaption>
+    例：SegmentedControlコンポーネントをChromeのインスペクター上のアクセシビリティタブを開き確認している様子のスクリーンショット。「ユーザー補助ツリー」「ARIA属性」「計算済みプロパティ」の項目があり、「計算済みプロパティ」には「Name: "中"」「役割: radio」「無効なユーザー入力: false」「フォーカス可能: true」「オン: true」と表示されている。AccessibilityNameは「中」、Roleは「radio」、選択状態がtrueの要素を検証中であることがわかる。
+    </figcaption>
+    </figure>
+1. Lighthouseや[axe DevTools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)などのアクセシビリティ検証ツールで、不適切なAccessibilityNameやroleの付け方をしていないかを確認する
 
 ## 実装方法
 
 ### 悪い実装例
 
-ボタンの項目なのに、spanタグを使って実装している。
-
-```html
-<span class="button">登録する</span>
-```
+TODO
 
 ### 良い実装例
 
-buttonタグを使って実装している。
-
-```html
-<button type="button">登録する</button>
-```
+TODO
 
 ## 参考文献