접근성 체크리스트 — 색 대비부터 키보드 내비게이션까지

접근성 체크리스트는 디자인 검수 막바지가 아니라 초기 단계부터 옆에 두고 확인해야 한다. 색상 대비가 부족하거나 키보드로 접근이 안 되는 요소를 뒤늦게 발견하면 구조 자체를 다시 짜야 하는 경우도 생긴다. 미리 확인할수록 몰아서 고치는 것보다 훨씬 적은 비용으로 해결된다.

1. 색 대비부터 확인하기

본문 텍스트는 배경 대비 4.5대1 이상, 큰 텍스트는 3대1 이상을 기준으로 삼는다. 버튼이나 아이콘처럼 의미를 전달하는 그래픽 요소도 3대1 기준을 적용해야 한다. 색상만으로 상태를 구분하지 않고 아이콘이나 텍스트를 함께 써서 색맹 사용자도 구분할 수 있게 하는 것도 이 단계에서 함께 확인할 부분이다.

4.5:1

본문 텍스트 최소 대비

3:1

큰 텍스트 · 그래픽 요소 최소 대비

2. 키보드 내비게이션 점검하기

마우스를 치우고 Tab 키만으로 화면의 모든 인터랙션 요소에 접근할 수 있는지 확인해야 한다. 포커스가 어디에 있는지 시각적으로 뚜렷하게 보이는 아웃라인이 있는지, 모달을 열었을 때 포커스가 모달 안으로 이동하고 닫으면 원래 위치로 돌아오는지, 순서가 시각적 흐름과 일치하는지를 하나씩 눌러보며 확인한다. 이 검증은 디자인 QA 체크리스트 항목에 함께 포함시켜 매 릴리즈마다 반복하는 것이 효과적이다.

Tab 키만으로 모든 인터랙션 요소에 도달하는지 확인한다

포커스 위치가 시각적으로 뚜렷한 아웃라인으로 보이는지 확인한다

모달을 열면 포커스가 안으로, 닫으면 원래 위치로 돌아오는지 확인한다

포커스 이동 순서가 시각적 흐름과 일치하는지 확인한다

스크린 리더 기본 동작 확인하기

이미지에 대체 텍스트가 있는지, 버튼과 링크에 목적을 알 수 있는 라벨이 붙어 있는지, 폼 필드에 레이블이 프로그래밍적으로 연결되어 있는지는 디자인 단계에서부터 결정해야 하는 부분이다. “자세히 보기”처럼 목적지가 불분명한 링크 텍스트는 스크린 리더 사용자에게 특히 불친절하므로, 컴포넌트 네이밍만큼이나 링크 텍스트 작성 규칙도 컴포넌트 네이밍 규칙과 함께 다뤄야 할 항목이다.

불친절한 링크

“자세히 보기” — 목적지를 알 수 없다

친절한 링크

“접근성 가이드 자세히 보기” — 목적지가 명확하다

3. 터치 타깃과 오토레이아웃으로 여백 확보하기

모바일에서는 터치 영역이 최소 44x44px는 되어야 오조작을 줄일 수 있다. 버튼 사이 간격이 좁으면 시각적으로는 괜찮아 보여도 실제 터치에서는 옆 버튼이 눌리는 문제가 생긴다. 피그마 오토레이아웃 완전 정복에서 다룬 간격 규칙을 적용하면 터치 타깃 간 최소 여백을 컴포넌트 단위에서부터 강제할 수 있다.

44px

최소 터치 타깃 크기 (44x44px)

4. 자동 검사 도구의 한계

Lighthouse나 axe 같은 자동 접근성 검사 도구는 색 대비나 대체 텍스트 누락처럼 기계적으로 판별 가능한 항목을 빠르게 걸러주는 데 유용하다. 하지만 이런 도구는 링크 텍스트가 실제로 목적을 잘 설명하는지, 포커스 이동 순서가 논리적인지처럼 맥락과 판단이 필요한 항목까지는 잡아내지 못한다. 자동 검사를 통과했다고 해서 접근성이 확보되었다고 안심하는 것은 흔한 오해다.

자동 검사로 확인 가능

색 대비 수치, 대체 텍스트 유무, 시맨틱 태그 사용 여부

수동 검토가 필요

포커스 이동 순서의 논리성, 링크 텍스트의 명확성, 실제 스크린 리더 사용 경험

가능하다면 릴리즈 전에 실제 스크린 리더로 화면을 한 번이라도 직접 훑어보는 습관을 들이는 것이 자동 검사만으로는 잡히지 않는 문제를 발견하는 가장 확실한 방법이다. 자동 검사와 수동 검토를 함께 체크리스트에 포함시켜두면, 두 방식이 서로의 빈틈을 메워주면서 전체적인 검수 품질이 안정적으로 유지된다.

모든 화면을 매번 수동으로 검토할 수는 없으므로, 신규 컴포넌트나 핵심 사용자 흐름처럼 우선순위가 높은 화면부터 수동 검토 대상으로 지정해두는 것이 현실적인 접근이다.

5. 마치며

접근성 체크리스트 실전 항목을 정리하면 다음과 같다.

• 본문 대비 4.5대1, 큰 텍스트와 그래픽 3대1 이상 확인
• 색상 외 아이콘, 텍스트로 상태 구분하기
• Tab만으로 전체 인터랙션 접근 가능한지 확인
• 이미지 대체 텍스트, 폼 레이블 연결 여부 확인
• 터치 타깃 44x44px 이상, 버튼 간 여백 확보

접근성 체크리스트는 특정 사용자만을 위한 별도 작업이 아니라 모든 사용자의 사용성을 함께 끌어올리는 기본기다.