보이는 화면을 넘어 동작으로 검증하는 웹 접근성

2026.07.13

시맨틱 구조가 접근성의 첫 번째 API다

접근성을 ARIA 속성 추가 작업으로 시작하면 기본 HTML이 제공하는 기능을 놓치기 쉽다. 페이지의 글 제목은 하나의 h1, 본문 주요 구획은 h2, 그 하위 항목은 h3으로 구성한다. 클릭 동작은 div가 아니라 button이나 a를 사용한다. 브라우저가 키보드 조작, 포커스, 역할을 이미 구현해 주기 때문이다.

Markdown 본문에 작성자가 h1을 넣을 수 있다면 렌더러에서 h2로 정규화해 페이지 제목과 경쟁하지 않게 한다. 비어 있는 heading에는 앵커를 생성하지 않는다. 스크린 리더 사용자가 의미 없는 링크를 반복해서 만나기 때문이다. 문서 개요 도구로 heading 순서를 점검하면 CSS만 봐서는 찾기 어려운 구조 오류가 드러난다.

키보드로 처음부터 끝까지 사용해 본다

마우스를 치우고 Tab, Shift+Tab, Enter, Space, Escape만으로 핵심 작업을 수행한다. 포커스 순서는 시각적 순서와 같아야 하며, 현재 위치를 나타내는 focus ring을 제거하면 안 된다. 고정 헤더 뒤로 포커스된 요소가 숨지 않는지도 확인한다.

터치 대상은 아이콘 크기가 아니라 클릭 가능한 영역 기준으로 최소 44×44px을 확보한다. 작은 복사 아이콘이라면 padding으로 버튼 영역을 키우고, 텍스트 이름을 제공한다.

<button type="button" aria-label="코드 복사">
  <svg aria-hidden="true">...</svg>
</button>

아이콘은 장식이므로 aria-hidden, 버튼은 목적을 설명하는 이름을 갖는다. 복사 성공 메시지는 눈에만 보이는 색 변화에 의존하지 말고 상태 텍스트로도 전달한다.

색상과 모션은 상태 변화까지 검증한다

일반 텍스트와 배경은 WCAG AA 명암비를 충족해야 한다. 기본 본문만 측정하지 말고 링크, placeholder, 비활성 버튼, 코드 토큰, dark mode까지 확인한다. hover에서만 구분되는 링크는 터치와 키보드 사용자에게 의미가 없으므로 밑줄이나 충분한 색상 차이를 기본 상태에 둔다.

애니메이션은 짧더라도 사용자의 감속 설정을 존중한다.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

단순히 시간을 줄이는 것보다 장식 전환을 없애고, 작업 완료에 필요한 로딩 표시는 유지하는 식으로 목적을 구분한다. 자동 dark mode에서는 경계선과 코드 배경이 사라지지 않는지 실제 운영체제 설정을 바꿔 본다.

폼 오류는 입력과 직접 연결한다

“입력값이 잘못되었습니다”라는 상단 문구만으로는 어느 필드를 고쳐야 하는지 알기 어렵다. 오류가 난 input에 aria-invalid="true"를 주고, 설명 요소의 id를 aria-describedby로 연결한다.

<textarea
  id="comment_body"
  aria-invalid="true"
  aria-describedby="comment_body_error">
</textarea>
<p id="comment_body_error">댓글 내용을 입력해 주세요.</p>

서버 검증 실패 후에도 사용자가 입력한 값과 포커스 맥락을 보존한다. honeypot처럼 사람에게 보이지 않아야 하는 필드는 단순히 화면 밖으로 밀어내 포커스되는 방식이 아니라 접근성 트리와 tab 순서에서도 제외한다. 필수 여부는 색상 별표만 쓰지 말고 텍스트나 required 의미로 제공한다.

자동 검사와 수동 시나리오를 함께 남긴다

정적 검사기는 이름 없는 버튼이나 낮은 명암비를 잘 찾지만, Turbo 뒤로가기 후 버튼이 실제로 작동하는지는 알지 못한다. 시스템 테스트에는 키보드 포커스, heading 개수, 모바일 가로 overflow, 동적 상태 복원 같은 행동을 포함한다.

출시 전에는 다음 시나리오를 반복한다.

320px 폭과 200% 확대에서 가로 스크롤 없이 읽는다.
키보드만으로 검색, 글 탐색, 댓글 작성이 가능하다.
light와 dark mode에서 포커스와 오류 상태가 보인다.
모션 감소 설정에서 장식 전환이 제거된다.
상세 페이지에서 다른 화면으로 갔다가 뒤로 돌아와도 동적 버튼이 작동한다.

접근성은 마지막 점검표가 아니라 UI가 제공해야 하는 동작 계약이다. 구조, 입력, 상태 변화, 탐색 복원을 테스트로 남길 때 지속적으로 지킬 수 있다.