요약 설명모바일 애플리케이션 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로 모바일 전화기, 태블릿기기 등 모바일 기기에서 실행되는 모든 애플리케이션 및 콘텐츠를 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.4.1 Use of Color
색각 장애를 가진 사용자가 색을 구별하기 어려운 상황에서 정보를 놓칠 수 있기 때문에, 색 외의 다른 요소를 사용하면 이 문제를 해결할 수 있습니다.
색만으로 정보를 전달하지 않음으로써 모든 사용자가 쉽게 정보를 인식하고 이해할 수 있습니다.
색을 구별할 수 없는 사용자를 포함해 다양한 사용자가 앱을 접근 가능하게 이용할 수 있도록 보장할 수 있습니다.
중요한 정보나 상태는 색상 외에도 텍스트, 패턴, 아이콘 등의 다른 시각적 요소를 함께 사용해 전달해야 합니다.
예를 들어, 오류 메시지를 빨간색으로만 표시하는 대신 '오류'라는 텍스트나 아이콘을 함께 표시합니다
색으로 구분되는 요소들은 명확한 레이블이나 설명을 포함하여, 색을 구별하지 않아도 이해할 수 있도록 해야 합니다.
예를 들어, 그래프에서 색으로 표시된 데이터는 각 데이터의 의미를 레이블로 표시해야 합니다.
색각 장애 사용자가 색을 구분할 수 있도록 색상 대비를 충분히 명확하게 설계해야 합니다. 그러나 색상 외에도 추가적인 구별 요소를 함께 제공해야 합니다.
색각 장애 시뮬레이션 도구를 사용해 디자인을 테스트하고, 색상에 관계없이 정보가 제대로 전달되는지 확인합니다.
텍스트와 아이콘을 사용하여 상태를 전달합니다.
색상 외의 요소를 사용하여 정보를 구분합니다.
모든 중요한 정보가 색상 외의 텍스트, 아이콘, 패턴 등 다른 시각적 요소로도 전달되고 있는지 확인하였는가?
색각 장애 시뮬레이션 도구를 사용하여 디자인이 색각 장애 사용자에게도 동일한 정보를 제공하는지 테스트하였는가?
다양한 사용자가 색상 외의 요소를 통해 정보를 올바르게 인식할 수 있는지 테스트하였는가?
WAVE, Axe 등의 도구를 사용하여 색상만으로 정보를 전달하는 요소를 점검하였는가?
요약 설명화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 합니다.
페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대비를 제공하여, 저시력장애인, 색각장애인, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 합니다.
다만, 로고, 장식목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 합니다.WCAG 2.2 Guidelines : 1.4.3 Contrast (Minimum)
저시력 사용자나 색각 이상 사용자도 명확하게 텍스트와 UI 요소를 인식할 수 있어야 합니다.
밝은 햇빛이나 어두운 조명 환경에서도 정보를 쉽게 읽을 수 있도록 보장해야 합니다.
명도 대비가 충분하면 눈의 피로를 줄이고 장시간 사용에도 편안함을 제공해야 합니다.
명도 대비를 고려한 텍스트와 버튼 디자인
명도 대비를 고려한 텍스트와 버튼 스타일
요약 설명지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다.
사용자 인터페이스를 설계할 때, 지시사항이나 안내는 특정 감각적 특성(모양, 크기, 위치, 방향, 색, 소리 등)에 의존하지 않고 명확히 전달되어야 합니다.
즉, 색상에만 의존하여 정보를 전달하는 것이 아니라 텍스트나 다른 시각적 단서도 함께 제공해야 합니다.WCAG 2.2 Guidelines : 3.3.2 Labels or Instructions
시각, 청각, 인지 장애를 가진 사용자뿐만 아니라 다양한 상황에서도 접근성을 보장합니다.
모호하지 않고 명확한 지시 사항은 사용자의 실수를 줄이고, 사용자 경험을 향상시킵니다.
일관된 지시 사항은 모든 사용자가 동일한 방식으로 인터페이스를 이해하고 사용할 수 있게 합니다.
지시 사항을 텍스트로 명확하게 설명합니다.
예를 들어, "오른쪽 상단의 빨간 버튼을 클릭하세요" 대신 "‘제출’ 버튼을 클릭하세요"라고 안내합니다.
아이콘에 설명 텍스트(라벨)를 추가하여 의미를 명확히 합니다.
예를 들어, 저장 아이콘에 “저장”이라는 텍스트 라벨을 추가합니다.
단순히 색이나 모양에 의존하지 않고, 텍스트, 패턴, 위치 등 다양한 대체 수단을 함께 제공합니다.
예를 들어, "파란색 버튼을 클릭하세요" 대신 "'제출' 버튼을 클릭하세요 (파란색 버튼)"이라고 안내합니다.
소리로만 전달되는 정보를 시각적 대체 수단(텍스트, 아이콘 등)으로도 제공합니다.
예를 들어, 경고음과 함께 텍스트 알림을 제공하는 방식입니다.
텍스트 기반의 명확한 지시 사항 제공
지시 사항을 텍스트로 명확하게 제공
요약 설명알림 정보는 화면 표시, 소리, 진동 등 다양한 방법으로 제공되어야 합니다.
알림 정보는 화면 표시, 소리, 진동 등 다양한 방법으로 제공되어야 하며, 사용자가 놓치기 쉬운 중요한 정보를 다양한 감각을 통해 전달함으로써 접근성을 높이는 데 중요합니다.WCAG 2.2 Guidelines : 1.3.3 Sensory Characteristics
시각, 청각, 촉각 장애를 가진 사용자가 알림을 받을 수 있도록 합니다.
사용 환경에 따라 알림을 인지할 수 있는 다양한 방법을 제공해야 합니다.
중요한 정보나 긴급 상황에서 사용자가 정보를 놓치지 않도록 해야 합니다.
팝업 창, 배너, 토스트 메시지 등 시각적인 방법으로 알림을 제공합니다.
예를 들어, "새 메시지가 도착했습니다."라는 팝업 알림이 이에 해당합니다.
청각적인 방법으로 알림을 제공하여 사용자 설정에 따라 알림음을 조절할 수 있게 합니다.
예를 들어, 새로운 이메일이 도착했을 때 소리로 알림을 주는 방식입니다.
촉각적인 방법으로 알림을 제공하면 청각 장애인이나 시각 장애인에게 특히 유용합니다.
예를 들어, 휴대폰이 진동으로 새로운 알림을 전달하는 방식입니다.
화면 표시, 소리, 진동 등 여러 가지 방법을 조합하여 사용자가 알림을 놓치지 않도록 합니다.
예를 들어, 중요한 일정 알림 시 화면에 팝업을 띄우고, 소리와 진동을 함께 제공하는 방식입니다.
화면 표시, 소리, 진동을 통한 알림. 알림을 생성하는 코드 예시
화면 표시와 소리, 진동을 통한 알림('알림 보내기' 버튼을 클릭하세요.)
모바일 앱 접근성 요약 보고서 예시로, 체크박스의 체크 여부가 저장되지 않습니다.
검사항목(33개)
준수 여부
텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.
영상이나 음성 콘텐츠에는 동등한 내용의 자막, 원고 또는 수화가 제공되어야 한다.
화면에 표시되는 모든 정보는 색에 관계없이 인식될 수 있어야 한다.
화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 한다.
지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
알림 정보는 화면 표시, 소리, 진동 등 다양한 방법으로 제공되어야 한다.
의미나 기능을 갖는 모든 사용자 인터페이스 컴포넌트에는 초점(focus)이 적용되고, 초점은 논리적인 순서로 이동되어야 한다.
터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다.
시간 제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
컨트롤은 충분한 크기와 간격으로 제공되어야 한다.
입력 서식 이용 시, 입력 오류를 방지하거나 정정할 수 있는 방법을 제공해야 한다.
사용자 인터페이스 컴포넌트들은 일관성 있게 배치되어야 한다.
깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
자동으로 재생되는 배경음을 사용하지 않아야 한다.
사용자가 의도하지 않는 화면 전환이나 이벤트 등이 실행되는 경우 사용자가 이해할 수 있는 방법으로 제공되어야 한다.
텍스트 콘텐츠는 운영체제에서 제공하는 폰트 관련 기능을 활용할 수 있는 방법을 제공해야 한다.
사용자 인터페이스 컴포넌트는 보조 기술을 이용하여 사용할 수 있도록 해야 한다.