요약 설명모바일 애플리케이션 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로 모바일 전화기, 태블릿기기 등 모바일 기기에서 실행되는 모든 애플리케이션 및 콘텐츠를 WCAG 2.0(Web Content Accessibility Guidelines 2.0)에서 제시하고 있는 접근성 설계의 4가지 원칙 기준으로, 모바일 애플리케이션 콘텐츠의 설계 및 개발을 위한 지침을 제시하고 있습니다.
요약 설명텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.
시각 장애인이 스크린 리더를 통해 이미지 내용을 이해할 수 있도록 모든 이미지에 대체 텍스트를 제공해야 합니다.WCAG 2.2 Guidelines : 1.1.1 Non-text Content
UAAG 2.0 Reference
시각 장애 사용자는 스크린 리더를 통해 앱의 내용을 접근합니다. 대체 텍스트를 제공하면 스크린 리더가 이미지나 비디오의 의미를 읽어줄 수 있습니다.
검색 엔진은 이미지 파일을 직접 해석하지 못하므로, 대체 텍스트는 검색 엔진 최적화(SEO)에 기여합니다.
이미지가 로드되지 않거나 손상된 경우, 대체 텍스트는 이미지의 의미를 그대로 전달할 수 있습니다.
웹 접근성 관련 법률을 준수하여 모든 사용자가 정보에 동등하게 접근할 수 있도록 보장합니다.
콘텐츠의 의미를 설명하는 간단하고 명확한 대체 텍스트를 모든 이미지에 추가합니다.
의미 없는 장식용 이미지는 alt=""로 설정하여 스크린 리더가 이를 무시하도록 할 수 있습니다.
비디오나 오디오 콘텐츠에는 자막이나 텍스트 설명을 제공하여, 청각 장애 사용자나 비디오를 시청할 수 없는 사용자들도 콘텐츠를 이해할 수 있도록 합니다.
대체 텍스트는 간결하고 명확하며, 콘텐츠의 핵심 의미를 정확하게 전달해야 합니다. 다만, 너무 길거나 짧아서 의미 전달이 어려워지지 않도록 주의해야 합니다.
요약 설명멀티미디어 콘텐츠는 자막 또는 수어를 제공해야 합니다.
영상이나 음성 콘텐츠는 모든 사용자에게 동일한 정보를 제공하기 위해, 자막, 원고, 또는 수화와 같은 동등한 형태의 대체 콘텐츠를 포함해야 합니다. 이를 통해 청각 장애가 있거나 음성을 이해하기 어려운 사용자도 콘텐츠를 충분히 접하고 이해할 수 있습니다.WCAG 2.2 Guidelines : 1.2.2 Captions (Prerecorded)
WCAG 2.2 Guidelines : 1.2.3 Audio Description or Media Alternative (Prerecorded)
청각 장애를 가진 사용자도 콘텐츠를 이해할 수 있어야 합니다.
공공장소나 소음을 내기 어려운 환경에서도 콘텐츠를 이용할 수 있어야 합니다.
자막을 통해 외국어 학습이나 언어 이해를 도울 수 있어야 합니다.
요약 설명멀티미디어 콘텐츠에서 음성 정보가 없는 시각 정보는 인식할 수 있도록 화면해설을 제공해야 합니다.
대사·나레이션 없이 전달되는 중요한 시각 정보(화면 전환, 그래픽, 텍스트 등)는 음성 설명·화면해설 트랙 등으로 동등하게 전달할 수 있어야 합니다.WCAG 2.2 Guidelines : 1.2.3 Audio Description or Media Alternative (Prerecorded)
WCAG 2.2 Guidelines : 1.2.5 Audio Description (Prerecorded)
시각 장애 사용자는 화면에만 나타나는 정보를 음성으로만 들을 수 없을 때 내용을 놓칠 수 있습니다.
화면해설(오디오 설명) 트랙, 또는 동등한 대체 콘텐츠(텍스트 원고 등)를 제공합니다.
자막과 화면해설(설명) 트랙을 함께 제공합니다.
요약 설명표는 이해하기 쉽게 구성해야 합니다.
제목 셀과 데이터 셀의 관계가 드러나도록 표를 마크업하고, 캡션·헤더 연결을 제공합니다.WCAG 2.2 Guidelines : 1.3.1 Info and Relationships
스크린 리더 사용자가 어떤 셀이 행·열 제목과 연결되는지 알 수 있어야 합니다.
th/scope 또는 headers/id 등으로 연결을 명시합니다.
caption 또는 aria-label로 표의 목적을 설명합니다.
캡션과 scope로 헤더 관계를 명시합니다.
요약 설명콘텐츠는 논리적인 순서로 제공해야 합니다.
시각적 배치와 DOM 순서·스크린 리더 읽기 순서가 일치하도록 구성합니다.WCAG 2.2 Guidelines : 1.3.2 Meaningful Sequence
보조기술은 DOM 순서대로 읽으므로, 시각적 순서와 문서 순서가 같아야 합니다.
제목 단계(h1~h6)를 건너뛰지 않고, 의미 있는 순서로 마크업합니다.
포커스 순서가 사용자가 기대하는 흐름과 같도록 조정합니다.
제목과 본문이 논리적 순서로 배치됩니다.
요약 설명지시사항이나 알림정보 등은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 다양한 감각으로 인식할 수 있어야 합니다.
지시는 색·위치·소리 등 한 가지 감각에만 의존하지 않고, 알림은 화면·소리·진동 등 여러 경로로 전달할 수 있어야 합니다.WCAG 2.2 Guidelines : 1.3.3 Sensory Characteristics
WCAG 2.2 Guidelines : 3.3.2 Labels or Instructions
시각, 청각, 인지·촉각 장애를 가진 사용자와 다양한 환경에서도 지시·알림을 인지할 수 있어야 합니다.
모호하지 않은 지시와 중복되지 않는 다중 채널 알림은 실수를 줄이고 정보를 놓치지 않게 합니다.
지시를 텍스트로 명확히 하고, 아이콘에는 라벨·contentDescription 등을 붙입니다.
팝업·토스트 등 시각 알림과, 소리·진동 등을 조합해 사용자 설정에 맞게 제공합니다.
텍스트 기반의 명확한 지시 사항 제공
지시 사항을 텍스트로 명확하게 제공
화면 표시, 소리, 진동을 통한 알림
화면 표시와 소리, 진동을 통한 알림('알림 보내기' 버튼을 클릭하세요.)
요약 설명콘텐츠는 특정 화면 방향으로만 고정하지 않아야 합니다.
가로·세로 전환을 허용하거나, 고정이 불가피한 경우 동등한 대안을 제공합니다.WCAG 2.2 Guidelines : 1.3.4 Orientation
휠체어 거치대 등으로 세로 고정만 가능한 경우와 사용자의 회전 선호가 다를 수 있습니다.
시스템 설정에 따라 가로·세로 모두에서 콘텐츠를 이용할 수 있게 합니다.
방향 고정이 필수인 경우(예: 카메라 뷰파인더) 동등한 정보를 다른 방향에서도 제공합니다.
AndroidManifest.xml에서 불필요한 방향 고정을 피합니다.
뷰포트·CSS로 가로 폭을 유연하게 두어 회전·좁은 폭에 대응합니다.
요약 설명입력 서식의 목적은 식별할 수 있어야 합니다.
autocomplete등으로 필드 목적을 프로그램적으로 드러내거나, 일관된 레이블을 제공합니다.WCAG 2.2 Guidelines : 1.3.5 Identify Input Purpose
필드 목적이 알려져 있으면 비밀번호 관리자·자동완성·음성 입력이 정확해집니다.
autocomplete 등 HTML 표준 자동완성 토큰을 사용합니다.
WHATWG autofill tokens
android:importantForAutofill, autofillHints 등으로 목적을 힌트합니다.
자동 채우기 힌트로 입력 목적을 식별합니다.
label, type, autocomplete로 목적을 연결합니다.
요약 설명콘텐츠는 색에 관계없이 인식할 수 있어야 합니다.
콘텐츠는 색상에 관계없이 인식될 수 있어야 합니다. 색상에 의존한 정보 전달을 피하고, 색상만으로 정보를 전달하지 않도록 주의해야 합니다.WCAG 2.2 Guidelines : 1.4.1 Use of Color
색각 장애를 가진 사용자가 색을 구별하기 어려운 상황에서 정보를 놓칠 수 있기 때문에, 색 외의 다른 요소를 사용하면 이 문제를 해결할 수 있습니다.
색만으로 정보를 전달하지 않음으로써 모든 사용자가 쉽게 정보를 인식하고 이해할 수 있습니다.
색을 구별하기 어려운 사용자를 포함해 다양한 사용자가 앱을 접근 가능하게 이용할 수 있습니다.
중요한 정보나 상태는 색상 외에도 텍스트, 패턴, 아이콘 등의 다른 시각적 요소를 함께 사용해 전달해야 합니다.
예를 들어, 오류 메시지를 빨간색으로만 표시하는 대신 '오류'라는 텍스트나 아이콘을 함께 표시합니다
색으로 구분되는 요소들은 명확한 레이블이나 설명을 포함하여, 색을 구별하지 않아도 이해할 수 있도록 해야 합니다.
예를 들어, 그래프에서 색으로 표시된 데이터는 각 데이터의 의미를 레이블로 표시해야 합니다.
색각 장애 사용자가 색을 구분할 수 있도록 색상 대비를 충분히 명확하게 설계해야 합니다. 그러나 색상 외에도 추가적인 구별 요소를 함께 제공해야 합니다.
색각 장애 시뮬레이션 도구를 사용해 디자인을 테스트하고, 색상에 관계없이 정보가 제대로 전달되는지 확인합니다.
텍스트와 아이콘을 사용하여 상태를 전달합니다.
색상 외의 요소를 사용하여 정보를 구분합니다.
모든 중요한 정보가 색상 외의 텍스트, 아이콘, 패턴 등 다른 시각적 요소로도 전달되고 있는지 확인하였는가?
색각 장애 시뮬레이션 도구를 사용하여 디자인이 색각 장애 사용자에게도 동일한 정보를 제공하는지 테스트하였는가?
다양한 사용자가 색상 외의 요소를 통해 정보를 올바르게 인식할 수 있는지 테스트하였는가?
WAVE, Axe 등의 도구를 사용하여 색상만으로 정보를 전달하는 요소를 점검하였는가?
요약 설명소리는 자동으로 재생되지 않아야 합니다.
3초 이상 자동 재생되는 소리는 사용자가 중지·일시정지·음량 조절 등으로 제어할 수 있어야 하며, 배경음이 스크린 리더 음량에 영향을 주지 않아야 합니다.WCAG 2.2 Guidelines : 1.4.2 Audio Control
WCAG 2.2 Guidelines : 2.2.2 Pause, Stop, Hide
갑자기 재생되는 소리는 음성 안내를 가려 사용자가 콘텐츠를 인지하기 어렵게 합니다.
autoplay 사용을 피하거나, 기본 꺼짐·재생 전 확인을 제공합니다.
자동 재생을 끄고, 사용자가 재생을 시작하도록 합니다.
요약 설명콘텐츠와 배경 간의 명도는 충분하게 대비되도록 제공해야 합니다.
화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 합니다.
페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대비를 제공하여, 저시력장애인, 색각 장애인, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 합니다.
다만, 로고, 장식목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 합니다.WCAG 2.2 Guidelines : 1.4.3 Contrast (Minimum)
저시력 사용자나 색각 이상 사용자도 명확하게 텍스트와 UI 요소를 인식할 수 있어야 합니다.
밝은 햇빛이나 어두운 조명 환경에서도 정보를 쉽게 읽을 수 있어야 합니다.
명도 대비가 충분하면 눈의 피로를 줄이고 장시간 사용에도 더 편안합니다.
명도 대비를 고려한 텍스트와 버튼 디자인
명도 대비를 고려한 텍스트와 버튼 스타일
요약 설명이웃한 콘텐츠는 시각적으로 구별할 수 있어야 합니다.
여백, 테두리, 배경 차이 등으로 인접 블록을 구분합니다.WCAG 2.2 Guidelines : 1.4.11 Non-text Contrast
버튼·링크·입력란이 붙어 있으면 저시력 사용자가 대상을 구분하기 어렵습니다.
구분선, 카드 UI, 그림자 등으로 영역을 나눕니다.
아이콘·테두리 등 비텍스트 UI는 인접 색과 3:1 이상 대비를 확보합니다.
카드·구분선으로 블록을 나눕니다.
여백과 테두리로 인접 영역을 구분합니다.
요약 설명텍스트는 내용이나 기능의 손실 없이 200%까지 크기 조정이 가능해야 합니다.
OS·브라우저 글자 크기 설정과 확대에 대응합니다.WCAG 2.2 Guidelines : 1.4.4 Resize Text
저시력 사용자는 시스템 글자 크기를 키워야 본문을 읽을 수 있습니다.
sp(Android), rem/em(웹) 등으로 사용자·브라우저 배율을 따릅니다.
텍스트 영역에 px로 고정 높이만 주어 잘리지 않게 합니다.
sp 단위로 텍스트 크기를 지정합니다.
rem과 유연한 레이아웃으로 확대에 대응합니다.
요약 설명텍스트는 이미지로 제공하지 않아야 합니다.
필수 본문은 실제 텍스트로 제공하고, 장식용 이미지 텍스트는 예외를 따릅니다.WCAG 2.2 Guidelines : 1.4.5 Images of Text
이미지 속 글자는 사용자 글꼴 설정을 따르지 않고, 스크린 리더가 읽기 어렵습니다.
본문·제목·버튼은 HTML 텍스트, Android TextView 등으로 제공합니다.
로고·장식 등 필수적 이미지 텍스트는 예외를 따릅니다.
버튼 텍스트는 마크업 텍스트로 제공합니다.
요약 설명콘텐츠는 화면 크기에 따라 손실 없이 표시되어야 합니다.
가로·세로 동시 스크롤 없이 한 방향 스크롤로 읽을 수 있도록 레이아웃합니다(예외 제외).WCAG 2.2 Guidelines : 1.4.10 Reflow
모바일·분할 화면에서는 가로 스크롤 없이 세로로 읽을 수 있어야 합니다.
플렉스·그리드·퍼센트 폭 등으로 뷰포트에 맞게 줄바꿈합니다.
뷰포트 메타와 유동 폭으로 리플로우합니다.
요약 설명텍스트는 내용과 기능의 손실 없이 간격을 조정할 수 있어야 합니다.
줄 간격, 글자·단어 간격을 사용자가 일정 범위에서 바꿔도 레이아웃이 깨지지 않아야 합니다.WCAG 2.2 Guidelines : 1.4.12 Text Spacing
읽기 어려움 사용자는 줄·글자·단어 간격을 넓혀야 합니다.
사용자 스타일·브라우저 확장이 적용돼도 레이아웃이 깨지지 않게 합니다.
WCAG 검증용으로 줄·글자·단어 간격을 넓혀도 겹침이 없어야 합니다.
모바일 앱 접근성 요약 보고서 예시로, 체크박스의 체크 여부가 저장되지 않습니다.
검사항목(41개)
준수 여부
텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
멀티미디어 콘텐츠는 자막 또는 수어를 제공해야 한다.
멀티미디어 콘텐츠에서 음성 정보가 없는 시각 정보는 인식할 수 있도록 화면해설을 제공해야 한다.
표는 이해하기 쉽게 구성해야 한다.
콘텐츠는 논리적인 순서로 제공해야 한다.
지시사항이나 알림정보 등은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 다양한 감각으로 인식할 수 있어야 한다.
콘텐츠는 특정 화면 방향으로만 고정하지 않아야 한다.
입력 서식의 목적은 식별할 수 있어야 한다.
콘텐츠는 색에 관계없이 인식할 수 있어야 한다.
소리는 자동으로 재생되지 않아야 한다.
콘텐츠와 배경 간의 명도는 충분하게 대비되도록 제공해야 한다.
이웃한 콘텐츠는 시각적으로 구별할 수 있어야 한다.
텍스트는 내용이나 기능의 손실 없이 200%까지 크기 조정이 가능해야 한다.
텍스트는 이미지로 제공하지 않아야 한다.
콘텐츠는 화면 크기에 따라 손실 없이 표시되어야 한다.
텍스트는 내용과 기능의 손실 없이 간격을 조정할 수 있어야 한다.
의미나 기능을 갖는 모든 콘텐츠 요소는 초점이 적용되고, 초점은 논리적인 순서로 이동해야 한다.
사용자 입력 및 컨트롤은 조작 가능한 충분한 크기로 제공해야 한다.
단일 문자 단축키는 오동작으로 인한 오류를 방지해야 한다.
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
콘텐츠 블록에는 적절한 제목을 제공해야 한다.
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
콘텐츠는 다양한 방법으로 탐색할 수 있어야 한다.
다중 포인트 동작 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.
단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 한다.
텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.
동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.
주로 사용하는 언어는 명시해야 한다.
기본 언어와 구별되는 다른 언어는 해당 언어를 명시해야 한다.
사용자가 의도하지 않은 기능은 자동적으로 실행되지 않아야 한다.
사용자 인터페이스 컴포넌트는 일관성 있게 제공해야 한다.
도움 정보가 제공되는 경우, 각 페이지에 동일한 순서로 접근할 수 있어야 한다.
입력 오류를 정정할 수 있는 방법을 제공해야 한다.
사용자 입력에는 대응하는 레이블을 제공해야 한다.
중요한 정보가 제출되기 전 되돌리기 어려운 오류를 방지할 수 있는 수단을 제공해야 한다.
동일한 정보를 반복하여 입력하지 않도록 해야 한다.
인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.
사용자 인터페이스 컴포넌트는 보조기술을 이용하여 사용할 수 있도록 해야 한다.
중요한 상태 메시지는 보조기술 사용자에게도 전달되어야 한다.