랜딩 페이지 접근성 체크리스트

접근성 있는 랜딩 페이지는 마우스 없이도, 시력이 완벽하지 않아도 읽고 탭으로 이동하고 제출할 수 있는 페이지예요. 이 체크리스트는 대부분의 문제를 잡아내는 네 가지로 시작해요. 본문 명도 대비 4.5 대 1 이상, 조작 요소 24×24 CSS 픽셀 이상, 모든 컨트롤에 보이는 포커스 표시, 모든 입력 칸에 진짜 라벨. 넷 다 디자인 단계에서는 싸게 고치고 나중에는 비싸게 고쳐요.

대부분의 랜딩 페이지는 대비에서 무너져요

WCAG는 AA 등급에서 일반 텍스트의 최소 명도 대비를 배경 대비 4.5 대 1로 정해요. 큰 텍스트는 3 대 1이고요. 큰 텍스트는 18포인트 이상, 또는 볼드 14포인트 이상을 말하고, CSS로는 대략 24px 또는 볼드 18.5px예요. 이 값은 반올림하지 않아서 4.499 대 1은 실패예요. 흰 배경 위 옅은 회색 본문이 가장 흔한 범인이에요. 그다음은 사진 위의 흰 글자인데, 이미지 위쪽에서는 대비가 버티다가 아래쪽에서 무너져요.

버튼과 아이콘에도 대비가 필요해요

텍스트는 절반일 뿐이에요. WCAG는 사용자 인터페이스 요소와 의미를 가진 그래픽에도 옆 색상 대비 3 대 1을 요구해요. 이것도 AA 등급이에요. 입력 칸 테두리, 버튼 외곽선, 체크박스, 별점 별, 그리고 혼자서 의미를 전달하는 아이콘이 여기 들어가요. 흰 카드 위 옅은 회색 입력 칸 테두리가 랜딩 페이지에서 가장 흔히 놓치는 부분이에요. 그리고 그건 사람들이 행동하기 전에 반드시 알아봐야 하는 바로 그 요소죠.

터치 영역은 24×24 픽셀 이상으로

WCAG 2.2는 AA 등급에 타깃 크기 규칙을 새로 넣었어요. 조작 대상은 최소 24×24 CSS 픽셀이어야 해요. 각 대상을 중심으로 지름 24픽셀 원을 그렸을 때 다른 대상과 겹치지 않을 만큼 떨어져 있으면 더 작아도 괜찮아요. 문장 안에 들어간 링크는 예외고요. 실제로 걸리는 건 아이콘 버튼, 모달 닫기 버튼, 푸터의 소셜 아이콘, 그리고 페이지 맨 아래 약관 줄에 빽빽하게 붙은 링크들이에요.

키보드 접근은 5분이면 확인해요

마우스를 내려놓고 페이지 맨 위에서 Tab을 누르세요. 모든 링크와 버튼, 입력 칸, 메뉴 컨트롤이 화면에 보이는 순서대로 포커스를 받아야 하고, 지금 어디에 있는지 항상 보여야 해요. 커스텀 컴포넌트가 여기서 가장 많이 실패해요. div로 만든 슬라이더는 포커스를 가둬요. 영상 모달은 포커스를 놓아주지 않고요. 고정 헤더는 방금 탭으로 이동한 요소를 가려요. 키보드로 메인 버튼까지 가서 누를 수 없다면 그 페이지는 고장 난 거예요.

모든 입력 칸에 진짜 라벨을 주세요

플레이스홀더는 입력을 시작하는 순간 사라져서, 흐름을 놓친 사람에게는 확인할 게 남지 않아요. 스크린 리더도 플레이스홀더를 일관되게 읽어 주지 않고요. 각 입력 칸 위에 보이는 라벨을 두세요. 예시 형식을 보여 주고 싶다면 플레이스홀더는 그 용도로만 남기고, 라벨을 입력 칸에 제대로 연결해서 라벨을 눌러도 커서가 들어가게 하세요. 오류 메시지는 무엇이 잘못됐는지 말로 설명해야 해요. 색만으로 오류를 표시하면 안 되고요.

2025년에 시행된 EU 규정

유럽 접근성법(European Accessibility Act)이 2025년 6월 28일 발효됐어요. EU 소비자에게 판매하는 서비스에 적용되고, 이커머스와 은행, 교통 예약이 포함돼요. 기준은 EN 301 549이고, 이 표준은 WCAG AA 등급 위에 세워져 있어요. 유럽 소비자에게 판매한다면 접근성은 좋은 습관에서 준수 사항으로 넘어간 거예요. 집행은 단일 기관이 아니라 회원국별로 이뤄져서, 위험을 예측하기가 더 어려워요. 위험이 작아진 것도 아니고요.

이 체크리스트를 20분 만에 돌리는 법

자동 검사 도구로 시작하되 점수는 무시하세요. 자동 도구는 중요한 것의 일부만 잡아내니까요. 페이지 전체를 Tab으로 이동해 보세요. 모든 텍스트와 버튼 색을 대비 검사 도구로 찍어 보세요. 브라우저를 200%로 확대하고 겹치거나 잘리는 게 없는지 확인하세요. 운영체제에 내장된 스크린 리더를 켜고 히어로와 폼을 들어 보세요. 대비 값은 페이지마다 고치지 말고 디자인 토큰에서 고치세요. 안 그러면 다음 페이지에서 같은 문제가 또 나가요.