Vercel 팀이 Next.js Conf 등록 사이트의 접근성을 개선한 과정을 정리했다. 방문자의 최대 20%가 보조 기술(스크린 리더 등)을 사용한다는 전제 아래, 타겟 크기부터 ARIA 패턴, 색각 이상 대응까지 6가지 구체적인 구현을 다룬다.
핵심 포인트- Fitts' 법칙 적용: 푸터 메뉴 타겟 36px→60px(패딩 12px), 운동 장애 사용자 오조작 감소
- ARIA: 테마 선택기를 button에서 radio input + label 조합으로 교체, 스크린 리더가 컨트롤 역할 이해
- prefers-reduced-motion: 루프 애니메이션 5초 후 정지, transform/layout 비활성화(opacity는 유지)
- 색깔만으로 정보 전달 금지: Vordle 게임에서 색각 이상 사용자 피드백 후 아이콘 추가
- role=alert + aria-atomic: 에러 발생 시 스크린 리더가 전체 메시지를 즉시 읽어줌
상세 정리- 타겟 크기 문제: 푸터 메뉴가 36px로 너무 작아 로그아웃 중 메뉴 닫힘 사고 발생. 패딩 12px 추가로 60px 달성. Fitts' 법칙(타겟 클수록 클릭 시간 단축)을 실제 버그 해결에 적용.
- ARIA 라디오 패턴: 티켓 테마 선택기를 단순 button이 아닌 W3 ARIA 명세의 radio button input + label 조합으로 구현. 스크린 리더가 선택 가능한 옵션 중 하나임을 이해하게 됨.
- 구체적인 alt text: "Ticket theme #1" 같은 무의미한 alt 대신 "빛이 프리즘에서 세 방향으로 굴절되는 흑백 테마" 처럼 시각적 내용을 담아 비시각 사용자도 옵션 차이 파악 가능.
- 폼 에러 메시징: 에러 컨테이너를 DOM에 항상 존재시키고 role=alert + aria-atomic=true 부여. 에러 발생 시 스크린 리더가 전체 메시지를 즉시 읽어줌.
- prefers-reduced-motion: CSS 미디어 쿼리로 감지. 프리즘 밝기 낮추고, 루프 애니메이션 5초 후 정지, transform/layout 애니메이션 비활성화. opacity 전환은 정보 전달 목적이라 유지.
- Vordle(워드 게임) 색각 이상 문제: 추측 정확도를 색상만으로 전달하다 색각 이상 사용자 접근 불가 사례 발생. 사용자 피드백 후 아이콘을 추가해 색상+형태 두 채널로 전달. 색깔만으로 정보 전달 금지 원칙의 실증 사례.
- 게임 접근성 추가: table 구조로 시맨틱 조직, 게임 상태 설명 table heading, 시각적으로 숨겨진 h1 랜드마크, og:image:alt 속성으로 소셜 공유 이미지 설명.
- 권장 도구: axe 브라우저 확장(자동 감사), 스크린 리더 직접 테스트, Chrome DevTools 시각 장애 에뮬레이션 + 접근성 패널.
- 핵심 교훈: 자동화 도구는 기술적 위반만 잡고, 실제 접근성은 장애가 있는 사용자의 직접 피드백이 필요. Vordle 사례가 대표적.
왜 읽나Next.js 또는 웹 앱의 접근성을 실제로 개선하려는 프론트엔드 개발자에게 ARIA 패턴, 모션 설정, 색각 이상 대응, 에러 메시징의 구체적 구현 예시와 이유를 함께 제공한다.
Vercel Blog·
LINE Engineering·