스크린리더 on Codeslog https://www.codeslog.com/tags/%EC%8A%A4%ED%81%AC%EB%A6%B0%EB%A6%AC%EB%8D%94/ Recent content in 스크린리더 on Codeslog 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 01:20:00 +0900 SPA에서 포커스 관리 제대로 하기: 라우팅 후 스크린 리더가 혼란에 빠지지 않도록 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 알림, 포커스 복원 패턴까지 다룹니다. aria-live 상태 메시지, 스크린 리더는 어떻게 읽을까 (WCAG 4.1.3) https://www.codeslog.com/posts/aria-live-status-messages/ Wed, 02 Sep 2026 01:24:30 +0900 https://www.codeslog.com/posts/aria-live-status-messages/ WCAG 4.1.3 상태 메시지를 aria-live로 구현할 때 polite와 assertive는 뭐가 다른지, 장바구니 개수가 연달아 바뀌면 스크린 리더가 어떻게 읽는지 데모로 확인합니다. 디바운스 타이머, 아이콘·소리 상태, 상태 메시지가 아닌 변화까지. aria-live가 안 읽힐 때 — ARIA 라이브 리전 제대로 쓰기 https://www.codeslog.com/posts/aria-live-regions/ Wed, 02 Sep 2026 01:14:30 +0900 https://www.codeslog.com/posts/aria-live-regions/ aria-live를 분명히 달았는데 스크린 리더가 침묵합니다. 빈 컨테이너가 DOM에 먼저 있어야 하는 이유부터 스크린 리더별로 갈리는 동작, 알림 대신 포커스를 옮겨야 하는 경계까지, 라이브 리전이 안 읽히는 원인을 하나씩 짚습니다. 접근성 지원 세트 — WCAG 3가 한국에 남긴 빈칸 https://www.codeslog.com/posts/wcag-3-accessibility-support-sets/ Wed, 19 Aug 2026 18:20:00 +0900 https://www.codeslog.com/posts/wcag-3-accessibility-support-sets/ WCAG 3(3.0) 2026년 3월 초안이 정식 조항(§3.2.2)으로 구조화한 접근성 지원 세트를 해설합니다. 기본 세트가 영어 콘텐츠 기준이라는 점과 지역 규제기관이 대안을 정의할 수 있다는 조항이 센스리더 등 한국 접근성 환경에 남기는 빈칸을 짚어봅니다. 5월, 모두의 안부 — 다온카드 이야기 https://www.codeslog.com/posts/daoncard-a11y-card-family-month/ Fri, 08 May 2026 23:25:57 +0900 https://www.codeslog.com/posts/daoncard-a11y-card-family-month/ 가정의달 5월, 디지털 카드조차 보내기 어려운 시각장애인·고령자 이야기와 함께 직접 만든 무료 카드 서비스 다온카드(daoncard.com)를 소개합니다. 키보드 전체 조작, 실시간 색상 대비 검사 등 WCAG 2.2 AA 구현 내용을 담았습니다. ARIA 실전 가이드: 접근 가능한 웹 인터페이스 구현하기 https://www.codeslog.com/posts/aria-practical-guide/ Thu, 22 Jan 2026 02:00:00 +0900 https://www.codeslog.com/posts/aria-practical-guide/ ARIA를 실제 프로젝트에 적용하는 실전 가이드입니다. 언제 ARIA를 쓰고 언제 쓰지 말아야 하는지부터, aria-live 라이브 리전, 탭·아코디언·드롭다운 커스텀 위젯, 모달 다이얼로그 패턴까지 코드로 정리했습니다. 코드 블록 접근성 개선: 스크린 리더 사용자가 선택하는 라인 넘버 https://www.codeslog.com/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/posts/code-block-accessibility-improvement/ Hugo PaperMod 블로그의 코드 블록을 개선한 기록입니다. 라인 넘버를 table 태그 대신 CSS Counter로 다시 구현해, 스크린 리더 사용자가 불필요한 표 정보 없이 코드를 읽을 수 있도록 더 시맨틱하고 접근성 높게 바꾼 과정을 정리합니다.