스크린리더 스크린리더 RSS 피드 구독

React로 만든 SPA를 잘 써오고 있었는데, 어느 날 접근성 검사를 했더니 이런 피드백이 왔습니다. "페이지가 이동했는데 스크린 리더가 아무 말도 안 해요." ...

WCAG 4.1.3 상태 메시지를 aria-live로 구현할 때 polite와 assertive는 뭐가 다른지, 장바구니 개수가 연달아 바뀌면 스크린 리더가 어떻게 읽는지 데모로 확인합니다. 디바운스 타이머, 아이콘·소리 상태, 상태 메시지가 아닌 변화까지.

"저장되었습니다"라는 초록색 토스트가 화면 오른쪽 아래에 뜹니다. 2초 뒤 사라지고요. 마우스를 쓰는 사람에게는 완결된 피드백입니다. 그런데 화면을 보지 않는 사람에게는요? 그 토스트는 일어나지 않은 일입니다. 저장이 됐는지 안 됐는지 알 방법이 없어요. ...

웹 접근성 검사 도구를 돌리다 보면 결과 화면 어딘가에 이런 문구가 붙어 있는 걸 본 적이 있을 겁니다. "이 결과는 특정 브라우저·스크린 리더 조합에서 확인됐습니다." 접근성 평가는 늘 어떤 환경을 기준으로 삼을지에서 출발합니다. 그런데 그 "기준 환경"이 정확히 뭔지, 표준 문서가 명확히 정의한 적은 사실 많지 않았습니다. ...

5월은 유독 기념일이 많은 달입니다. 어린이날(5일), 어버이날(8일), 스승의날(15일), 부부의날(21일)… 가정의달이라는 이름이 괜히 붙은 게 아니에요. 이 시기가 되면 꽃집 앞에 카네이션이 쌓이고, 카카오톡엔 정성껏 만든 카드가 돌아다닙니다. 손 글씨 대신 디지털 카드를 보내는 일이 이제는 아주 자연스럽죠. ...

ARIA를 배운 개발자들이 자주 하는 실수가 있습니다. ARIA의 개념은 이해했지만, 실제 프로젝트에서 어떻게 적용할지, 언제 써야 하는지 확실하지 않은 거죠. ARIA 실전 가이드 - 코드 에디터 화면에 ARIA 속성이 강조된 메인 비주얼 커버 이미지(예시): ARIA 속성 적용 흐름을 상징하는 비주얼 · 제작: Nanobanana AI "ARIA는 마지막 수단이다"라는 말이 있습니다. 먼저 시맨틱 HTML을 사용하고, HTML의 기본 기능으로 부족할 때만 ARIA를 더하는 거예요. 이 가이드는 이 원칙을 바탕으로 실제 프로젝트에서 ARIA를 효과적으로 활용하는 방법을 다룹니다. ...

들어가며 최근 Hugo에 PaperMod 테마를 이용해서 블로그를 만들고 운영을 시작했습니다. 다른 사람이 만든 것을 그대로 사용하는건 빠르게 운영할 수 있다는 장점이 있지만, 모든 부분이 나에게 맞는 건 아니였습니다. 수많은 곳을 내 입맛과 취향에 맞춰서 수정하다가 보니 코드 블록에 문제가 좀 있더군요. ...