docs: 접근성 입문 가이드 및 UI 별 가이드 추가 #677
Conversation
# Conflicts: # fundamentals/a11y/ui-foundation/tab.md
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| 보험료 조회하면 | ||
|
|
||
| 보험료 조회하면 |
There was a problem hiding this comment.
::: danger ❌ 레이블을 안 쓰면 각각의 버튼을 구분할 수 없어요.
보험료 조회하면, **버튼**
보험료 조회하면, **버튼**
:::
좀 더 명확하게 타이틀을 주고, 버튼이라는 것을 알려줘볼게요!
| **선택 가능한 옵션들과 현재 선택 상태를 바로 이해하고 조작**할 수 있도록 구현하는 게 핵심이에요. | ||
|
|
There was a problem hiding this comment.
이 쯤에 체크박스의 접근성을 챙기는 것에 대한 맥락이 살짝 들어가면 좋을 것 같아요
There was a problem hiding this comment.
체크박스에 접근성이 챙겨지지 않으면 불편함을 겪게 되는 경우와 그걸 막기 위해 이러이러한 것을 알려주겠다~ 라는 연결 문장이 필요해 보입니다!
There was a problem hiding this comment.
| 체크박스에 접근성이 제대로 챙겨지지 않으면, 스크린리더를 사용하는 사용자는 옵션이 무엇을 의미하는지, 현재 어떤 항목이 선택되었는지 정확히 파악하기 어려워요. 예를 들어, 단순히 "체크박스"만 들리고 실제로 어떤 목적인지 알 수 없거나, 체크박스가 아닌 "버튼"으로만 인식된다면 서비스 이용이 크게 불편해질 수 있어요.
| 이런 문제를 예방하려면, 체크박스에 명확한 레이블을 제공하고, 그룹 내에서 각각의 의미와 선택 상태가 쉽게 전달될 수 있도록 구현해야 해요. 아래에서는 실무에서 자주 놓치는 체크박스 접근성 포인트와 올바른 구현 방식을 구체적으로 안내할게요.
와 같은 식으로 적어봤어요!
| 겉보기에는 모달이 구성되어 있지만, 다음과 같은 문제가 있어요. | ||
|
|
||
| - 모달이 열렸다는 것을 사용자가 인식하지 못해요. | ||
| - 모달 바깥의 콘텐츠와 상호작용할 수 있어요. |
There was a problem hiding this comment.
항목이 두 개 정도라서 불렛이 아니라 여기 그냥 문장으로 이어서 설명해 주어도 될 거 같아요.
There was a problem hiding this comment.
"겉보기에는 모달이 구성되어 있지만, 모달이 열렸다는 것을 사용자가 인식하지 못해요. 또한 모달 바깥의 콘텐츠로 포커스가 나갈 수 있어요."
로 수정해봤습니다.
|
|
||
| #### 1. 포커스 저장과 복원 | ||
|
|
||
| 모달이 열릴 때 현재 포커스 위치를 기억해뒀다가, 닫힐 때 원래 위치로 돌려보내야해요. |
There was a problem hiding this comment.
| 모달이 열릴 때 현재 포커스 위치를 기억해뒀다가, 닫힐 때 원래 위치로 돌려보내야해요. | |
| 모달이 열릴 때 현재 포커스 위치를 기억해 뒀다가, 닫힐 때 원래 위치로 돌려보내요. |
~해야 해요가 많은데
문장들을 전체적으로 자연스럽게 바꿔주면 좋을 거 같아요.
|
|
||
| **옵션들이 하나의 그룹으로 묶여 있다는 것과 어떤 옵션이 선택되어 있는지** 바로 이해하고 조작할 수 있도록 구현하는 게 중요해요. | ||
|
|
||
| 아래 내용은 라디오 버튼의 그룹화와 선택 상태 관리 등 실무에서 실수하기 쉬운 부분을 구체적으로 다뤄요. |
There was a problem hiding this comment.
흠 접근성에 관한 내용이 전혀 없는데 이게 맞나영?
There was a problem hiding this comment.
라디오 버튼의 접근성을 제대로 챙기지 않으면, 스크린리더 사용자는 어떤 질문에 대한 선택지인지, 지금 무엇이 선택되어 있는지 알기 어렵고, 올바른 답변을 선택하는 데 혼란을 겪을 수 있어요.
예를 들어, 단순히 "라디오" 역할만 들리고 실제로 어떤 목적인지 알 수 없거나, 라디오 그룹이 여러 개 있는데 제대로 그룹이 묶여 있지 않아 사용자가 어떤 질문에 대한 선택지인지 알기 어렵다면 서비스 이용이 크게 불편해질 수 있어요.
이런 불편을 막으려면 라디오 버튼 그룹화, 질문과 선택지의 명확한 연결, 그리고 현재 상태의 전달이 중요합니다. 아래에서는 이러한 핵심 접근성 요소와, 실무에서 자주 놓치기 쉬운 구현 방법을 구체적으로 안내할게요.
|
|
||
| 사용자가 **스위치의 현재 상태와 스위치를 조작했을 때 어떤 변화가 일어나는지**를 바로 이해하고 조작할 수 있도록 구현하는 게 중요해요. | ||
|
|
||
| 이번 가이드에서는 `role="switch"` 가 무엇인지, 레이블을 어떻게 적절하게 사용하는지, 그리고 스위치의 상태 관리 등 실무에서 실수하기 쉬운 부분을 구체적으로 다뤄요. |
There was a problem hiding this comment.
여기서도 접근성 관점에서의 맥락이 없어서 추가 필요할 거 같아요
There was a problem hiding this comment.
스위치에 접근성이 제대로 챙겨지지 않으면, 스크린리더를 사용하는 사용자는 스위치의 현재 상태와 스위치를 조작했을 때 어떤 변화가 일어나는지 정확히 파악하기 어려워요. 예를 들어, 단순히 "스위치"만 들리고 실제로 어떤 목적인지 알 수 없거나, 스위치가 아닌 "버튼"으로만 인식된다면 서비스 이용이 크게 불편해질 수 있어요.
이번 가이드에서는 기능이 유사한 체크박스와 스위치의 차이가 무엇인지, 레이블을 어떻게 적절하게 사용하는지, 그리고 스위치의 상태 관리 등 실무에서 실수하기 쉬운 부분을 구체적으로 다뤄요.
| 1. **상태를 명확하게 전달해요** | ||
| - 스크린리더가 "다크 모드, 스위치, 꺼짐"처럼 읽어줘요 | ||
| - 사용자가 현재 상태를 정확히 파악할 수 있어요 | ||
| 2. **checkbox와 구분해서 사용할 수 있어요** | ||
| - checkbox는 "선택됨/선택 안 됨" 상태를 나타내고, switch는 "켜짐/꺼짐" 상태를 나타내요 | ||
| - 스크린리더가 적절한 용어로 읽어줘요 |
There was a problem hiding this comment.
그리고 이 내용이 예제 코드 위에 같이 나와야 할 거 같아요. 읽는 입장에서 저게 접근성이랑 어떻게 연결되는지 첫 문단에서 이해하기 어려운 거 같아요
|
|
||
| 무엇을 선택하는지 적어주세요. 옆에 글자가 있더라도 해당 컴포넌트와 정확히 연결되지 않으면, 사용자는 이 컴포넌트가 어떤 의미인지 추측해야 하고 명확하게 이해하기 어려워요. | ||
|
|
||
| <img style="max-width: 375px; width: 100%;" src="../images/checkbox-noti-agreement.png" alt="체크박스 예시"> |
There was a problem hiding this comment.
이미지를 좀 더 나은 걸로 바꿀 수 있을까요..?
| | 아코디언(Accordion) | `<details>` `<summary>` | `role="group"` | 아코디언 | | ||
|
|
||
| [^1]: 명시적으로 `role="generic"` 이 선언되어 있지만 접근성 트리에서는 인지하지 않습니다. | ||
| [^1]: 명시적으로 `role="generic"` 이 선언되어 있지만 접근성 트리에서는 기본 텍스트로 인식되어요. |
📝 Key Changes
from #622
🖼️ Before and After Comparison