#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 속성을 활용한 해결 절차를 다룹니다.
다크 모드 지원 시 놓치기 쉬운 비텍스트 UI 색상 대비(WCAG 1.4.11)와 가독성 설계
다크 테마 전환 시 텍스트 명암비는 통과하지만 폼 테두리, 아이콘, 탭 경계선의 3:1 비텍스트 대비율이 붕괴하는 원인과 CSS 변수 토큰 기반의 해결책을 설명합니다.
자동 롤링 캐러셀 배너에서 일시정지 버튼이 반드시 필요한 이유: WCAG 2.2.2 일시정지·정지·숨김
3초마다 자동으로 돌아가는 캐러셀 슬라이더 배너가 인지 장애인과 저시력자에게 미치는 시각적 장벽과 WCAG 2.2.2 정지 컨트롤의 표준 구현법을 다룹니다.
인라인 SVG 그래픽과 아이콘의 접근성: role="img", <title>, <desc>의 올바른 활용법
웹페이지에 삽입되는 벡터 그래픽 SVG가 단순 장식인지 정보 전달용인지 구분하고 스크린리더에 명확한 의미를 전달하는 접근성 표준을 정리합니다.
커스텀 드롭다운 셀렉트 박스의 키보드 인터랙션: WAI-ARIA Listbox 패턴 완벽 가이드
디자인 커스터마이징을 위해 div 태그로 구현한 커스텀 셀렉트 박스가 키보드 사용자와 스크린리더에 치명적인 벽이 되는 이유와 WAI-ARIA Combobox 표준 구현법을 분석합니다.
쇼핑몰 결제 폼에서 필수 입력값(aria-required)과 실시간 유효성 검증의 올바른 조화
시각적 빨간 별표(*) 표시만으로 필수 항목을 전달할 때 생기는 스크린리더 누락과 aria-required 및 비간섭적 유효성 피드백 설계법을 다룹니다.
최신 HTML inert 속성을 활용한 배경 비활성화와 모달 포커스 트랩의 완전한 종결
모달 팝업 오픈 시 뒷배경 DOM을 단 한 줄로 완벽히 격리하는 HTML5 inert 속성의 작동 원리와 접근성 트리 반영 메커니즘을 상세히 분석합니다.
복잡한 데이터 테이블에서 헤더와 데이터 셀을 연결하는 법: scope, id, headers 속성
통계 및 금융 데이터 테이블을 스크린리더가 낭독할 때 행·열 머리글 맥락이 끊기는 원인과 scope 및 id-headers 정밀 매핑 표준을 분석합니다.
모바일 뷰포트에서 터치 타깃 44px 확보와 200% 텍스트 리플로우 대응 가이드
모바일 웹에서 user-scalable=no로 확대를 차단하는 불법적 관행과 200% 확대 시 가로 스크롤을 방지하는 WCAG 1.4.10 리플로우 설계법을 설명합니다.
display: none vs visibility: hidden vs .sr-only: 보조공학 숨김 처리 3대 기법 비교
화면과 스크린리더 양쪽의 노출 여부에 따라 완벽히 분기되는 3대 CSS 숨김 테크닉의 원리와 접근성 트리 반영 메커니즘을 상세히 분석합니다.
웹 비디오·오디오 접근성의 세 기둥: 자막(Captions), 음성해설(Audio Description), 원고(Transcript)
청각 및 시각 장애인이 웹 멀티미디어 콘텐츠를 온전히 소비할 수 있도록 돕는 동기화 자막과 대본 원고의 제작 표준과 WebVTT 실무 구현법을 설명합니다.
본문 바로가기(Skip Navigation) 링크가 반드시 필요한 이유와 CSS 노출 설계법
키보드 및 스크린리더 사용자가 매 페이지마다 수십 개의 상단 헤더 메뉴를 건너뛰고 본문으로 직행할 수 있도록 돕는 스킵 내비게이션 구현법을 설명합니다.
적록 색약 및 전색맹 사용자를 위한 비색상 단서(아이콘, 밑줄, 패턴) 설계 표준
오직 색상만으로 성공·오류·경고 상태를 전달할 때 생기는 정보 단절과 WCAG 1.4.1 색상 외 시각적 단서 제공 가이드를 다룹니다.
복잡한 웹사이트의 계층 구조를 드러내는 브레드크럼(Breadcrumbs) 내비게이션 접근성
홈 > 대분류 > 중분류 형태의 위치 경로를 스크린리더가 명확히 낭독할 수 있도록 돕는 nav, ol, aria-current='page' 마크업 표준을 정리합니다.
스위치 토글 버튼의 role="switch"와 aria-checked 상태 동기화 표준
다크모드 On/Off, 알림 수신 동의 등 모던 웹에서 자주 쓰이는 스위치 UI를 체크박스와 명확히 구분하고 접근성을 확보하는 마크업을 다룹니다.
동적 알림(Toast, Snackbar)에서 aria-live polite와 assertive의 올바른 선택 기준
화면 새로고침 없이 비동기 메시지를 스크린리더에 전달할 때 사용자의 음성 흐름을 끊지 않는 polite와 긴급 알림 assertive의 차이를 분석합니다.
브라우저 기본 포커스 링을 해치지 않고 세련된 :focus-visible 링 디자인하기
디자이너들이 outline: none으로 포커스 링을 지우는 비극을 막고, 키보드 탐색 시에만 스마트하게 나타나는 최신 :focus-visible 스타일링을 정리합니다.
WAI-ARIA 탭(Tabs) 컴포넌트의 tablist, tab, tabpanel과 방향키 내비게이션
웹 탭 인터페이스를 제작할 때 Tab 키가 아닌 좌우 방향키로 탭을 전환해야 하는 이유와 WAI-ARIA APG Tabs 패턴 완벽 구현법을 다룹니다.
수십 페이지의 게시판 페이지네이션(Pagination)에서 현재 페이지 안내와 접근성 링크
게시판 하단의 1, 2, 3... 페이지 이동 번호 링크에 nav, aria-label, aria-current='page'를 적용하여 스크린리더 혼선을 방지하는 표준을 분석합니다.
웹 오디오·팟캐스트 플레이어의 키보드 조작성과 텍스트 전사(Transcript) 제공 가이드
음성 스트리밍 및 팟캐스트 콘텐츠를 시각·청각 장애인이 차별 없이 청취할 수 있도록 돕는 HTML5 audio 키보드 컨트롤과 텍스트 대본 표준을 설명합니다.
React 환경에서 접근 가능한 모달 대화상자(Modal Dialog) 구현의 5대 필수 패턴
React 19 및 Next.js에서 모달 팝업 구현 시 포커스 가둠, Esc 키 닫기, 스크롤 잠금, aria-modal='true' 동기화 기법을 완벽히 정리합니다.