JavaScript 패럴랙스가 항상 조금 이상해 보이는 이유가 있습니다 — 약간 분리된 느낌, 레이어가 페이지보다 반 프레임 뒤에서 떠다니는 것 같은. 이것은 나쁜 코드가 아닙니다. 브라우저가 이미 스크롤을 그린 후에 스크롤 이벤트가 JavaScript에 도달하기 때문입니다. 브라우저는 이것을 한번 해결했습니다 — 고정 헤더를 position: sticky로 바꿀 때. Scroll-driven animations는 동일한 접근법을, 모든 스크롤 기반 효과에 한번에 적용한 것입니다.
접근성 글에서 다룬, display:none으로 감췄지만 접근성 트리에는 여전히 남아 있던 모달은 div로 처음부터 직접 만든 모달에서 비롯된 실수의 한 예였습니다. 진짜 질문은 애초에 왜 그것을 처음부터 만들어야 했는가입니다. 네이티브 <dialog>와 popover 속성이 공짜로 제공하는 것 – 톱 레이어, 포커스 트랩, light dismiss – 이 무엇인지, 그리고 이 두 메커니즘이 서로 헷갈리면 곧바로 접근성이 떨어지는 인터페이스로 이어질 만큼 다른 지점이 어디인지 살펴봅니다.
올바른 HTML은 시작점일 뿐이다. 접근성 트리가 실제로 어떻게 동작하는지, ARIA가 생각보다 훨씬 자주 오히려 해가 되는 이유는 무엇인지 살펴보고, 실제로 동작하는 아코디언과 라이브 리전, Next.js 포커스 처리를 함께 만들어본다.
