ATLASDESIGN REFERENCE GALLERY
ATLAS GALLERY / 2026.10

접근성·포용성

각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.

웹 콘텐츠 접근성 지침 WCAG

디지털 접근성 판단에 사용하는 국제 표준 지침.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

접근성 리치 인터넷 애플리케이션 ARIA

보조 기술에 UI 역할·상태·속성을 전달하는 명세.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

의미론적 HTML Semantic HTML

요소 역할에 맞는 HTML 태그를 사용하는 방식.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

키보드 탐색 Keyboard Navigation

마우스 없이 키보드만으로 UI를 조작하는 방식.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

포커스 순서 Focus Order

Tab 등으로 이동할 때 포커스가 진행되는 논리적 순서.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

포커스 트랩 Focus Trap

모달 등에서 키보드 초점이 지정한 영역에 머무르게 함.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

포커스 표시기 Focus Indicator

현재 키보드 조작 대상을 시각적으로 표시.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

스크린 리더 Screen Reader

화면과 UI 정보를 음성 등으로 읽어주는 보조 기술.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

명도 대비비 Contrast Ratio

전경과 배경의 명도 차이를 수치화한 값.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

색상 외 정보 제공 Color Independence

색상만이 아닌 텍스트·아이콘으로 상태를 전달하는 원칙.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

대체 텍스트 Alt Text

이미지의 기능·의미를 텍스트로 설명.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

자막 Captions

소리 정보를 문자로 제공하는 접근성 요소.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

고대비 모드 High Contrast Mode

전경·배경을 분명하게 구별하도록 구성한 표시 모드.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

본문 바로가기 링크 Skip Link

반복 내비게이션을 건너뛰어 본문으로 이동.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

터치 접근성 Touch Accessibility

접촉 대상 크기·간격·대체 동작을 고려한 설계.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

오류 예방 Error Prevention

잘못된 입력·실행을 설계 단계에서 방지하는 원칙.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

오류 식별 Error Identification

오류 항목과 원인을 사용자가 알 수 있게 표시.

접근성·포용성에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.

동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.

참고 문서

점진적 향상 Progressive Enhancement

기본 기능이 동작하는 기반 위에 지원 환경별 고급 기능을 더하는 방식.

랜딩 페이지·쇼핑몰·SaaS·콘텐츠 사이트의 정보와 행동 흐름을 설계한다.

시각적으로 유행하는 구조보다 콘텐츠 길이·접근성·검색성·사용 목적을 우선한다.

참고 문서

Accessibility & Inclusion

Open an entry for its visual reference, comparisons and source-language text.

WCAG 웹 콘텐츠 접근성 지침

International standard guidelines for assessing digital accessibility.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

ARIA 접근성 리치 인터넷 애플리케이션

A specification communicating interface roles, states, and properties to assistive technologies.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Semantic HTML 의미론적 HTML

Using HTML elements according to their intended semantic roles.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Keyboard Navigation 키보드 탐색

Operating an interface using a keyboard without requiring a mouse.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Focus Order 포커스 순서

The logical sequence in which focus moves through controls, for example with Tab.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Focus Trap 포커스 트랩

Keeping keyboard focus within a designated area, such as an open modal.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Focus Indicator 포커스 표시기

A visible indication of the current keyboard interaction target.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Screen Reader 스크린 리더

Assistive technology that presents screen and interface information through speech or other output.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Contrast Ratio 명도 대비비

A numeric measure of luminance contrast between foreground and background.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Color Independence 색상 외 정보 제공

Communicating state with text or symbols rather than relying only on color.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Alt Text 대체 텍스트

Text describing an image's function or meaning.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Captions 자막

Text conveying the audio information in media.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

High Contrast Mode 고대비 모드

A display mode designed to clearly distinguish foreground from background.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Skip Link 본문 바로가기 링크

A link that bypasses repeated navigation and moves directly to the main content.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Touch Accessibility 터치 접근성

Design accounting for touch target size, spacing, and alternative interactions.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Error Prevention 오류 예방

The principle of preventing incorrect input or actions through design.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Error Identification 오류 식별

Clearly identifying the location and cause of an error to the user.

Specifying accessibility and inclusive interaction.

Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.

Reference

Progressive Enhancement 점진적 향상

Adding advanced features for supported environments on top of a functioning baseline.

Designing information and action flows for landing pages, stores, SaaS, and content sites.

Prioritize content length, accessibility, findability, and purpose over fashionable layouts.

Reference