모달 접근성 제대로 만들기: dialog showModal부터 포커스 트랩까지
모달을 만들었습니다. Tab을 눌렀더니 배경 버튼들이 포커스됩니다. ESC를 눌러도 안 닫힙니다. 스크린 리더는 "대화 상자"라는 안내도 없이 내용을 쭉 읽어 버리고요. 닫기 버튼을 눌렀더니 포커스가 어딘가로 사라졌습니다. ...
프론트엔드 × 접근성 프론트엔드 × 접근성 RSS 피드 구독
폼 실시간 검증 제대로 하기: 타이밍부터 aria-invalid까지
회원가입 폼을 만들고 있었습니다. 이메일 입력창에 포커스를 주자마자 "이메일 형식이 올바르지 않습니다"라는 에러가 떴어요. 아직 아무것도 입력하지 않았는데요. ...
SPA에서 포커스 관리 제대로 하기: 라우팅 후 스크린 리더가 혼란에 빠지지 않도록
React로 만든 SPA를 잘 써오고 있었는데, 어느 날 접근성 검사를 했더니 이런 피드백이 왔습니다. "페이지가 이동했는데 스크린 리더가 아무 말도 안 해요." ...
색은 맞는데 대비는 틀렸다: CSS opacity가 파놓은 접근성 함정
CSS에는 분명 진한 회색을 적었습니다. color: #595959. 흰 배경에서 이 색의 대비는 6.4:1이니까, 접근성 기준인 4.5:1을 넉넉히 넘깁니다. 통과예요. 그런데 접근성 검사기를 돌렸더니 빨간 줄이 떴습니다. ...
고대비 모드 제대로 지원하기: forced-colors와 시스템 색
화면의 색을 최대 대비로 바꿔 쓰는 사람들이 있습니다. 검은 배경에 노란 글씨, 파란 배경에 흰 글씨처럼요. 저시력 사용자에게는 이게 글자를 읽을 수 있느냐 없느냐의 문제고, 편두통이나 빛 과민이 있는 사람은 반대로 자극을 줄인 저대비 팔레트를 쓰기도 합니다. 공통점은 하나예요 — 색을 사용자가 직접 정한다는 것. 그리고 그 순간, 우리가 CSS에 적어둔 색은 상당수 무시됩니다. ...
다크모드 제대로 구현하기: CSS 변수 설계부터 색 대비 검증까지
다크모드를 켰더니 눈이 더 피로했습니다. 배경은 검은색인데 텍스트가 진한 회색이라 대비가 너무 낮았고, 링크는 기본 파란색(#0000ff) 그대로라 눈이 아팠어요. 이미지는 어두운 화면에서 홀로 눈부시게 빛났습니다. 버튼 하나는 배경과 같은 색이라 아예 보이지도 않았어요. ...