Accessibility
모든 능력의 사람이 협업 도구를 쓰고, 이해하고, 탐색할 수 있도록 만드는 원칙이에요.
접근성은 장애가 있는 사람만을 위한 기능이 아니에요. 장애는 영구적일 수도, 팔을 다친 것처럼 일시적일 수도, 햇빛 아래에서 화면을 보는 것처럼 상황에 따른 것일 수도 있어요. 접근성을 지키면 모두가 더 빠르고 편하게 일할 수 있어요.
Steel 은 WCAG 2.1 AA 를 기준으로 해요.
원칙
일관된 경험 만들기
- Steel 컴포넌트를 바탕으로 만들어요. 컴포넌트에는 키보드 조작, 포커스 링, ARIA 속성 같은 접근성 기능이 이미 들어 있어요.
- 같은 작업에는 화면과 기능이 달라도 같은 컴포넌트와 상호작용을 써요. 익숙한 패턴은 인지 부담을 줄여 줘요.
경험과 언어를 단순하게
- 복잡한 과정은 피하고 단계를 나눠요.
- 일관된 패턴과 쉽고 간결한 말을 써요. 중학생도 이해할 수 있는 수준을 목표로 해요.
모두를 포용하기
- 포용적인 언어를 쓰고, 사람의 능력을 짐작하지 않아요.
- 전문 용어, 비유, 관용구는 피해요. 번역되거나 화면 읽기 프로그램으로 들을 때 뜻이 흐려질 수 있어요.
사람에게 통제권 주기
- 어떤 화면 크기에서도 내용이 다시 흐르도록(reflow) 만들어요. 가로 스크롤 없이 400% 확대까지 읽을 수 있어야 해요.
- 크기, 대비, 색을 사용자가 조절할 수 있게 해요.
- 운영체제의 동작 줄이기 설정을 존중해요. 자세한 내용은 Motion 을 참고하세요.
- 되돌리기 어려운 큰 변경 전에는 미리 알려요.
텍스트 대안 주기
- 눈에 보이는 레이블을 달고, 프로그램이 읽을 수 있게 연결해요.
- 의미 있는 이미지에는 짧고 분명한 대체 텍스트를 써요. 장식용 이미지는
alt=""로 비워요. - 동영상에는 자막과 대본을 함께 줘요.
접근 가능한 색 쓰기
- 색만으로 의미를 전달하지 않아요. 아이콘, 텍스트, 모양을 함께 써요.
- 일반 텍스트는 4.5 : 1, 큰 텍스트와 그래픽은 3 : 1 이상의 대비를 지켜요. Steel 토큰을 의도한 조합으로 쓰면 이 기준을 통과해요. Color 에서 실제 대비값을 볼 수 있어요.
의미 있는 HTML 쓰기
header,nav,main,footer,button,a처럼 뜻이 있는 요소로 구조를 전달해요.div,span에 의미를 기대지 않아요. 클릭할 수 있는div대신button을 써요.
폭넓게 테스트하기
- 장애가 있는 사람, 기술 경험이 다양한 사람과 함께 테스트해요.
- 키보드만으로, 화면 읽기 프로그램(VoiceOver, NVDA, TalkBack)으로, 확대한 상태로 직접 써 봐요.
- 자동 검사 도구는 문제의 일부만 찾아요. 수동 확인과 함께 써요.
고려할 점
| 대상 | 무엇을 챙길까요 |
|---|---|
| 시각 | 대체 텍스트와 의미 있는 HTML, 충분한 대비, 색에만 기대지 않는 표현, 확대해도 깨지지 않는 레이아웃 |
| 청각 | 영상과 음성에 자막과 대본, 소리로만 주는 알림 피하기 |
| 운동 | 키보드만으로 모든 기능 사용, 충분히 큰 누름 영역(최소 24 × 24px), 끌기 동작의 대안 |
| 인지 | 쉬운 말, 제목과 짧은 문단으로 나눈 내용, 예측 가능한 내비게이션, 시간 제한 없애기 |
키보드와 포커스
- 모든 상호작용 요소는
Tab으로 이동하고Enter·Space로 실행할 수 있어야 해요. - 포커스 순서는 화면을 읽는 순서와 같아야 해요.
- 포커스 위치는 항상 눈에 보여야 해요. Steel 은
color.border.focused와border.width.focused(2px) 로 요소 바깥 2px 에 포커스 링을 그려요.
<button className="outline-2 outline-offset-2 outline-transparent focus-visible:outline-ds-border-focused">…</button>- 모달처럼 위에 뜨는 레이어는 열릴 때 안으로 포커스를 옮기고, 닫히면 연 요소로 돌려놔요.
Esc로 닫을 수 있어야 해요. - 선택(selected)과 포커스(focused)는 서로 다른 표시로 구분해요.
화면 읽기 프로그램
- 아이콘만 있는 버튼에는
aria-label을 줘요. - 상태가 바뀌는 요소에는
aria-expanded,aria-pressed,aria-checked,aria-selected처럼 상태를 알리는 속성을 써요. - 저장 완료 같은 비동기 알림은
aria-live영역으로 전달해요. - 내비게이션 경로는
>기호 대신 "다음" 같은 말로 써요. 화면 읽기 프로그램은>를 "보다 큼"으로 읽어요.
접근성이 주는 이점
- 더 많은 사람이 제품을 쓸 수 있어요.
- 쉬운 언어와 일관된 패턴은 모든 사용자의 학습 시간을 줄여 줘요.
- 키보드 조작은 숙련된 사용자의 작업 속도를 높여 줘요.
- 의미 있는 구조는 검색과 자동화 도구에도 도움이 돼요.