기술노트

SPA 라우팅의 뚝뚝 끊기는 화면 전환을 브라우저가 스냅샷으로 부드럽게 이어주는 View Transitions API. 원리, 크로스 도큐먼트 전환, 공유 요소 애니메이션, 프레임워크 통합, 접근성까지 코드로 정리했다.

order로 화면 배치를 바꿨더니 키보드 탭 순서가 엉켰다면 reading-flow·reading-order가 답입니다. tabindex 지옥 없이 시각 순서와 포커스 순서를 맞추는 CSS 접근성 기법을 예제로 설명합니다.

버튼에 command·commandfor 속성만 붙이면 자바스크립트 코드 없이 팝오버와 다이얼로그를 여닫습니다. 내장 명령과 커스텀 명령, 접근성 이점, 지원 현황과 폴백 처리까지 동작하는 예제로 차근차근 살펴봅니다.

inert 속성으로 화면 밖 UI의 키보드 포커스와 스크린리더 접근을 표준 방식 한 줄로 차단하는 법. aria-hidden·display:none과의 결정적 차이, 드로어와 커스텀 모달 배경에서의 실전 활용을 정리했다.

HTML dialog 요소와 showModal() 하나로 포커스 가둠·배경 비활성화·ESC 닫기·접근성 역할까지 공짜로 얻는 법. 백드롭 클릭으로 닫기, 닫힘 애니메이션 등 놓치기 쉬운 디테일까지 예제로 다뤘다.

Radix UI의 헤드리스 컴포넌트를 Tailwind CSS와 함께 커스터마이징하여 접근성을 유지하면서 독자적인 디자인을 구현합니다.

axe-core와 Lighthouse를 활용한 웹 접근성 자동 테스트 환경을 구축하고, CI/CD에 통합하여 지속적인 접근성 품질을 보장합니다.

Headless UI 패턴으로 컴포넌트의 동작 로직과 시각적 표현을 분리하여, 재사용성과 접근성을 동시에 확보하는 컴포넌트 설계 방법을 소개합니다.

웹 접근성 A11Y 실전 가이드 — ARIA·시맨틱 HTML·키보드 네비게이션 — 실무에서 바로 적용할 수 있는 가이드입니다.

웹 접근성 A11Y 실전 — ARIA와 시맨틱 HTML — 실무에서 바로 적용할 수 있는 가이드입니다.