[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し

src/4/1/2.md

@@ -1,69 +1,82 @@
 ---
 layout: single
-title: HTMLの要素や属性を正しい役割で使用する
+title: カスタムコントロールの操作性を担保する
 number: 4.1.2
 level: A
 tags: sc
 permalink: "{{ number | scNumberToPath }}/"
 ---
 
-# 4.1.2 HTMLの要素や属性を正しい役割で使用する
+# 4.1.2 カスタムコントロールの操作性を担保する
 
 {% include "partials/level.njk" %}
 
 ## 概要
 
-リンクやボタンなどユーザーが操作可能な項目を作成するときに、本来リンクやボタンに使わない要素や属性を使用して記述すると、ブラウザやスクリーンリーダーなどで正しく操作できなくなる可能性がある。そのため、ユーザーが操作可能な項目は、正しい要素や属性を用いて記述する。
+カスタムコントロールを実装する場合、支援技術などのユーザーエージェントがそのコンポーネントを正確に解釈して実行できるよう、`Accessible Name` と `role` を設定する。スクリーンリーダーなどの支援技術で動作確認をし、支援技術でも遜色なく機能を操作でき、状態の変化を認識できることを確認する。
+
+<details>
+<summary>カスタムコントロールとは</summary>
+
+カスタムコントロールとは、その言語が提供していない「独自のユーザーインタフェースコンポーネント」のことを指す。例えばタブ、 `<input type="checkbox">` を使わないチェックボックスなど。カスタムコントロールは、開発者が機能をスクリプトで実装する必要がある。
+
+Webでは[WAI-ARIA](https://www.w3.org/TR/wai-aria/)を用いて実装することが多い。
+</details>
+
+<details>
+<summary>Accessible Nameとは</summary>
+
+Accessible Nameとは、ユーザーインターフェイスの名前である。機械的に識別可能な名前であり、表示されるラベルテキストと一致することが多いが、代替テキストのように支援技術向けにのみ実装されていることもある。WCAGではnameと記載されているが、HTMLのname属性とは関係がなく、誤解を生みやすいため、[Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname-1.1/)で定義されている用語の名称で表記している。
+
+### 参考資料
+
+- [名前 (name) | 達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) を理解する](https://waic.jp/translations/WCAG21/Understanding/name-role-value.html#dfn-name)
+- [Accessible Name | Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname-1.1/#dfn-accessible-name)
+</details>
+
+<details>
+<summary>roleとは</summary>
+roleとは、ユーザーインターフェイスの機能を表すものである。たとえば画像やハイパーリンク、チェックボックス、ラジオボタンなど。
+
+### 参考資料
+
+- [役割 (role) | 達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) を理解する](https://waic.jp/translations/WCAG21/Understanding/name-role-value.html#dfn-role)
+</details>
 
 ## 具体例
 
-### 見出しに見出しタグh1~h6要素を使っている
+### SegmentedControl
+
+Amebaでは[SegmentedControl](https://ameba-spindle.web.app/?path=/docs/segmentedcontrol)というカスタムコントロールのコンポーネントを利用している。これはページ内で機能やモードを切り替える際に用いる。基本的にはブラウザ標準のラジオボタンと同様の機能をもっており、単一の項目のみを選択できる。ブラウザ標準のラジオボタンとの違いはキー操作体系にある。上下左右キーでの**移動だけで**選択されるラジオボタンと違い、上下左右キーでの**移動に加え**Enter, Spaceキーを押下しないと選択されない。そのため、「キーボードフォーカス中ではあってもActiveではない」という、ラジオボタンとは異なる状態が存在する。以上の仕様を満たすため、カスタムコントロールとしての実装を選択しており、Acceessible Nameとroleの適切な設定が必要となる。
+
+デモページ：[SegmentedControl ⋅ Storybook](https://ameba-spindle.web.app/?path=/docs/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>
+<img src="/img/4/1/2/segmented_control.png" alt="">
 <figcaption>
-{% label "bad" %}
-見出しタグを適切に使用していない場合。CSSでスタイリングしているため、仕上がりは見出しのように見えていたが、見出しタグを使っていないために、見出し一覧機能を使うと見出しとして表示されない。
-{% endlabel %}
+Amebaで定義されているSegmentedControlコンポーネントのイメージ。タブのように横並びの３つのボタングループがあり、そのうちの1つが選択されていることがわかる表示になっている。
 </figcaption>
 </figure>
-
 <figure>
+<img src="/img/4/1/2/segmented_control_focused.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 %}
+SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されているのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。
 </figcaption>
 </figure>
 
 ## テスト・チェック方法
 
-1. コードレビュー
-
-## 実装方法
-
-### 悪い実装例
-
-ボタンの項目なのに、spanタグを使って実装している。
-
-```html
-<span class="button">登録する</span>
-```
-
-### 良い実装例
-
-buttonタグを使って実装している。
-
-```html
-<button type="button">登録する</button>
-```
+### Web
+
+1. AccessibilityTree（ユーザー補助ツリー）のRole（役割）、Name欄に値が適切に反映されていることを確認する
+    <figure>
+    <img src="/img/4/1/2/web_test1.png" alt="">
+    <figcaption>
+    例：SegmentedControlコンポーネントをChromeのインスペクター上のアクセシビリティタブを開き確認している様子のスクリーンショット。「ユーザー補助ツリー」「ARIA属性」「計算済みプロパティ」の項目があり、「計算済みプロパティ」には「Name: "中"」「役割: radio」「無効なユーザー入力: false」「フォーカス可能: true」「オン: false」と表示されている。Accessible Nameは「中」、Roleは「radio」、選択状態がfalseの要素を検証中であることがわかる。
+    </figcaption>
+    </figure>
+1. Lighthouseや[axe DevTools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)などのアクセシビリティ検証ツールで、不適切なAccessible Nameやrole、WAI-ARIA属性の付け方をしていないかを確認する
+1. スクリーンリーダーなどの支援技術を用いて操作し、クリックやタップでの操作時と遜色なく操作でき、Active状態・フォーカス状態が認識できることを確認する
 
 ## 参考文献