400% 확대에서 남는 화면을 실측했더니, 뷰포트 높이와 무관한 고정 px 통행료가 나왔다
320px 리플로우 판정을 통과한 페이지에서도 짧은 뷰포트에서는 본문에 남는 세로 공간이 118px까지 줄었다. 손실은 비율이 아니라 82px짜리 고정 픽셀 통행료였고, 대부분 우리 CSS 밖의 제3자 고정 컨테이너에서 나왔다. 측정 방법과 배포 회귀 게이트 설계까지 정리했다.
태그
WCAG
13개 글
CSS로는 Escape를 받을 수 없다: 툴팁 일곱 개로 잰 SC 1.4.13
툴팁에 :focus-visible만 붙이면 접근성은 끝난 줄 알았다. 구현 일곱 개를 만들어 Dismissible·Hoverable·Persistent 세 항목을 각각 재보니 CSS만으로 통과한 것은 하나도 없었고, popover="hint"조차 절반만 대신해 주었다.
320px로 재면 리플로우는 절반만 잰 것이다: 400% 확대의 높이 200px
WCAG 1.4.10 리플로우를 320x844, 320x256, 320x200 세 조건으로 같이 재봤다. 가로 판정은 세 조건이 한 픽셀도 다르지 않았고, 400% 확대에서 실제로 달라지는 것은 높이였다. 82px짜리 sticky 헤더가 뷰포트의 41%를 먹고 있었다.
자간을 0.12em 넓혔더니 570곳이 잘렸다: 검사기가 통과시킨 AA 기준
axe-core는 WCAG 1.4.12 텍스트 간격 기준에 위반 0건을 줬다. 그런데 그 기준이 요구하는 네 줄을 실제로 적용하자 570개 요소에서 글자가 잘렸다. 네 줄을 하나씩 따로 걸어 -webkit-line-clamp가 어디서 콘텐츠를 잃게 하는지를 분해해봤다.
W3C 정답지 1,213장에 검사기를 걸었다: 자동 접근성 게이트가 결정하는 것
W3C ACT가 공개한 정답 붙은 테스트 케이스 1,213장에 axe-core를 전수로 돌렸다. 실패해야 하는 예제 387장 중 해당 성공기준으로 위반이 잡힌 것은 145장(37.5%)이었고, 36개 기준 중 22개는 0건이었다. 침묵의 일부는 규칙이 그냥 꺼져 있어서였다.
Tab으로 0건, Shift+Tab으로 16건: 스티키 헤더가 삼킨 키보드 포커스
같은 6개 페이지를 Tab으로 내려가며 재면 WCAG 2.4.11 위반이 0건, Shift+Tab으로 올라가며 재면 16건이었다. 브라우저가 포커스 대상을 화면에 넣는 정렬이 진행 방향에 따라 달라지기 때문이다. CSS 한 줄로 16건을 0건으로 줄인 바로 그 실측이다.
표본 26장이 놓친 위반 3종: WCAG-EM 2.0을 1,342장에 적용한 기록
W3C가 7월 23일 WCAG-EM 2.0을 Group Note로 발행했다. 문서의 표본 추출 절차대로 26장을 뽑고, 같은 빌드의 1,342장 전체를 axe-core로 훑어 대조했다. 표본은 위반 4종 중 1종만 잡았고, 무작위 표본의 새 발견 확률은 0.29%였다.
aria-modal="true"는 아무것도 막지 않았다 — 모달 포커스 이탈 실측과 inert
role="dialog"에 aria-modal="true"까지 붙인 모달에서 Tab을 세 번 누르자 포커스가 오버레이 뒤로 빠져나갔다. axe는 위반 0건. 같은 마크업을 aria-hidden, inert로 바꿔가며 키보드 포커스가 실제로 어디에 떨어지는지 기록했다.
WCAG 2.2 최소 타깃 크기, 초록불 92점 뒤에 숨은 AA 실패
손끝이 빗나가는 22×22 버튼에 Lighthouse는 접근성 92점을 줬다. WCAG 2.2 SC 2.5.8(최소 24×24)을 샌드박스에 심어 재보니 자동 도구는 크기 위반만 잡고 예외 조항은 사람에게 넘겼다. 스페이싱 예외 계산과 CSS 수정을 실측 로그로 정리한다.
접근성 자동 검사가 초록불을 줘도 남아 있는 네 가지 장벽
체크아웃 페이지 하나에 WCAG 장벽 여덟 개를 일부러 심고 axe-core로 돌렸다. 규칙형 위반 넷은 잡혔지만, 사람의 판단이 필요한 넷은 초록불 뒤에 그대로 남았다. 무엇을 자동화가 끝까지 못 보는지, 그 자리를 메우는 수동 리뷰 체크리스트를 실측 로그와 함께 정리했다.
접근성 이름이 틀리면 음성 제어도 AI 에이전트도 버튼을 못 누른다
버튼에 aria-label을 붙였는데 접근성 트리는 화면에 없는 글자를 읽는다. WCAG 2.5.3 Label in Name 위반을 샌드박스에서 재현해 확인하고, Lighthouse 13.3.0의 Agentic Browsing 점수가 0점에서 100점으로 바뀌는 과정을 실측했다.
axe-core를 CI에 넣으면 color-contrast만 조용히 사라지는 이유
AI가 만든 예약 위젯을 jsdom과 실제 브라우저에서 axe-core로 돌려봤다. 구조적 위반 4개는 브라우저 없이 잡혔지만 color-contrast만 jsdom에서 incomplete로 빠졌다. CI를 2단으로 짜야 커버리지 구멍이 안 생기는지 실측 로그와 함께 정리했다.
접근성 점수 55에서 100까지 — Lighthouse로 WCAG 위반 직접 잡아 고치기
가상의 베이커리 랜딩 페이지를 Lighthouse 접근성 감사에 돌려 55점을 받았다. 색상 대비부터 폼 레이블과 ARIA 속성까지 6개 WCAG 위반을 하나씩 직접 고쳐 100점으로 만든 실측 로그와, 자동 감사 도구가 놓친 키보드 내비게이션 함정까지 단계별로 정리했다.