디자인과 조작성을 양립하는 접근성의 기반

웹 접근성(a11y)은 특정 장애인을 위한 대응에 그치지 않고 키보드 조작 사용자나 일시적인 부상·한손 조작 사용자를 포함한 모든 사람의 체험을 향상시키는 품질 기준입니다.

누구나 직관적으로 조작할 수 있는 컴포넌트 설계의 요점을 정리합니다.

모달 대화 상자 디자인의 필수 3 요구 사항

모달은 접근성 위반이 가장 자주 발생하는 부분입니다. 다음 3가지 요건을 충족해야 합니다.

1. 포커스 스트랩(Focus Trap): 열려 있는 동안 Tab 키로 이동을 모달 내부에만 갇혀 후면 요소에 포커스가 새는 것을 방지합니다.
2. Escape 키 조작: ESC 키를 눌러 즉시 닫고 닫은 후에는 “모달을 연 원래 버튼"으로 포커스를 복귀시킨다.
3. 적절한 WAI-ARIA 속성:
   • role="dialog" 및 aria-modal="true" 부여
   • 제목을 가리키는 aria-labelledby의 명시

간과되기 쉬운 3 대 안티 패턴

• ** 안티 패턴 1 :<div> 또는 ‘`에 클릭 이벤트를 추가 **
  • 문제: 키보드(Enter/Space)로 조작할 수 없고, 스크린 리더에게도 버튼으로서 전해지지 않는다.
  • 해결: 네이티브의 <button> 태그를 사용해, 스타일은 CSS로 정돈한다.
• **안티패턴 2: 자리 표시자를 라벨 대신 **
  • 문제: 입력을 시작하면 사라져 버려 시인성과 인지부하를 손상시킨다.
  • 해결: 상시 표시되는 <label> 를 준비해, htmlFor 로 input 의 id 와 묶는다.
• 안티패턴 3: 콘트라스트비 부족
  • 문제: 얇은 회색 문자 등 대비비가 4.5:1 미만으로 시인 곤란.
  • 해결: WCAG 2.1 AA 기준을 클리어하는 컬러 팔레트를 고정한다.

Headless UI 라이브러리를 통한 공수 감소

액세서빌러티를 처음부터 직접 구현하는 것은 매우 공수가 걸립니다. Radix UI나 React Aria등의 「스타일을 가지지 않는 고액세시빌리티인 UI 프리미티브」를 채용해, 스타일링만을 Tailwind CSS등으로 맞추는 수법이 현대의 스탠다드입니다.