label 문서 체크박스류 제목 보강, 이미지 변경

Author: minuukang

fundamentals/a11y/basic-guide/label.md

@@ -17,6 +17,7 @@
 ```js
 <form>
   <h1>자세한 주소를 알려주세요</h1>
+  <span>주소</span>
   <input type="text" />
   <input type="text" />
 </form>
@@ -26,22 +27,28 @@
 
 ::: danger ❌ 레이블을 안쓰면 이렇게 들려요
 
+자세한 주소를 알려주세요, 머리말<br />
+주소<br />
+입력창<br />
 입력창
 
 :::
 
 다음과 같이 사용자가 어떤 정보를 입력해야 하는지 `aria-label`이나 `<label>`로 알려주세요.
 
-```js{4}
+```js{5}
 <form>
   <h1>자세한 주소를 알려주세요</h1>
-  <input type="text" aria-label="주소" />
+  <label htmlFor="address">주소</label>
+  <input type="text" id="address" />
   <input type="text" aria-label="상세주소" />
 </form>
 ```
 
 ::: info ✅ 레이블을 잘 쓰면 이렇게 들려요
 
+자세한 주소를 알려주세요, 머리말<br />
+**주소**, 입력창<br />
 **상세주소**, 입력창
 
 :::
@@ -75,8 +82,11 @@
 
 ::: danger ❌ 레이블을 안쓰면 이렇게 들려요
 
-카드번호,
-입력창, 입력창, 입력창, 입력창
+카드번호<br />
+입력창<br />
+입력창<br />
+입력창<br />
+입력창
 
 :::
 
@@ -406,9 +416,11 @@
 
 ## 선택형 컴포넌트
 
-체크박스, 라디오버튼, 스위치는 사용자가 옵션을 선택하는 요소예요. 화면에 보이는 텍스트만으로는 스크린 리더가 어떤 선택지를 설명하는지 알기 어려워요.
+체크박스, 라디오버튼, 스위치는 사용자가 옵션을 선택하는 요소예요. 화면에 단순히 텍스트를 옆에 보여주거나, 텍스트가 누락되면 스크린 리더가 어떤 선택지를 설명하는지 알기 어려워요.
+
+`<label>` 이나 `aria-label`을 사용해 각 컴포넌트가 무엇을 선택하는지 명확히 연결해 주세요.
 
-`<label>`과 `aria-label`을 사용해 각 컴포넌트가 무엇을 선택하는지 명확히 연결해 주세요.
+### 체크박스
 
 <img  style="max-width: 375px; width: 100%;" src="../images/checkbox-noti-agreement.png" alt="체크박스 예시">
 
@@ -424,6 +436,8 @@
 
 :::
 
+### 라디오 버튼
+
 <img  style="max-width: 375px; width: 100%;" src="../images/radio-payment.png" alt="라디오 예시">
 
 ::: danger ❌ 레이블을 안쓰면 이렇게 들려요
@@ -438,6 +452,8 @@
 
 :::
 
+### 스위치
+
 <img  style="max-width: 375px; width: 100%;" src="../images/switch-event-noti.png" alt="스위치 예시">
 
 ::: danger ❌ 레이블을 안쓰면 이렇게 들려요
@@ -452,12 +468,6 @@
 
 :::
 
-::: info 참고하세요
-
-토글은 구현 방식에 따라 스크린 리더에서 버튼처럼, 혹은 스위치처럼 읽힐 수 있어요. 접근성 표준에서는 ON/OFF 상태를 직관적으로 전달할 수 있는 스위치 역할(role=switch)을 권장해요.
-
-:::
-
 ---
 
 레이블 활용 방법에 대한 더 자세한 내용은 [여기](../semantic/required-label.html)를 참고해 주세요.

fundamentals/a11y/basic-guide/role.md

@@ -6,15 +6,15 @@ HTML의 기본 요소(`<button>`, `<input>`, `<a>` 등)는 이름에서 이미 
 
 아래 예시를 보면 각 UI 컴포넌트가 어떤 HTML 요소와 역할을 가지는지 자연스럽게 확인할 수 있어요.
 
-| 컴포넌트                    | HTML 요소                 | role 속성                           | 설명                                          |
-| --------------------------- | ------------------------- | ----------------------------------- | --------------------------------------------- |
-| 텍스트, 아이콘 등 장식 요소 | `<span>`, `<div>`         | 없음[^1]                            | **정보를 전달할 때 그에 맞는 역할 지정 필요** |
-| 입력창(Input)               | `<input>`                 | `role="textbox"`                    | 사용자가 텍스트를 입력하는 요소               |
-| 체크박스(Checkbox)          | `<input type="checkbox">` | `role="checkbox"`                   | 여러 옵션 중 원하는 항목을 모두 선택하는 요소 |
-| 라디오 버튼(Radio)          | `<input type="radio">`    | `role="radiogroup"`, `role="radio"` | 여러 옵션 중 하나 선택하는 요소               |
-| 링크(Link)                  | `<a>`                     | `role="link"`                       | 페이지 이동 요소                              |
-| 버튼(Button)                | `<button>`                | `role="button"`                     | 실행 동작을 수행하는 요소                     |
-| 다이얼로그(Dialog)          | `<dialog>`                | `role="dialog"`                     | 다이얼로그                                    |
-| 아코디언(Accordion)         | `<details>` `<summary>`   | `role="group"`                      | 아코디언                                      |
+| 컴포넌트            | HTML 요소                 | role 속성                           | 설명                                          |
+| ------------------- | ------------------------- | ----------------------------------- | --------------------------------------------- |
+| 텍스트              | `<span>`, `<div>`         | 없음[^1]                            | **정보를 전달할 때 그에 맞는 역할 지정 필요** |
+| 입력창(Input)       | `<input>`                 | `role="textbox"`                    | 사용자가 텍스트를 입력하는 요소               |
+| 체크박스(Checkbox)  | `<input type="checkbox">` | `role="checkbox"`                   | 여러 옵션 중 원하는 항목을 모두 선택하는 요소 |
+| 라디오 버튼(Radio)  | `<input type="radio">`    | `role="radiogroup"`, `role="radio"` | 여러 옵션 중 하나 선택하는 요소               |
+| 링크(Link)          | `<a>`                     | `role="link"`                       | 페이지 이동 요소                              |
+| 버튼(Button)        | `<button>`                | `role="button"`                     | 실행 동작을 수행하는 요소                     |
+| 다이얼로그(Dialog)  | `<dialog>`                | `role="dialog"`                     | 다이얼로그                                    |
+| 아코디언(Accordion) | `<details>` `<summary>`   | `role="group"`                      | 아코디언                                      |
 
-[^1]: 명시적으로 `role="generic"` 이 선언되어 있지만 접근성 트리에서는 인지하지 않습니다.
+[^1]: 명시적으로 `role="generic"` 이 선언되어 있지만 접근성 트리에서는 기본 텍스트로 인식되어요.