https://www.codeslog.com/series/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C--%EC%A0%91%EA%B7%BC%EC%84%B1/ Recent content in 프론트엔드 × 접근성 on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.168.0 ko Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/posts/modal-dialog-implementation/ Sat, 24 Oct 2026 02:02:00 +0900 https://www.codeslog.com/posts/modal-dialog-implementation/ 모달 접근성을 dialog의 showModal()과 div 직접 구현으로 비교합니다. inert로 배경 막기, 포커스 트랩, ESC 닫기, 스크롤 막기, 포커스 복원 코드와 dialog에서 Tab이 주소창으로 나가는 이유까지 크롬 실측으로 정리했어요. https://www.codeslog.com/posts/form-ux-validation/ Tue, 15 Sep 2026 11:31:00 +0900 https://www.codeslog.com/posts/form-ux-validation/ 포커스만 줘도 에러부터 띄우는 폼, 다 입력해야 알려주는 폼 — 검증 타이밍이 전부입니다. blur 이후 검증, aria-describedby·aria-invalid 연결, role=alert와 aria-live 구분을 실전 코드로 정리합니다. https://www.codeslog.com/posts/spa-focus-management/ Tue, 15 Sep 2026 11:26:00 +0900 https://www.codeslog.com/posts/spa-focus-management/ SPA에서 라우트가 바뀌어도 스크린 리더가 조용한 이유와, 라우팅 후 포커스 관리를 제대로 하는 법을 React·Next.js 예제로 설명합니다. tabIndex -1 포커스 이동, aria-live 알림, 포커스 복원 패턴까지 다룹니다. https://www.codeslog.com/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/posts/opacity-contrast-trap/ CSS에 진한 회색을 넣었는데 접근성 검사기는 대비 미달이라고 합니다. 범인은 opacity예요. opacity가 글자색을 배경과 섞어 대비를 깎는 원리와, 실제 블로그에서 겪은 사례·계산·해결법을 초보 눈높이로 정리합니다. https://www.codeslog.com/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/posts/high-contrast-mode/ 다크모드는 내가 색을 고르는 일이지만, 고대비 모드는 OS가 강제하는 색에 응답하는 일입니다. forced-colors 미디어 쿼리와 시스템 색 키워드, prefers-contrast로 저시력 사용자까지 지원하는 법을 실전 코드로 정리합니다. https://www.codeslog.com/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/posts/dark-mode-implementation/ 다크모드를 색 반전으로 구현하면 오히려 읽기 어려워집니다. CSS 변수로 다크모드 전용 디자인 토큰을 설계하고, prefers-color-scheme과 JS 토글, 색 대비 검증, FOUC 방지까지 실전 코드로 다룹니다.