Design Atlas◉Accessibility
Focus rings, skip links, live regions, reduced motion — the vocabulary of building for everyone. — 20 entries
Focus Ring포커스 링
The outline that shows where keyboard focus currently is. Removing it with outline: none strands keyboard users.
Skip Link스킵 링크
A link hidden before the page content that appears on focus, letting keyboard users skip repeated navigation and jump straight to the content.
ARIA Live Region아리아 라이브 리전
An attribute that makes a screen reader automatically announce content that changes on its own — a cart count, a save confirmation.
Screen Reader스크린 리더
Assistive technology that navigates the web by voice — it walks the accessibility tree in DOM order, announcing each element's role and name.
Alt Text대체 텍스트
The text a screen reader announces in place of an image. Meaningful images need a real description; decorative ones need an empty alt.
Reduced Motion모션 줄이기
A CSS media query that suppresses animation when the OS is set to reduce motion, for users with vestibular disorders.
Focus Trap포커스 트랩
The technique that confines Tab cycling to a modal's own focusable elements while it's open, so focus never leaks to the page behind it.
Keyboard Navigation키보드 내비게이션
The principle that every function must be reachable using only Tab, arrow keys, Enter, and Space — no mouse required.
Accessible Name접근 가능한 이름
The name a screen reader actually announces for an element. An icon-only button with no label computes to an empty accessible name.
Color Alone색만으로 전달하지 않기
Marking status with red/green alone leaves colorblind users unable to tell them apart. Pair color with an icon, shape, or text.
Prefers Contrast명암 선호
A CSS media query that detects the OS's 'increase contrast' setting and boosts border and text contrast automatically.
Text Resize & Reflow텍스트 확대·리플로우
The principle that zooming a browser to 200% must not clip text or force horizontal scrolling — content should reflow into a single column.
Captions자막
Text that conveys not just dialogue but speaker identity and sound effects from a video — needed by deaf/hard-of-hearing users and silent-mode viewers alike.
Target Size타깃 크기
WCAG 2.2's minimum size for a clickable or tappable area — 24×24 CSS pixels — and the exceptions that don't need it.
Roving Tabindex로빙 탭인덱스
The pattern where Tab visits a composite widget — a toolbar, a listbox — just once, and arrow keys handle movement inside it.
Visually Hidden시각적으로 숨기기
A CSS technique that hides an element visually while a screen reader still reads it — completely different from display: none.
Landmarks랜드마크
Marking a page into regions with semantic tags — header, nav, main, aside, footer — so a screen reader user can jump between them instead of scrolling line by line.
Error Identification오류 식별
Telling a user which field failed validation and why, both visually and programmatically — not just with a red border.
Forced Colors강제 색상 모드
The CSS feature that accounts for the OS forcing a system palette onto your page (Windows High Contrast Mode), where custom colors and background images can vanish.
Dyslexia-Friendly Typography난독증 친화 타이포그래피
Typography practices — generous letter/line spacing, a shorter measure, left alignment — that help dyslexic readers track a line without losing their place.