[웹접근성] 적절한 대체 텍스트 제공

오류사례 1. 텍스트 이미지에 대체 텍스트가 제공되지 않은 경우

     <tr>
        <td>
            <a href="">
                <img src="btn_confirm.gif" alt="">
            </a>
            <a href="">
                <img src="btn_cancel.gif" alt="">
            </a>
        </td>
    </tr>

 

<!-- img 태그에 적절한 alt 속성을 기재하여 접근성을 준수 -->
	<tr>
        <td>
            <a href="">
                <img src="btn_confirm.gif" alt="확인">
            </a>
            <a href="">
                <img src="btn_cancel.gif" alt="취소">
            </a>
        </td>
    </tr>

 

 

 

오류사례2. 불충분한 대체 텍스트를 제공한 경우

    <a title="새 창에서 링크 열림" target="_blank" href="링크주소">
        <img src="08236_recruit.jpg" alt="2012 대한민국취업박람회">
    </a>

<!-- alt 속성으로 이미지에 대한 충분한 부연 설명을 제공하여 접근성을 준수  -->
	<a title="새 창에서 링크 열림" target="_blank" href="링크주소">
        <img src="08236_recruit.jpg" alt="2012 대한민국취업박람회,고용노동부주최일시:2012년10월30일(화)~31일(수)10시~17시,장소:aT센터(서초구양재동)제1전시장사이트방문바로가기">
    </a>

 

 

오류사례3. 대체텍스트가 오타로 표기된 경우

    <div id="con_title">
        <h2>
            <img src="/images/sitemap.gif" alt="인사말씀">
        </h2>
        <p>Home &gt; 사이트맵</p>
    </div>

 <!-- 오타로 표기된 대체텍스트를 수정하여 접근성을 준수 -->
 	<div id="con_title">
        <h2>
            <img src="/images/sitemap.gif" alt="사이트맵">
        </h2>
        <p>Home &gt; 사이트맵</p>
    </div>

 

오류사례4. 이미지 버튼에 대체 텍스트를 제공하지 않은 경우

     <div class="search">
        <input type="image" src="/images/submit.gif">
     </div>

<!-- 이미지 버튼에 alt 속성을 표기하여 접근성을 준수 -->    
     <div class="search">
        <input type="image" src="/images/submit.gif" alt="검색">
     </div>

 

오류사례5. 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우

      <ul>
        <li>
            <a href="">
                <img src="/images/dot.gif">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
    </ul>

<!-- 불릿 이미지에 대한 alt를 기재하여 접근성을 준수 -->
	<ul>
        <li>
            <a href="">
                <img src="/images/dot.gif" alt="">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif" alt="">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif" alt="">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
        <li>
            <a href="">
                <img src="/images/dot.gif" alt="">
                2012년 함께 누리는 일자리 한마당
            </a>
        </li>
    </ul>

 

 

오류사례6. 의미 없는 이미지에 대체텍스트를 제공한 경우

      <dl>
        <dt>
            <img src="/images/txt01.gif" alt="종합민원안내">
        </dt>
        <dd>
            <p>
                <img src="/images/img02.gif" alt="민원사람이미지">
                <img src="/images/txt02.gif" alt="민원안내">
            </p>
            <p>
                <img src="/images/img03.gif" alt="여권마크이미지">
                <img src="/images/txt03.gif" alt="여권민원">
            </p>
        </dd>
      </dl>

<!-- 의미 없는 이미지의 대체 텍스트를 삭제하여 접근성을 준수 -->
	<dl>
        <dt>
            <img src="/images/txt01.gif" alt="종합민원안내">
        </dt>
        <dd>
            <p>
                <img src="/images/img02.gif" alt="">
                <img src="/images/txt02.gif" alt="민원안내">
            </p>
            <p>
                <img src="/images/img03.gif" alt="">
                <img src="/images/txt03.gif" alt="여권민원">
            </p>
        </dd>
      </dl>

 

 

오류사례7. longdesc의 파일이 없거나 연결되지 않은 경우

       <p>
        <img src="img1.gif" alt="조직도" longdesc="">
       </p>

  <!-- longdesc의 파일을 연결하여 접근성을 준수 -->
    	<p>
        <img src="img1.gif" alt="조직도" longdesc="html/long1.html">
       </p>

 

 

오류사례8. 이미지맵을 사용한 img 요소에 alt 속성으로 제공하지 않은 경우

         <div>
            <img src="/images/jeosu_map.gif" alt="" border="0" usemap="#Map">
            <map name="Map" id="Map">
                <area shape="rect" coords="169,610,247,634" href="#" alt="경기도">
                <area shape="rect" coords="169,610,247,634" href="#" alt="강원도">
            </map>
         </div>

 <!-- 이미지맵을 사용한 img 요소에 alt 속성을 기재하여 접근성을 준수 --> 
  		<div>
            <img src="/images/jeosu_map.gif" alt="전국지도" border="0" usemap="#Map">
            <map name="Map" id="Map">
                <area shape="rect" coords="169,610,247,634" href="#" alt="경기도">
                <area shape="rect" coords="169,610,247,634" href="#" alt="강원도">
            </map>
         </div>

 

 

오류사례9. 대체 텍스트를 title만으로 제공하는 경우

<input type="image" id="uploadButton" src="/images/btn_upload.gif" title="파일 업로드">

title이 아닌 alt로 기재하여 접근성을 준수
<input type="image" id="uploadButton" src="/images/btn_upload.gif" alt="파일 업로드">

 

 

오류사례10. QR코드의 이동 주소 경로를 대체 텍스트나 설명, 링크 등으로 제공하지 않은 경우

          <p class="qrcode">
            <img src="images/qrcode.gif" alt="QR코드">
          </p>

<!-- QR코드의 이동 주소 경로를 img 태그의 alt로 기재하여 접근성 준수 -->
		 <p class="qrcode">
            <a href="http://m.ryu01258.com">
                <img src="images/qrcode.gif" alt="리베하얀닷컴 모바일 서비스 바로가기 QR코드">
            </a>
          </p>

 

 

오류사례11. 의미있는 배경 이미지의 대체 컨텐츠를 제공하지 않은 경우

.memberLoginBox {
	background:url(/images/bg_memberlogin.gif) no-repeat;
}

           <div>
            <div class="memberLoginBox">
                <fieldset>
                    <legend>회원 로그인</legend>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                    <label for="pwd">비밀번호</label>
                    <input type="password" id="pwd">
                    <input type="image" src="images/btn_login.gif" alt="로그인">                   
                </fieldset>
            </div>
           </div>

<!-- 의미있는 배경 이미지의 대체 컨텐츠를 제공하여 접근성을 준수 -->
.memberLoginBox {
	background:url(/images/bg_memberlogin.gif) no-repeat;
}
.memberLoginBox span {
	position:absolute; left:-3000%;
}
           
           <div>
            <div class="memberLoginBox">
                <fieldset>
                    <legend>회원 로그인</legend>
                    <span>웹 로그인</span>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                    <label for="pwd">비밀번호</label>
                    <input type="password" id="pwd">
                    <input type="image" src="images/btn_login.gif" alt="로그인">                   
                </fieldset>
            </div>
           </div>

 

 

오류사례12. 의미있는 색상 배경 이미지에 대체 콘텐츠를 제공하지 않은 경우

.holiday {
	background:url(/images/bg_holiday.gif) no-repeat;
} 
            <tr>
                <td class="sun">
                    6
                </td>
                <td class="holiday">
                    7
                </td>
                <td>
                    8
                </td>
                <td>
                    9
                </td>
                <td>
                    10
                </td>
                <td>
                    11
                </td>
                <td>
                    12
                </td>
            </tr>

<!-- 의미있는 색상 배경 이미지에 대체 콘텐츠를 제공하여 접근성을 준수 -->
.holiday {
    background:url(/images/bg_holiday.gif) no-repeat;
} 
.holiday span {
    position:absolute; left:-3000%;
}
            <tr>
                <td class="sun">
                    6
                </td>
                <td class="holiday">
                    7
                    <span>휴관일</span>
                </td>
                <td>
                    8
                </td>
                <td>
                    9
                </td>
                <td>
                    10
                </td>
                <td>
                    11
                </td>
                <td>
                    12
                </td>
            </tr>

 

 

+ 실시간 영상이나 CAPCHA의 대체 텍스트는 용도만 제공해도 준수

// Let 'sampleMoviClip' is a MovieClip instance placed on the movie's main timeline
sampleMoviClip.accessibilityProperties = new AccessibilityProperties();
sampleMoviClip.accessiblitiyProperties.name = "올림픽대로 행주대교 방향 CCTV";

 

+ 이미지의 텍스트 정보와 대체 텍스트가 달라도 인식 가능하면 인정

<img src="url" alt="고용노동부">

 

+ 이미지의 설명이 본문에 있으면 대체 콘텐츠로 인정

<img src="url" alt="OO보건소 찾아오시는 길입니다. 이미지 하단에 자세한 내용이 있다.">