웹 접근성 (Web Accessibility)

웹 접근성

웹 접근성이란?

웹 접근성(Web Accessibility)이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.

모든 사용자가 신체적, 환경적 조건에 관계 없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 웹 접근성이라고 한다.

웹 접근성 콘텐츠 지침

인식의 용이성 (Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

1. 적절한 대체 텍스트
   : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

   • 시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해 대체 텍스트를 제공할 필요가 있다.
     • alt 속성 사용하기

       <img src="이미지 주소" alt="대체 텍스트" />
       

   • 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 한다.
   • 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에도 alt 값으로 빈 문자열을 주는 것이 좋다.

2. 자막 제공
   : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.

   • 자막을 포함한 동영상 사용하기
   • 자막을 지원하는 멀티미디어 플랫폼 사용하기
   • 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기

     <video ...>
       <track src="자막.vtt" kind="captions" />
     </video>
     

   • 자막을 제공하기 어려운 경우 대본 또는 수어를 제공하기

3. 색에 무관한 콘텐츠 인식
   : 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.

   • 색약, 색맹 등의 사용자를 위해 색에 관계 없이 인식되고 구분될 수 있는 콘텐츠를 사용해야 한다.
     • 콘텐츠에 테두리 설정하기
     • 콘텐츠에 레이블 달기

4. 명확한 지시사항 제공
   : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

5. 텍스트 콘텐츠 명도 대비
   : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

   • 콘텐츠가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 페이지의 경우, 장식 목적의 콘텐츠인 경우 명도 대비가 3 대 1 까지 허용된다.

6. 자동 재생 금지
   : 자동으로 소리가 재생되지 않아야 한다.

   • 동영상, 오디오, 음성, 배경 음악 등 모든 종류의 소리를 말한다.
   • 스크린 리더를 사용하는 경우, 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려워진다.
   • 불가피하게 제공해야 하는 경우에는 다음과 같이 해결한다.
     • 가장 먼저 위치시켜 정지할 수 있게 구현하기
     • ESC를 눌러 정지
     • 3초 내에 정지

7. 콘텐츠 간 구분
   : 이웃한 콘텐츠는 구별될 수 있어야 한다.

   • 웹 페이지를 구성하는 모든 콘텐츠는 테두리, 구분선, 무늬, 명도대비, 간격 등 시각적으로 구분할 수 있는 방법을 사용해 구분할 수 있어야 한다.

운용의 용이성 (Operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

1. 키보드 사용 보장
   : 모든 기능은 키보드만으로 사용할 수 있어야 한다.

2. 초점 이동
   : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

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

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

5. 정지 기능 제공
   : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

6. 깜빡임과 번쩍임 사용 제한
   : 초당 3-50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

7. 반복 영역 건너뛰기
   : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

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

9. 적절한 링크 텍스트
   : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

이해의 용이성 (Understandable)

콘텐츠는 이해할 수 있어야 한다.

1. 기본 언어 표시
   : 주로 사용하는 언어를 명시해야 한다.

2. 사용자 요구에 따른 실행
   : 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

3. 콘텐츠 선형 구조
   : 콘텐츠는 논리적인 순서로 제공해야 한다.

4. 표의 구성
   : 표는 이해하기 쉽게 구성해야 한다.

5. 레이블 제공
   : 사용자 입력에는 대응하는 레이블을 제공해야 한다.

6. 오류 정정
   : 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

견고성 (Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

1. 마크업 오류 방지
   : 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

2. 웹 애플리케이션 접근성 준수
   : 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.