[Accessibility]웹접근성 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2" 강화된 항목

 

한국형 웹 콘텐츠 접근성 지침인 KWCAG (Korean Web Content Accessibility Guidelines)는 시간이 지남에 따라 업데이트되어 개정판이 발표되었습니다. 여기서 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2"의 차이를 요약하면 다음과 같습니다:

 

1. 최신 웹 표준 및 기술 대응: KWCAG 2.1은 초기 버전으로, 주로 HTML, CSS, JavaScript 등의 기술을 기반으로 합니다. 반면 KWCAG 2.2는 보다 최신의 웹 표준 및 기술에 대응하도록 업데이트되어 있습니다. 예를 들어, 미디어 콘텐츠의 접근성, 동적 콘텐츠의 관리, 사용자 경험의 향상 등에 대한 추가적인 지침이 포함되어 있습니다.
2. 기술적 요구사항의 확대: KWCAG 2.2는 기술적 요구사항을 더욱 구체적으로 설명하고 있습니다. 예를 들어, 모바일 기기에서의 접근성, 키보드 접근성, 보조 기술 지원 강화 등에 대한 기준을 보다 명확하게 제시하고 있습니다.
3. 사용자 편의성 강화: KWCAG 2.2는 사용자 경험과 편의성을 강조하는 내용이 더욱 강화되어 있습니다. 사용자가 웹 콘텐츠에 더 쉽게 접근하고 상호작용할 수 있도록 하는 방법에 대한 추가적인 가이드라인이 포함되어 있습니다.
4. 국제 표준과의 조화: KWCAG 2.2는 국제적인 웹 접근성 표준인 WCAG (Web Content Accessibility Guidelines) 2.1과의 조화성을 유지하려는 노력이 더욱 강조되어 있습니다. 이는 국제적인 웹 접근성 기준을 준수하면서도 국내 환경과 요구 사항을 고려한 결과물을 제공하기 위함입니다.

요약하자면, KWCAG 2.1에서 2.2로의 업데이트는 기술적인 발전과 사용자 편의성을 강화하며, 국제적 웹 접근성 표준과의 조화를 도모하는 방향으로 이루어졌습니다.

 

한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2에서 강화된 항목

1. 미디어 콘텐츠의 접근성:
   • 자막 및 오디오 설명: 비디오와 오디오 콘텐츠에는 필요에 따라 자막과 오디오 설명을 제공해야 합니다. 이는 청각 장애인 및 청각 장애인과 함께 하는 사람들이 콘텐츠를 이해하고 접근할 수 있도록 합니다.
   • 신호등 효과: 비디오에서 화면 전환 또는 중요한 내용을 시각적으로 구별할 수 있는 신호등 효과를 사용하여 시청자가 콘텐츠를 이해하는 데 도움을 줍니다.

자막 및 오디오 설명(예시)

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" srclang="ko" label="한국어 자막">
  이 브라우저는 비디오 태그를 지원하지 않습니다.
</video>

 

<track> 요소를 사용하여 비디오에 자막을 제공합니다. kind="subtitles" 속성으로 자막임을 명시하고, srclang 속성으로 언어를 지정합니다.

 

신호등 효과(예시)

<div role="alert" aria-live="assertive">
  신속히 이동하는 메시지
</div>

 

role="alert": 신속히 알릴 필요가 있는 상태 메시지임을 나타냅니다.

aria-live="assertive": 즉시 사용자에게 전달되어야 함을 나타냅니다.

 

1. 동적 콘텐츠의 관리:
   • 키보드 접근성: 동적 콘텐츠(예: 드롭다운 메뉴, 모달 팝업 등)는 키보드만으로도 쉽게 접근하고 조작할 수 있어야 합니다. 이는 시각 장애인 및 운동 장애를 가진 사람들이 콘텐츠를 이용하는 데 필수적입니다.
   • 상태 변화 통지: 동적 콘텐츠의 상태 변화(예: 새로운 메시지 도착, 오류 메시지 등)가 사용자에게 명확하게 통지되어야 합니다. 이는 모든 사용자가 콘텐츠 상태를 이해하고 조치를 취할 수 있도록 합니다.

키보드 접근성(예시)

<button aria-label="클릭하세요" onclick="alert('버튼이 클릭되었습니다.')">
  버튼
</button>

 

aria-label="클릭하세요": 버튼의 목적을 설명하는 추가적인 텍스트를 제공합니다.

클릭 이벤트를 통해 키보드 사용자도 버튼을 쉽게 사용할 수 있습니다.

 

상태 변화 통지(예시)

<div role="status" aria-live="polite">
  새로운 메시지가 도착했습니다.
</div>

 

role="status": 상태 역할로 정의되어 상태 변화를 통지하는 요소임을 나타냅니다.

aria-live="polite": 새로운 메시지가 중요하지만 사용자가 중단될 필요는 없다는 것을 의미합니다.

 

1. 사용자 경험:
   • 모바일 호환성: 모바일 기기에서도 웹 콘텐츠가 적절하게 작동하고 접근할 수 있어야 합니다. 화면 크기가 작거나 터치 인터페이스를 사용하는 경우에도 모든 기능이 잘 작동해야 합니다.
   • 포커스 관리: 사용자가 포커스를 쉽게 관리하고 콘텐츠를 탐색할 수 있도록 포커스가 명확하게 표시되고, 탭 순서가 논리적으로 정의되어야 합니다.

모바일 호환성(예시)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<meta> 태그를 사용하여 viewport를 설정하여 모바일 기기에서 적절하게 화면이 표시되도록 합니다.

 

포커스 관리(예시)

<div tabindex="0" aria-label="포커스를 받을 수 있는 요소입니다.">
  포커스 관리 예시
</div>

 

tabindex="0": 포커스를 받을 수 있도록 설정합니다.

aria-label="포커스를 받을 수 있는 요소입니다.": 요소에 대한 설명을 제공합니다.

 

이러한 예시들은 KWCAG 2.2에서 강화된 접근성 요구사항을 보다 구체적으로 설명하고 있으며, 이는 모든 사용자가 웹 콘텐츠를 동등하게 이용할 수 있도록 지원하는 데 중요한 역할을 합니다.

 

참고 문서

https://www.wa.or.kr/board/view.asp?sn=22592&page=1&search=&SearchString=&BoardID=0004&cate=

관련자료 > 자료실 : 한국웹접근성인증평가원 (읽기) > 한국형 웹 콘텐츠 접근성 지침 2.2