모바일 접근성 점검항목

색상 대비는 반드시 WCAG 2.0 AA 레벨 요건을 준수해야 합니다.

• 일반적인 크기의 텍스트(18pt 보다 작거나 14pt 볼드체)는 4.5:1
• 큰 크기의 텍스트(적어도 18pt 보다 크거나 14pt 볼드체)는 3:1

색상을 통해 전달되는 정보는 반드시 다른 수단으로도 제공되어야 합니다(링크 텍스트의 밑줄 등).

opacity:0, z-index 조정 및 화면 밖 배치와 같은 콘텐츠 숨기기 기법은 단순히 가시성을 처리하기 위해서만 사용되어서는 안 됩니다.

현재 보이는 화면 이외의 모든 것은 반드시 "진짜로" 보이지 않아야 합니다(특히 여러 개의 "카드" 가 있는 단일 페이지 앱에 관련됨).

• hidden 속성 또는 visibility 또는 display 스타일 속성값을 이용하세요.
• 불가피한 경우를 제외 하고 aria-hidden 속성을 사용하지 마세요.

활성화 가능한 모든 요소는 포커스가 가능해야 합니다.

• 링크, 버튼 및 form 필드와 같은 표준 컨트롤들은 기본적으로 포커스가 가능합니다.
• 비표준 컨트롤들은 반드시 button, link 또는 checkbox와 같은 적절한 ARIA Role 이 할당되어야 합니다.

포커스는 논리적인 순서와 일관된 방식으로 다루어져야 합니다.

앱 내 엄격하게 표현되지 않은, 텍스트가 아닌 모든 요소에 대해 동일한 의미의 텍스트가 제공되어야 합니다.

• alt 와 title 속성은 적절하게 사용되어야 합니다 (스티브 폴크너의 HTML의 제목 특성 사용하기 가 좋은 안내서가 될 것입니다).
• 위 속성을 사용하기 어려운 경우 aria-label, aria-labelledby, or aria-describedby 등과 같은 적절한 ARIA 속성들을 사용하세요.

텍스트 이미지 사용은 가급적 자제 해야 합니다.

레이블 텍스트 (또는 텍스트 이미지) 의 모든 사용자 인터페이스 컴포넌트는 프로그램 이름으로 사용할 수 있는 것과 동일한 텍스트를 사용해야 합니다. WCAG 2.1: Label in Name

모든 form 컨트롤 요소는 스크린 리더 사용자를 위해 label (<label> elements) 을 가져야 합니다.

콘텐츠는 특수한 경우를 제외하고 가로 또는 세로의 단일 방향으로 제한되어서는 안됩니다. WCAG 2.1: Orientation

• 방향이 제한되어야 하는 특수한 경우의 예시로는 피아노 앱이나 은행 수표 앱 같은 경우가 있습니다.

앱 이름은 반드시 제공되어야 합니다.

제목 요소들은 계층 구조를 지켜야 합니다.

<h1>Top level heading</h1>
<h2>Secondary heading</h2>
<h2>Another secondary heading</h2>
<h3>Low level heading</h3>

ARIA Landmark Roles 은 banner, complementary, contentinfo, main, navigation, search와 같이 앱이나 문서의 구조를 설명하기 위해서 사용되어야 합니다.

터치 이벤트의 발생 시에는, 아래 사항들 중 최소 하나 이상을 만족해야 합니다(WCAG 2.1: Pointer Cancellation).

• 다운 이벤트는 다른 동작을 트리거 하는 데에 사용되어서는 안됩니다
• 액션은 업 이벤트에 의해 실행되며, 액션의 완료 전 작업을 중단하는 옵션과 액션의 완료 후 작업을 취소하는 옵션을 사용할 수 있습니다
• 업 이벤트는 다운 이벤트에 의해 발생한 모든 작업을 취소합니다
• 다운 이벤트에 의해 액션이 실행되어야 합니다. 예시로는 게임 앱이나 피아노 앱이 있습니다.

터치 요소는 유저가 상호작용 할 수 있을 정도로 충분한 크기를 가져야 합니다(적절한 터치 요소 크기에 대한 지침들은 BBC 모바일 접근성 지침을 참고하세요).