Accessibility 본문

Mobile Web 접근성 검사항목

준수사항

검사항목 1.1 (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
검사 방법

<img> , <input type="image"> , <area> , <applet> 요소의 alt 속성 유무 체크/ 자동검사

alt 속성 값이 있는 <img> , <input type="image"> , <area> , <applet> 요소 중 alt 값이 적절한 대체텍스트를 제공하였는 지 체크

검사항목 2.1 (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
검사 방법

멀티 미디어 콘텐츠에 대한 자막, 원고, 수화 제공 유무 체크 자동검사

검사항목 3.1 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
검사 방법

색상만으로 콘텐츠(그래프, 차트, 지도, 페이지 네비게이션 등)를 분별 하도록 제공 했는지 체크

페이지 네비게이션, 메뉴, 현재 위치 등에 대한 명암 패턴등의 변화 없이 색상만 제공했는지 체크

검사항목 4.1 (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
검사 방법

텍스트나 이미지 텍스트와 배경 간의 명도 대비를 3:1 이상으로 제공했는지 체크

검사항목 5.1 (초점 이동) 키보드에 의한 초점은 논리적 으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
검사 방법 iOS

VoiceOver 사용법 중 두 손가락으로 위로 쓸어 넘기기(화면 상단의 내용부터 읽어줌) 기능을 활용하여 모든 객체에 초첨이 적용되는지 체크

VoiceOver 사용법 중 살짝 누르기(항목을 말해줌) 탐색을 통해 초점 영역 체크

Android

TalkBack 사용법 중 한 손가락으로 화면 오른쪽 또는 왼쪽으로 쓸어 넘기기(오른쪽 또는 왼쪽 아이템을 읽어줌) 기능을 활용하여 모든 객체에 초점이 적용되는지 체크

iOS, Android

초점이 논리적인 순서로 이동되는지 체크

터치하여 탐색을 통해 초첨 영역에 문제가 없는지 체크

검사항목 6.1 (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
검사 방법

<head> 내의 <title> 요소 유무 체크/ 자동검사

<head> 내의 <title> 요소 값 체크

<h> 요소 체크

검사항목 7.1 (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
검사 방법

<html> 요소 lang 속성 유무 체크/ 자동검사

<html> 요소 lang 속성 값 체크

검사항목 8.1 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
검사 방법

<caption> 요소 유무 체크

<th> 요소 유무 체크

검사항목 9.1 (레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.
검사 방법

<input>, <textarea>, <seelect> 요소 등에 <lable> 요소, title 속성 유무 체크/ 자동검사

입력 서식에 레이블이 올바르게 연결되어 있는지 체크

레이블값이 해당 서식을 적절한 내용으로 표현했는지 체크

입력 서식에 중복 레이블을 제공하지 않았는지 체크

검사항목 10.1 (누르기 동작 지원) 터치 기반 모바일 기기의 모든 컨트롤은 누르기 동작(touch or tab)으로 제어할 수 있어야 한다
검사 방법 iOS, Android

다중 누르기(Multi-touch), 슬라이드(Slide), 끌기와 놓기(Drag and drop) 등의 복잡한 동작을 사용하는 기능이 있는 경우 해당 기능을 대체할 수 있는 단순한 누르기 동작을 지원하였는지 체크

권고사항

검사항목 11.1 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
검사 방법

3초 이상 자동으로 재생되는 배경음 사용 여부 체크

3초 이상 자동으로 배경음을 제어할 수 있는 수단을 제공하고 있는지 체크

3초 이상 자동으로 배경음을 제어할 수 있는 수단이 화면 낭독 프로그램 음량에 영향을 주는지 체크

초점을 받아 3초이상 재생되는 배경음 사용 여부 체크

검사항목 12.1 (깜빡임과 번쩍임 사용 제한) 초당 3~50회의 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
검사 방법

육안으로 확인 했을 때 깜빡이거나 번쩍이는 객체가 있는지 체크

깜빡이거나 번쩍이는 콘텐츠가 있을 경우 깜빡임을 사전 경고 하거나, 중단할 수 있는 수단을 제공 여부 체크

검사항목 13.1 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
검사 방법

태그의 열고 닫음 체크

태그의 중첩이 올바른지 체크

한 요소에 중복된 속성 선언 여부 체크

한 페이지에 중복된 id 속성 값 선언 여부 체크

검사항목 14.1 (컨트롤간 충분한 간격) 컨트롤은 충분한 간격으로 배치하는 것이 바람직하다.
검사 방법 iOS, Android

사용자 의도와 무관하게 다른 컨트롤을 눌러지지 않는지 체크

컨트롤 중심간의 간격이 13mm * 13mm 이상인지 체크

선택해야 하는 컨트롤 영역 크기가 8.5mm * 8.5mm 이상인지 체크

검사항목 15.1 (사용자 인터페이스의 일관성) 사용자 인터페이스 요소들의 배치를 일관성 있게 제공하는 것이 바람직하다.
검사 방법 iOS, Android

Mobile Web 내의 UI 요소들의 위치가 동일한지 체크

폰트, 크기, 화면 색상, 링크 제공 방법, 이모티콘 등의 내용이 일관되게 적용되었는지 체크