Diiiiiikey

Blog

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

웹 접근성 효과

  1. 사용자층 확대
  2. 다양한 환경 지원
  3. 사회적 이미지 향상

한국형 웹 콘텐츠 접근성 지침 2.1

  1. 인식의 용이성

    모든 콘텐츠는 사용자가 인식 가능해야함

    • 텍스트
      • 텍스트가 아닌 콘텐츠는 이해할 수 있도록 대체 텍스트 제공해
      • 시각적으로 화면은 인식할 수 없을 때 alt 속성
    • 자막
      • 자막을 지원 멀티미디어 플랫폼 사용
      • 자막 불러오기
      • WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식 
          <video ... >
      <track src="자막.vtt" kind="captions" />
  </video>
      • 대본 또는 수어를 제공
    • 색에 무관한 콘텐츠
      • 콘텐츠에 테두리 설정
      • 콘텐츠에 레이블 설정
    • 명확한 지시사항
      • 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식
    • 텍스트 콘텐츠 명도 대비
      • 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상
    • 자동 재생 금지
    • 콘텐츠 간 구분

  2. 운용의 용이성

    UI는 조작 가능하고 내비게이션 가능해야함

    • 키보드 사용 보장
      • 모든 기능은 키보드만으로도 사용 가능해야함
    • 초점 이동
      • 키보드에 의한 초점 이동 가능
    • 조작 가능
      • 컨트롤의 대각선 길이 6mm 이상
      • 컨트롤 간 1픽셀 이상의 여백
    • 응답 시간 조절
      • 충분한 시간, 종료 안내, 조절 수단
    • 정지 기능 제공
      • 자동으로 변경되는 콘텐츠 움직임 제어
    • 깜빡임과 번쩍임 사용 제한
      • 전체 화면의 10% 미만
      • 3초 미만
      • 사전에 경고하고 중단할 수 있는 수단을 제공
    • 반복 영역 건너뛰기
    • 제목 제공
    • 적절한 링크 텍스트

  3. 이해의 용이성

    콘텐츠는 이해 가능해야함

    • 기본 언어 표시
    <html lang="ko"></html>
    • 사용자 요구에 따른 실행
      • 의도하지 않은 기능은 실행되지 않아야 함
    • 콘텐츠 선형 구조
      • 콘텐츠는 논리적인 순서로 제공
    • 표의 구성
      • 이해하기 쉽게 구성
      • caption 요소를 사용해서 표에 제목을 제공, 혹은 요약
      • 테이블 요소 안에 caption 요소를 사용해서 표에 제목을 제공
      • 제목 셀은 <th>, 데이터 셀은 <td>, 열생성 <tr>
      • scope(1대1로 매치가 가능할 때) 혹은 id와 headers 속성 사용(셀을 합치거나 나누는 경우가 있을 때)
    • 레이블 제공
      • label 요소의 for 속성으로 연결(리엑트에서는 htmlFor, className을 사용하는 것과 같은 논리)
      • title 속성을 사용
    • 오류 정정

  4. 견고성

    미래의 기술로도 접근할 수 있도록 견고하게 작성

    • 마크업 오류 방지
    • 웹 애플리케이션 접근성 준수

댓글남기기

참고