1. 인식의 용이성

1. 인식의 용이성 (Perceivable)

1.1 대체 텍스트 제공

1.1.1 [검사항목 1] 적절한 대체 텍스트 제공

1. 이미지를 나타내는 <img>, <input type="image">, <area> 요소에 적절한 대체 텍스트를 제공합니다.

• 이미지 텍스트

<img src="image.jpg" alt="2022 30분 요약 강좌, 30분 만에 끝내는 HTML">

<img src="image.jpg" alt="30분 요약 강좌"> <!-- 요약한 경우로 오류 예시입니다. -->

<img src="image.jpg" alt="2022 30분 요약 강좌, 30분 만에 끝내는 CSS"> <!-- 오타 발생한 경우로 오류 예시입니다. -->

• 이미지 버튼

텍스트가 아닌 이미지 형식으로 제출 버튼을 만드는 데 사용되는 <input type="image"> 요소도 아래와 같이 alt 속성을 통해 대체 텍스트를 제공해요.

<input type="image" src="image,jpg" alt="로그인 하기" />

• 이미지 맵

<img usemap="#imagemap" src="image.png" alt="맛집 지도">
<map name="imagemap">
  <area shape="rect" coords="43,70,163,168"
    href="해당 링크" target="_blank" alt="한식">
  <area shape="rect" coords="217,79,337,168"
    href="해당 링크" target="_blank" alt="양식">
  <area shape="rect" coords="43,184,163,274"
    href="해당 링크" target="_blank" alt="중식">
  <area shape="rect" coords="217,184,337,274"
    href="해당 링크" target="_blank" alt="일식">
</map>

• 그림, 사진

더 많은 내용이 담겨 있는 그림, 사진과 같은 경우에도 사용자가 이해할 수 있도록 대체 텍스트를 제공해요.

<img src="image.jpg" alt="사자 옷을 입고 손을 흔들며 인사하는 고양이 캐릭터">

1. 썸네일 이미지

이미지와 이미지에 대한 설명이 함께 제공되는 경우에는 이미지와 텍스트를 하나의 링크로 묶어 주고, 스크린 리더가 중복으로 읽지 않도록 alt 속성을 빈 문자열로 제공해요. alt 속성을 빈 값으로 제공하면 스크린 리더가 읽지 않지만, alt 속성 자체를 생략할 경우에는 src 속성의 파일명을 읽게 되므로 반드시 제공해야 합니다.

<a href="…">
	<img src="image.jpg" alt="">
	<span>드넓은 제주도의 유채꽃밭</span>
</a>

1. 의미 있는 배경 이미지

display:none, visibility:hidden은 스크린 리더마다 인식 여부가 다르므로 사용하지 않습니다.

// HTML
<p class="ir_wa"> 멋쟁이 사자처럼 서비스 약관에 동의해 주세요.</P>

// CSS
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

1. 아이콘 버튼

기능이나 정보를 제공하는 아이콘 버튼에도 대체 텍스트를 제공해요. 배경 이미지로 지정하는 경우에는 마크업으로 대체 텍스트를 제공하고 IR 기법으로 숨김 처리합니다.

// alt 속성으로 대체 텍스트 제공
<button>
	<img src="image.jpg" alt="썸네일형">
</button>

// 배경 이미지로 지정한 경우
<button><span class=”ir_wa”>썸네일형</span></button>

1. 의미 없는 이미지

<img src="image.jpg alt=""> // (O)

<img src="image.jpg"> // alt 속성을 제공하지 않은 경우(X)
<img src="image.jpg alt="계산기"> // 불필요한 대체 텍스트를 제공한 경우(X)

1. 복잡한 데이터

그래프, 조직도, 다이어그램 등과 같은 복잡한 데이터는 사용자가 해당 콘텐츠의 상호 관계, 흐름 등의 의미를 충분히 파악할 수 있도록 alt속성. HTML 마크업, 링크 연결 등의 방법으로 대체 텍스트를 제공해요.

// alt 속성으로 대체 텍스트 제공
<img src="image.jpg" alt="확진환자 지역별 비율, 10월 7일 00시 기준, 기타 41.64%, 경기 26.88%, 서울 19.51%, 경남 6.03%, 부산 5.94%">

// HTML 마크업으로 대체 텍스트 제공
<div class="ir_wa">
	<h4>확진환자 지역별 비율
		<span>(10.7 00시 기준)</span>
	</h4>
	<ul>
		<li>기타 41.64%</li>
		<li>경기 26.88%</li>
		<li>서울 19.51%</li>
		<li>경남 6.03%</li>
		<li>부산 5.94%</li>
	</ul>
</div>

<a href="image-descriptions.html">
  <img src="image.jpg" alt="확진환자 지역별 비율" />
</a>

1. QR 코드

URL 주소 제공하는 경우
<a href="<https://paullab.co.kr/index.html>">
	<img src="image.jpg" alt="제주코딩베이스캠프 페이지
			 QR코드 <https://paullab.co.kr/index.html>"/>
</a>

URL 주소를 제공하지 않는 경우엔 주소 정보를 대체 텍스트로 제공합니다.
<a href="<https://paullab.co.kr/index.html>">
	<img src="image.jpg" alt="제주코딩베이스캠프 페이지 QR코드"/>
</a>

1. 캡차(CAPTCHA)

자동 가입 방지 이미지인 캡차는 보안 상의 이유로 대체 텍스트를 그대로 제공하지 않고 ‘보안 문자’, ‘자동 가입 방지용 문자’와 같이 목적이나 용도를 설명해야 해요. 또한 청각적으로 인식할 수 있는 음성 캡차도 함께 제공해야 합니다.

 

1. 사용자가 이미지를 직접 올리는 경우(예: 게시판에 콘텐츠 등록)에는 대체 텍스트도 함께 입력할 수 있는 기능을 제공해야 해요.

1.2 멀티미디어 대체 수단

1.2.1 [검사항목 2] 자막 제공

1. 자막 제공

• 멀티미디어 콘텐츠가 재생될 때마다 자막이 자동으로 화면에 표시되어야 해요.

• 자막은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동일한 내용이어야 해요.

• 자막은 사용자의 필요에 따라 활성화 여부를 설정할 수 있도록 해요.

1. 대본 제공

• 대본은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동일한 내용이어야 해요.

• 대본은 사용자의 필요에 따라 활성화 여부를 설정할 수 있도록 해요.

1. 수어 제공

• 동영상 콘텐츠에 수어를 녹화한 콘텐츠를 중첩해서 함께 제공해요.

• 수어는 충분한 해상도를 제공해야 해요.

• 수어는 멀티미디어 콘텐츠에 포함된 음성(대사)과 동일한 내용이어야 해요.

1.3 명료성

1.3.1 [검사항목 3] 색에 무관한 콘텐츠 인식

1. 색에 의한 정보 표현 방지

• 차트나 그래프를 고대비 모드로 화면에 표시했을 때 모든 색이 단색으로 표시되기 때문에 사용자가 색을 구분하지 못하는 경우가 발생해요. 이러한 상황에도 콘텐츠를 인식할 수 있도록 색으로만 정보를 제공하지 않아야 해요.

• 색은 시각적인 강조를 위해서만 사용해야 해요.

1. 무늬를 이용한 정보 제공

• 색에 상관 없이 차트나 그래프 등을 패턴, 굵기 등의 다양한 방법으로 구분해요.

1.3.2 [검사항목 4] 명확한 지시사항 제공

1. 색, 크기, 모양 또는 위치와 같은 정보에 대한 인식

// 설명을 위한 예시 코드 입니다.
<p class="blind">
	경기 지역의 건강검진 센터 위치입니다.
</p>

1. 음성이나 음향 정보의 인식
전달하고자 하는 지시사항 또는 알림 정보를 소리만으로 전달하는 경우를 말합니다. 소리만으로 전달하는 경우 청력 기능에 장애가 있는 이용자들은 인지하기 어렵기 때문에 시각적인 정보를 함께 제공해야 합니다. 온라인을 통해 시험을 치르는 경우 경과시간 또는 남은 시간, 정답 여부 등의 정보 전달을 소리(경고음, 비프음)뿐만 아니라 시각적인 정보도 함께 전달받을 수 있도록 경고창과 같은 요소를 활용하여 정보를 전달할 수 있도록 합니다.



 

1.3.3 [검사항목 5] 텍스트 콘텐츠의 명도 대비

1. 콘텐츠의 명도 대비

• 웹 페이지가 제공하는 텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 : 1 이상일수록 텍스트와 배경을 구별하는데 수월해요.

• 폰트 크기가 18pt 또는 폰트 굵기가 14pt 이상일 경우 명도대비 3:1 까지 적용 가능해요.
• 윈도우(windows)에서 18pt는 24px, 14pt는 18.66px 이고 맥(maxOS)는 pt 와 px 값이 동일해요.

• 콘텐츠 화면 확대기능이 있다면 명도 대비 3:1 까지 적용 가능해요.

• 의미 있는 이미지나 텍스트가 이미지(img)로 구성된 경우에도 명도 대비를 준수해요.

• 로고, 장식목적의 컨텐츠, 마우스나 키보드를 통해 초점을 받았을 때 명도대비가 높아지는 콘텐츠는 예외

• 크롬 브라우저의 개발자도구를 활용하여 텍스트와 배경의 명도 비율을 확인할 수 있어요.

• 명도 비율을 확인하고 싶은 텍스트 콘텐츠에 커서를 올려 놓으면, Contrast의 수치를 통해 확인할 수 있어요.

• 웹 사이트를 활용해 명도비율을 확인할 수 있습니다.
• snook.ca 사이트를 활용하여 비율 확인하기 (https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333)
• contrastfinder 사이트를 활용하여 비율 확인하기 (https://app.contrast-finder.org/)

1.3.4 [검사항목 6] 자동 재생 금지

• video

// autoplay 속성 제거
<video controls loop muted>
  <source src="" type="">
</video>

// autoplay="false" 적용
<video autoplay="false" controls loop muted>
  <source src="" type="">
</video>

• iframe

//mute속성과 함께 autoplay 속성 적용
<iframe
width="600"
height="430"
src="https://www.youtube.com/embed/PQymWXKehlk?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

//mute속성과 함께 autoplay 속성 적용
<iframe
width="600"
height="430"
src="https://www.youtube.com/embed/PQymWXKehlk?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

1. 자동 재생음을 허용하는 경우
• 3초 이내 멈출 수 있도록 기능을 구현하거나, 지정된 키(key)를 누르면 재생음을 멈추도록 구현해요.
• 이용자가 정지, 일시 정지, 음량을 조작할 수 있도록 컨트롤 버튼을 제공해요.이용자가 콘텐츠를 조작할 수 있는 기능을 구현한다면 자동재생기능을 적용시킬 수 있어요.



컨트롤 버튼을 해당 페이지의 가장 상단에 위치할 수 있도록 해준다면 다양한 이용자들을 고려한 마크업이 될 수 있습니다.

1.3.5 [검사항목 7] 콘텐츠 간의 구분

• 테두리를 이용하여 구분

• 콘텐츠 사이에 시각적인 구분 선을 삽입하여 구분

• 서로 다른 무늬를 이용하여 구분

• 콘텐츠 배경색 간의 명도 대비(채도)를 달리하여 구분

• 줄 간격 및 글자 간격을 조절하여 구분

• 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분