WCAG (Web Content Accessibility Guidelines)

웹 콘텐츠 접근성 지침서로, KWCAG라는 한국형 웹 콘텐츠 접근성 지침도 있습니다.

이는 완벽한 것이 아닌 최소한의 접근성으로서 앞으로 웹 개발을 할 때 지켜줘야 할 항목들입니다.

 

다음 아래 내용은 KWCAG2.1 (한국형 웹 콘텐츠 지침) 내용입니다.

 

인식의 용이성

- 적절한 대체 텍스트 제공, 자막 제공, 색에 무관한 콘텐츠 인식, 명확한 지시 사항 제공(동의란 잘 보이게 등), 텍스트 콘텐츠의 명도 대비, 자동 재생 금지, 콘텐츠 간의 구분

운용의 용이성

- (마우스로 된다면 키보드도) 키보드 사용 보장, 초점 이동, 조작 기능, 응답시간 조절, 정지 기능 제공, 깜빡임과 번쩍임 사용 제한(발작 장애. 주의문구 표시), 반복 영역 건너뛰기, 제목 제공, 적절한 링크 텍스트

- h tag 잘 써서 heading이 의미를 가지는 목차가 되도록

이해의 용이성

기본 언어 표시, 사용자 요구에 따른 실행, 콘텐츠의 선형 구조, 표의 구성, 레이블 제공, 오류 정정

---

적절한 대체 텍스트 제공

- <img> 태그에서 alt 속성을 안 쓰면 화면 낭독기는 file 명을 읽습니다.

- alt 속성은 이미지 내용과 동등해야 합니다.

자막 제공 (수화)

- 동영상 콘텐츠 음성 정보와 동기화 된 자막, 원고 또는 수화를 제공해야 합니다.

색에 무관한 콘텐츠 인식

- 콘텐츠는 색에 관계없이 인식될 수 있어야 합니다.

- 색맹, 흑백 환경, 그래프에서도 색깔 외에 패턴으로 구분합니다.

- 필수 입력사항을 빨간색으로 구분하지 않고 * 별표 등으로 구분합니다.

명확한 지시사항 제공

- 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다.

- 좌측 상단, 위쪽 메뉴 등이 아니라 기능으로 명시해야 합니다.

텍스트 콘텐츠의 명도 대비

- 텍스트 콘텐츠와 배경 간의 명도 대비는 4,5 대 1 이상이어야 합니다. 확대/축소가 가능하다면 3 대 1까지 가능합니다.

자동재생 금지

- chrome에서 자동재생을 금지해야 합니다. (volume mute 값을 부여하면서 해결할 수 있습니다.)

콘텐츠 간의 구분

- 이웃한 콘텐츠는 구별될 수 있어야 합니다.

키보드 사용 보장

- 모든 기능은 키보드만으로도 사용할 수 있어야 합니다.

초점 이동

- 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다. (하위 메뉴를 다른 list에 넣으면 안 됩니다.)

조작 가능

- 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 합니다.

- control 영역을 크게 해야 합니다.

응답 시간 조절

- 시간제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 합니다.

정기 기능 제공

- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다. (자동으로 넘어가버리는 배너 등 내가 정지시키고 마음대로 제어할 수 있어야 합니다.)

반복 영역 건너뛰기

- 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 합니다.

- 매번 키보드로 내비게이션 메뉴의 하위 리스트를 다 이동해야 하는 문제가 있을 수 있습니다. 이에 본문 바로가기 기능을 제공해야 합니다. (Scheme navigation)

제목 제공

- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 합니다.

- 수많은 콘텐츠에 제목을 줘야 합니다. section / article은 heading을 요구하지만 div는 없습니다.

- iframe에도 title을 붙여주어야 합니다.

적절한 링크 텍스트

- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 합니다.

- "여기를 클릭하세요" 대신에 "배경음악 다운로드"와 같이 구체적으로 적어주어야 합니다.

<lang> 속성은 <span> 등에도 적용할 수 있습니다. 더 나은 서비스를 제공할 수 있습니다.

Markup 선형화 순서

- 위 이미지와 같이 더보기 항목은 각각의 뉴스들이 마크업 된 후에 마크업을 해 주어야 합니다.

레이블 제공

- 사용자 입력에는 대응하는 레이블을 제공해야 합니다. (<label> 태그 사용)

오류 정정

- 입력 오류를 정정할 수 있는 방법을 제공해야 합니다.

- 입력이 틀린 곳이 있을 경우, 틀렸다고 경고만 하는 것이 아니라 focus가 이동해야 합니다.

Markup 오류 방지

- 태그를 열었으면 닫는 부분이 꼭 있어야 합니다.

- 태그 중첩에 신경을 써주어야 합니다.

- 속성이 중복적으로 사용되면 안 됩니다.