#777과 #767: 대비율 반올림이 결과를 바꾸는 순간
표시되는 색상 대비율의 반올림 표기로 인해 WCAG 2.2 AA 기준 미달 요소가 통과로 오판정되는 경계값 계산 원리와 재검사 절차를 설명합니다.
ARTICLES
웹 접근성 실전 아티클
도구 결과를 실제 수정과 재검사로 연결할 수 있도록 문제 상황, 판단 기준, 흔한 실수와 공식 근거를 한 편씩 정리합니다.
처음 방문했다면 색상·터치 대상·HTML 구조·폼·키보드 순서로 읽어 보세요. 각 아티클은 연결된 도구와 가이드에서 같은 질문을 다시 확인할 수 있도록 구성했습니다.
추천 읽기 순서
카테고리별 아티클
24px 버튼은 충분할까? 클릭 영역과 아이콘 크기 구분하기
WCAG 2.2 성공 기준 2.5.8(Target Size Minimum)과 WCAG 2.1 2.5.5(Target Size)의 차이, 시각적 아이콘 크기와 실제 클릭 영역(Hit Area) 확장 구현법을 분석합니다.
H1 하나면 충분할까? 제목 구조를 DOM으로 점검하는 방법
DOM Accessibility Tree 상의 H1~H6 헤딩 계층구조 스키핑 문제와 시각적 스타일(CSS font-size)과 의미적 제목 레벨의 불일치 대처법을 분석합니다.
placeholder와 aria-label을 사용해도 레이블 문제가 남는 이유
HTML Accessible Name Computation 알고리즘 우선순위와 placeholder 비표시 한계, 명시적 <label for> 결합의 중요성을 다룹니다.
키보드 초점이 보이지 않는 UI를 재현하고 수정한 과정
WCAG 2.2 성공 기준 2.4.11(Focus Not Obscured) 규정과 position: sticky 상단 네비게이션에 의한 초점 가림 현상 해결법을 다룹니다.
‘더보기’ 링크의 목적은 언제 충분하고 언제 모호한가
WCAG 2.2 성공 기준 2.4.4(Link Purpose in Context) 규칙과 단독 '더보기' 링크의 맥락 파악 및 aria-label 보완 기법을 분석합니다.
아이콘 버튼의 accessible name을 점검하는 실제 순서
텍스트 없는 SVG 아이콘 버튼의 Accessible Name 계산 방식, aria-hidden='true' 및 aria-label 적용 가이드를 다룹니다.
대비를 통과해도 실제 UI가 읽히지 않는 경우
동적 가상 클래스(:hover, :focus, :active, :disabled) 상태별 명암비 검사와 인터랙티브 배경 변화 시 발생 문제와 대처법을 다룹니다.
작은 터치 대상과 인접 버튼 간격을 함께 검사하는 법
WCAG 2.2 성공 기준 2.5.8(Target Size Minimum)의 Spacing Exception(간격 예외) 원리와 24px 오프셋 계산법을 다룹니다.
자동 접근성 검사 결과를 사람이 다시 확인해야 하는 이유
자동 DOM/AST 스캔 분석 도구의 한계(기계적 구문 검사 한계)와 실제 스크린리더 수동 검토 및 맥락적 판단 필요성의 경계를 설명합니다.
tabindex 양수 지정이 초점 순서를 파괴하는 원리와 복구 순서
tabindex="1" 이상의 양수 지정이 DOM 트리 기반의 자연스러운 초점 흐름을 왜곡하는 원리와, tabindex="0" 및 DOM 구조 재배치로 키보드 접근성을 복구하는 실무 절차를 설명합니다.
SPA 페이지 전환 시 침묵 현상을 방지하는 초점 제어와 aria-live 설계
Next.js 및 React 기반 SPA 환경에서 페이지 전환 시 스크린리더가 렌더링 변경을 인지하지 못하는 원인과, document.title 갱신, h1 초점 이동, aria-live 상태 알림 구현 기법을 다룹니다.
모달 팝업에서 초점이 유출되는 이유: aria-modal="true"와 포커스 트랩(Focus Trap) 구현 기법
사용자가 설정 열기 버튼으로 모달을 연 뒤 Tab 키 입력 시 배경 검색 링크로 초점이 이탈하고, 닫힌 뒤 초점 복원 및 스크롤 잠금이 누락되는 재현 가능한 실패 시나리오를 바탕으로 6단계 순환 제어 코드로 해결합니다.
폼 유효성 검사 오류 메시지를 스크린리더가 읽지 못하는 이유: aria-invalid와 aria-describedby 동적 연결 기법
WCAG 2.2 성공 기준 3.3.1(Error Identification)과 3.3.2(Labels or Instructions)에 따라, 폼 전송 시 입력 오류가 발생할 때 시각적 빨간 텍스트만 표시하는 문제를 해결하고 aria-invalid="true" 및 aria-describedby 동적 ID 매핑으로 오류 메시지를 보조공학기기에 올바르게 전달하는 실무 패턴을 다룹니다.
아코디언 UI에서 aria-expanded가 작동하지 않는 이유: 토글 버튼 상태 동기화와 키보드 접근성 설계
WCAG 2.2 성공 기준 4.1.2(Name, Role, Value)와 1.3.1(Info and Relationships)에 따라, 아코디언 및 접힘/펼침 UI 구현 시 div 클릭 오용을 시정하고 aria-expanded 및 aria-controls 동적 속성으로 접힘 상태를 보조공학기기에 표준에 맞게 노출하는 실무 기법을 분석합니다.
aria-hidden="true" 안에 초점 요소를 방치할 때 생기는 스크린리더 침묵과 inert 해결책
모달이나 숨김 메뉴 컨테이너에 aria-hidden='true'를 지정했을 때 내부 링크·버튼의 초점을 비활성화하지 않아 발생하는 보조공학 침묵 오류의 원인과 최신 HTML inert 속성을 활용한 해결 절차를 다룹니다.