• 이미지는 표현하고자 하는 영역 외에 불필요한 여백을 지니지 않도록 컷팅 합니다. 화면 배치를 위한 여백, 또는 링크의 마우스 접근 영역을 확장하려는 경우에는 CSS를 이용합니다.
  • (△)
    
  • (O)
    
  • (△)
    
  • (O)
    
• 클릭 가능한 버튼의 최소 크기는 너비와 높이가 18px 이상이어야 합니다. 버튼 이미지의 너비와 높이가 18px 미만인 경우 CSS를 이용하여 클릭 가능한 영역을 확장합니다. 클릭 가능한 영역이 다른 UI와 겹치거나 인라인 형식으로 존재하는 경우에는 예외가 허용됩니다. 손의 사용능력이 원할하지 못한 사람과 모바일 브라우징 장치의 접근성을 향상시켜줍니다.
  (X)
  <a href="#url" class="btn"><img src="img/btnCloseX.gif" alt="닫기" width="15" height="14" /></a>
  
  (O)
  .btn{ display:block; width:15px; padding:2px;}
<a href="#url" class="btn"><img src="img/btnCloseX.gif" alt="닫기" width="15" height="14" /></a>
• 하나의 이미지에 포함된 대체텍스트의 분량이 약 200자를 초과하는 경우 200자 내외의 의미 단위로 자릅니다. 이때 대체텍스트는 최대한 원문과 동등하게 제공하되 내용을 이해하는데 무리가 없는 수준에서 생략할 수 있습니다.
  

• 이미지는 원문과 동등한 설명력을 지닌 대체 텍스트를 제공해야 합니다.
  
<img src="naver.gif" width="85" height="25"> (X) 이미지가 로드되지 않거나 시각을 사용할 수 없는 상황에 대응하지 못함
<img src="naver.gif" width="85" height="25" alt="네이버"> (X) 원문과 대체 텍스트 표기가 다름
<img src="naver.gif" width="85" height="25" alt="naver"> (X) 대소문자 표기가 다름
<img src="naver.gif" width="85" height="25" alt="NAVER 로고"> (X) '로고' 라는 설명 불필요
<img src="naver.gif" width="85" height="25" alt="NAVER"> (O) 원문과 정확히 일치
• 썸네일 이미지에는 제목에 해당하는 대체텍스트를 제공합니다. 제목에 해당하는 텍스트가 존재하지 않는 썸네일은 빈 alt 속성을 사용하고 대체텍스트 표기는 생략할 수 있습니다.
  
<img src="thumb123456.gif" width="73" height="102" alt="네이버 스토리"> (O)
<img src="thumb123456.gif" width="73" height="102" alt=""> (△)
• 상징적인 의미를 포함하고 있지만 문자로 표현되지 않는 이미지는 배경 아닌 전경으로 마크업 하고 그것이 무엇을 의미하고 있는지 대체 텍스트로 기술해 줍니다.
  <img src="ico_up.gif" alt="순위상승" width="8" height="10">
<img src="ico_na.gif" alt="순위변동없음" width="8" height="2">
<img src="ico_down.gif" alt="순위하락" width="8" height="10">
<img src="btn_stop.gif" alt="정지" width="13" height="12">
<img src="btn_prev.gif" alt="이전" width="13" height="12">
<img src="btn_next.gif" alt="다음" width="13" height="12">

alt 텍스트는 본래 이미지가 출력되지 않는 경우에만 브라우저에 시각적으로 표시되어야 하는데 Internet Explorer는 이미지에 마우스를 올리는 경우에도 alt 값을 툴팁 형식으로 표시하고 있어서 이미지에 포함된 문자를 시각적으로 인지하는데 오히려 방해가 되기도 합니다. 이러한 경우에는 title 속성 값이 alt 속성 값보다 우선순위를 가지고 툴팁으로 표시되는 브라우저 특성을 이용하여 alt 값에 원문과 동등한 수준의 대체텍스트를 제공하고 title 속성을 사용하되 값을 비워둡니다. 이런 경우 Internet Explorer는 alt 대신 title 속성의 값을 툴팁으로 표시하려고 하는데 title 속성의 값이 비어 있으므로 결국 툴팁을 표시하지 않게 됩니다.

<img src="main_info.gif" title="" alt="01.개발자 가이드를 꼭 지켜주세요. 위젯 제작은 위젯 API개발자 가이드에 맞추어 주셔야 합니다. 개발자 가이드에서 상세한 위젯 API정보 및 샘플 위젯을 다운받아 참고 할 수 있습니다. 개발자 가이드 보기" width="382" height="181" />

PNG-24 포멧의 '투명/반투명' 표현은 Internet Explorer 5.x~6.x 버전에서 회색으로 표시되는 버그가 있습니다. 따라서 아래와 같이 IE Hack 코드를 제공합니다. 단, 아래와 같은 방법이 배경이미지 표현에 사용되는 경우 배경이미지는 repeat, background-position 속성을 가질 수 없게 됩니다. 또한 배경이미지 처리된 요소 안쪽에 a 요소가 포함되는 경우 a 영역에 마우스가 정상적으로 접근할 수 없는 문제가 발생할 수 있으므로 a 요소를 PNG-24 배경이 적용된 요소 안쪽에 마크업하는 방법은 가능한 피합니다. 단, PNG-24 이미지가 배경으로 사용되고 불가피하게 자식 요소로서 a가 등장하는 경우 PNG-24 배경처리된 요소에 position 속성을 제거함으로서 이 문제를 해결할 수 있습니다.

• 배경이미지에 PNG-24 포멧을 사용하는 경우 Hack과 IE전용 Filter를 동시에 사용하여 아래와 같이 작성 합니다. 표준계열 브라우저는 정상적으로 배경을 처리하지만 IE 5.5~6 브라우저는 배경대신 filter로 이미지를 출력 합니다.
  .selector{background:url(png24.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png24.png', sizingMethod='crop');}
• 전경이미지에 PNG-24 포멧을 사용하는 경우 PNG-24를 정상적으로 표시하도록 작성된 IE 전용 자바스크립트 'iepngfix.htc' 파일을 사용하여 아래와 같이 작성 합니다. IE 5.5~6 브라우저에서 기능하며 iepngfix.htc 파일은 크로스 도메인이 되지 않으므로 같은 도메인 네임을 지닌 서버에 있어야 합니다. 따라서 아래 예제로 제시된 코드는 'naver.com' 도메인을 지닌 페이지에서만 사용할 수 있습니다. hangame.com 에서 사용하기를 원하시면 hangame.com 서버에 iepngfix.htc 파일을 업로드 하시면 됩니다. iepngfix.htc 내려받기.
  

  .selector{_behavior:url(http://static.naver.com/common/iepngfix/iepngfix.htc);}


• 08.02.26 : PNG-24 사용 가이드에 데모 추가.