디자인 아틀라스◉접근성
포커스 링, 스킵 링크, 라이브 리전, 모션 줄이기 — 모두가 쓸 수 있게 만드는 용어. — 20개 항목
포커스 링Focus Ring
키보드로 포커스를 옮길 때 지금 어디 있는지 보여주는 테두리. outline: none으로 지우면 키보드 사용자가 위치를 잃습니다.
스킵 링크Skip Link
본문 앞에 숨어 있다가 포커스를 받으면 나타나는 링크. 키보드 사용자가 반복되는 내비게이션을 건너뛰고 본문으로 바로 갈 수 있게 합니다.
아리아 라이브 리전ARIA Live Region
화면이 스스로 바뀌었을 때(장바구니 개수, 저장 완료 등) 스크린 리더가 그 변화를 알아서 읽어주게 만드는 속성.
스크린 리더Screen Reader
화면을 보지 않고 음성으로 웹을 탐색하는 보조 기술. 접근성 트리를 DOM 순서대로 훑으며 요소의 역할과 이름을 읽어줍니다.
대체 텍스트Alt Text
이미지 대신 스크린 리더가 읽어줄 텍스트. 의미 있는 이미지엔 설명을, 장식용 이미지엔 빈 alt를 줍니다.
모션 줄이기Reduced Motion
전정 장애가 있는 사용자를 위해 OS 설정이 동작 줄임일 때 애니메이션을 억제하는 CSS 미디어 쿼리.
포커스 트랩Focus Trap
모달이 열려 있는 동안 Tab이 모달 안의 요소끼리만 순환하게 가두는 기법. 뒤 배경으로 포커스가 새어나가지 않게 합니다.
키보드 내비게이션Keyboard Navigation
마우스 없이 Tab·화살표·Enter·Space만으로 모든 기능에 닿을 수 있어야 한다는 원칙.
접근 가능한 이름Accessible Name
스크린 리더가 어떤 요소를 가리켜 실제로 읽어주는 이름. 아이콘만 있는 버튼은 라벨이 없으면 이름이 빈 문자열이 됩니다.
색만으로 전달하지 않기Color Alone
빨강·초록만으로 상태를 구분하면 색맹 사용자는 구별할 수 없습니다. 아이콘·모양·텍스트를 함께 씁니다.
명암 선호Prefers Contrast
OS의 대비 높이기 설정을 감지해 테두리·텍스트 대비를 자동으로 끌어올리는 CSS 미디어 쿼리.
텍스트 확대·리플로우Text Resize & Reflow
브라우저 확대를 200%까지 키워도 텍스트가 잘리거나 가로 스크롤이 생기지 않고 한 열로 재배치되어야 한다는 원칙.
자막Captions
영상의 대사뿐 아니라 화자 구분, 음향 효과까지 텍스트로 전달하는 자막. 청각 장애 사용자와 무음 시청자 모두에게 필요합니다.
타깃 크기Target Size
WCAG 2.2가 요구하는 클릭·탭 가능 영역의 최소 크기(24×24 CSS px)와 예외 조건.
로빙 탭인덱스Roving Tabindex
툴바나 리스트처럼 여러 항목이 모인 위젯에서, Tab은 위젯 전체를 한 번만 들르고 화살표 키가 그 안의 이동을 맡게 하는 패턴.
시각적으로 숨기기Visually Hidden
화면에는 안 보이지만 스크린 리더에는 그대로 읽히도록 요소를 숨기는 CSS 기법. display:none과는 전혀 다릅니다.
랜드마크Landmarks
header·nav·main·aside·footer 같은 시맨틱 태그로 페이지를 구역화해, 스크린 리더 사용자가 영역 단위로 건너뛸 수 있게 하는 것.
오류 식별Error Identification
폼 검증 오류가 났을 때 어떤 필드가 왜 틀렸는지 텍스트로, 그리고 프로그래밍적으로 명확히 알려주는 것.
강제 색상 모드Forced Colors
Windows 고대비 모드처럼 OS가 시스템 팔레트를 강제로 씌울 때, 배경 이미지·커스텀 색이 사라질 수 있다는 것을 대비하는 CSS 기능.
난독증 친화 타이포그래피Dyslexia-Friendly Typography
난독증이 있는 독자가 줄을 안 놓치고 읽을 수 있도록 자간·행간·측정폭을 넉넉히 잡고 왼쪽 정렬을 쓰는 타이포그래피 관행.