Foundations
Accessibility
So everyone can take part in connecting. Accessibility is a standard at every stage of building a product.누구나 연결에 참여할 수 있도록. 접근성은 제품을 만드는 모든 단계의 기준입니다.
Basic checklist기본 체크리스트
| Area영역 | Review criteria검토 기준 |
|---|---|
| Text텍스트 | Contrast of at least 4.5:1 for normal text and 3:1 for large text일반 텍스트 4.5:1, 큰 텍스트 3:1 이상의 대비 |
| Control borders컨트롤 경계 | Input and checkbox borders at least 3:1 against the background (--dy-color-border-control)입력, 체크박스 테두리는 바탕과 3:1 이상 (--dy-color-border-control) |
| Keyboard키보드 | Move with Tab, activate with Enter/Space, and keep focus visible.Tab으로 이동하고, Enter, Space로 동작하며, 포커스가 보여야 합니다. |
| Input입력 | Always provide a connected label and explain the cause of errors in text.항상 연결된 label을 제공하고 오류의 원인을 텍스트로 설명합니다. |
| State상태 | Pair color with text, and announce feedback when things change.색상 외에 텍스트를 함께 제공하며 변경 피드백을 읽어줍니다. |
| Dialogs대화상자 | Move focus inside on open, and return it to the triggering button on close.열릴 때 내부로 포커스 이동, 닫힐 때 실행한 버튼으로 복귀 |
| Motion움직임 | Respect prefers-reduced-motion.prefers-reduced-motion을 존중합니다. |
| Zoom확대 | Content must be readable and operable at 200% zoom.200% 확대에서 내용을 읽고 조작할 수 있어야 합니다. |
| Theme테마 | Both light and dark must meet the same contrast standards.라이트, 다크 모두 같은 대비 기준을 만족해야 합니다. |
Focus indicator포커스 표시
The light theme uses an Action violet focus ring and the dark theme uses Life lime. A 3px ring with a 3px offset keeps it visible on any background.라이트 테마는 Action violet, 다크 테마는 Life lime 포커스 링을 사용합니다. 3px 두께와 3px 간격으로 어떤 바탕에서도 보이게 합니다.
:focus-visible {
outline: 3px solid var(--dy-color-focus);
outline-offset: 3px;
}Connecting names and descriptions이름과 설명 연결하기
<label for="email">Email</label>
<input id="email" type="email"
aria-describedby="email-help">
<p id="email-help">Enter the address where you'd like updates.</p><label for="email">이메일</label>
<input id="email" type="email"
aria-describedby="email-help">
<p id="email-help">안내를 받을 주소를 입력해 주세요.</p>Touch targets터치 영역
Fingers are not cursors. Every interactive element gets at least a 44 x 44px hit area, even if it looks smaller.손가락은 커서가 아닙니다. 모든 상호작용 요소는 작아 보여도 최소 44 x 44px의 터치 영역을 가집니다.
Pad small icons out to 44px and keep at least 8px between neighboring targets.작은 아이콘은 44px까지 여백을 주고, 이웃한 터치 영역 사이는 최소 8px을 둡니다.
Don't pack 24px icon buttons edge to edge. People tap the wrong one.24px 아이콘 버튼을 빈틈없이 붙이지 않습니다. 엉뚱한 버튼을 누르게 됩니다.
Never color alone색만으로 전하지 않기
Pair status color with an icon and a word: ✓ Connected, ! Couldn't send.상태 색에 아이콘과 단어를 함께: ✓ 연결됨, ! 보내지 못함.
Don't tell success from failure with a green or red dot only.초록 점이나 빨간 점만으로 성공과 실패를 구분하지 않습니다.
Keyboard map키보드 맵
Standard keys behave the same in every DYNGLE product. These also work on this site.표준 키는 모든 DYNGLE 제품에서 같게 동작합니다. 이 사이트에서도 동작합니다.
| Key키 | Action동작 |
|---|---|
| Tab / Shift + Tab | Move to the next or previous control다음 또는 이전 컨트롤로 이동 |
| Enter / Space | Activate buttons, toggle chips and switches버튼 실행, 칩과 스위치 전환 |
| ← → ↑ ↓ | Move within tabs, radios and listboxes탭, 라디오, 목록 안에서 이동 |
| Esc | Close dialogs, search and tooltips대화상자, 검색, 툴팁 닫기 |
| ⌘ K / Ctrl K, / | Open search on this site이 사이트에서 검색 열기 |
Announcing changes변화 알리기
| Change변화 | Technique방법 |
|---|---|
| Toast or saved state토스트나 저장 상태 | role="status" (aria-live="polite") |
| Blocking error진행을 막는 오류 | role="alert" (sparingly)role="alert" (아껴서) |
| Region loading영역 로딩 | aria-busy="true" |
| Selected chip or tab선택된 칩이나 탭 | aria-pressed / aria-selected |
References참고 기준
WCAG 2.2 quick referenceWCAG 2.2 빠른 참고 가이드
This document is an implementation standard. Accessibility conformance of the full product is verified separately on real screens and with assistive technology.이 문서는 구현 기준입니다. 전체 제품의 접근성 적합성은 실제 화면과 보조공학 환경에서 별도로 검증합니다.