aria-live 상태 메시지, 스크린 리더는 어떻게 읽을까 — WCAG 4.1.3
쇼핑몰에서 “장바구니에 담기"를 누르면 화면 오른쪽 위 배지의 숫자가 3에서 4로 바뀝니다. 눈으로 보는 사람에게는 그걸로 충분한 피드백이죠. 그런데 화면을 읽어주는 소프트웨어인 스크린 리더로 웹을 쓰는 사람에게는요? 페이지 어딘가의 숫자가 조용히 바뀐 것만으로는 아무것도 전달되지 않습니다. 담겼는지, 몇 개인지, 실패했는지 알 길이 없어요. ...
스크린리더 스크린리더 RSS 피드 구독
aria-live가 안 읽힐 때 — ARIA 라이브 리전 제대로 쓰기
“저장되었습니다"라는 초록색 토스트가 화면 오른쪽 아래에 뜹니다. 2초 뒤 사라지고요. 마우스를 쓰는 사람에게는 완결된 피드백입니다. ...
접근성 지원 세트 — WCAG 3가 한국에 남긴 빈칸
웹 접근성 검사 도구를 돌리다 보면 결과 화면 어딘가에 이런 문구가 붙어 있는 걸 본 적이 있을 겁니다. “이 결과는 특정 브라우저·스크린 리더 조합에서 확인됐습니다.” 접근성 평가는 늘 어떤 환경을 기준으로 삼을지에서 출발합니다. 그런데 그 “기준 환경"이 정확히 뭔지, 표준 문서가 명확히 정의한 적은 사실 많지 않았습니다. ...
5월, 모두의 안부 — 다온카드 이야기
5월은 유독 기념일이 많은 달입니다. 어린이날(5일), 어버이날(8일), 스승의날(15일), 부부의날(21일)… 가정의달이라는 이름이 괜히 붙은 게 아니에요. 이 시기가 되면 꽃집 앞에 카네이션이 쌓이고, 카카오톡엔 정성껏 만든 카드가 돌아다닙니다. 손 글씨 대신 디지털 카드를 보내는 일이 이제는 아주 자연스럽죠. ...
ARIA 실전 가이드: 접근 가능한 웹 인터페이스 구현하기
ARIA를 배운 개발자들이 자주 하는 실수가 있습니다. ARIA의 개념은 이해했지만, 실제 프로젝트에서 어떻게 적용할지, 언제 써야 하는지 확실하지 않은 거죠. ARIA 실전 가이드 - 코드 에디터 화면에 ARIA 속성이 강조된 메인 비주얼 커버 이미지(예시): ARIA 속성 적용 흐름을 상징하는 비주얼 · 제작: Nanobanana AI “ARIA는 마지막 수단이다"라는 말이 있습니다. 먼저 시맨틱 HTML을 사용하고, HTML의 기본 기능으로 부족할 때만 ARIA를 더하는 거예요. 이 가이드는 이 원칙을 바탕으로 실제 프로젝트에서 ARIA를 효과적으로 활용하는 방법을 다룹니다. ...
코드 블록 접근성 개선: 스크린 리더 사용자가 선택하는 라인 넘버
들어가며 최근 Hugo에 PaperMod 테마를 이용해서 블로그를 만들고 운영을 시작했습니다. 다른 사람이 만든 것을 그대로 사용하는건 빠르게 운영할 수 있다는 장점이 있지만, 모든 부분이 나에게 맞는 건 아니였습니다. 수많은 곳을 내 입맛과 취향에 맞춰서 수정하다가 보니 코드 블록에 문제가 좀 있더군요. ...