feat: Accessible Nameとroleについて説明を入れる

src/4/1/2.md

@@ -23,6 +23,24 @@ permalink: "{{ number | scNumberToPath }}/"
 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>
+
 ## 具体例
 
 ### SegmentedControl