접근성·포용성
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
웹 콘텐츠 접근성 지침 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.