데모 코드 목록

같은 결과를 Native CSS·IntersectionObserver·rAF 세 가지로 구현해 비교합니다 — 접근성 변형 포함

API 성공/실패 조합에 따른 두 메서드의 동작 차이를 확인합니다

가려지는 포커스·드래그 대안·타겟 크기·재입력 — 위반과 개선을 나란히 두고 Tab 키로 비교해보세요

popover·앵커 포지셔닝·dialog·뷰 트랜지션 — 지원표가 초록불이어도 접근성은 다른 문제라는 걸 Tab 키로 확인하세요

접근성 없는 폼과 접근성 있는 폼을 나란히 비교합니다 — Tab 키와 스크린 리더로 차이를 직접 체험하세요

div 오버레이 모달과 <dialog> 모달을 나란히 두고 Tab이 배경으로 새는지, ESC가 먹는지, 닫은 뒤 포커스가 어디로 돌아오는지 포커스 추적기로 확인합니다

포커스만 줘도 오류를 띄우는 폼과 blur 이후에 검증하는 폼에 같은 값을 넣어보고, aria-invalid·aria-describedby·aria-live가 어떻게 붙는지 스크린 리더 로그로 봅니다

라우팅 뒤 포커스를 그대로 두는 경우와 h1으로 옮기는 경우를 토글하며, 다음 Tab이 어디로 가는지와 라이브 리전이 무엇을 읽는지 확인합니다

:playing·:paused 등 미디어 의사 클래스 7종을 지금 쓰는 브라우저가 파싱하는지 CSS.supports와 matches로 즉시 판정합니다

WebKit 블로그의 재현 코드를 돌려 수정 전 Safari의 초기화 전 접근 오류를 확인하고, 뒤에 선언된 모듈까지 앞 TLA를 기다리는 직렬화를 performance.mark로 잽니다

장바구니 개수가 연달아 바뀔 때 polite·assertive·디바운스가 어떻게 다르게 읽히는지 가상 스크린 리더로 비교합니다