현재 페이지 위치

Home> 나눔> 웹접근성 가이드> PC/모바일 웹 접근성 체크리스트

PC/모바일 웹 접근성 체크리스트

체크리스트 보기

1.1.1 이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음.
  • 스크린리더나 점자정보단말기, VoiceOver, TalkBack은 <img>나 <input type="image"> 에 제공된 alt속성의 값을 읽어줌.
  • alt속성을 제공하지 않으면 파일명을 읽어주어 어떤 이미지인지 전혀 알 수 없기 때문에 반드시 alt속성을 제공해야 함.
  • 또한 불충분하거나 오타를 제공한다면 정확한 정보를 제공받지 못하기 때문에 이미지와 최대한 동일한 내용을 제공해 주어야 함.
  • 의미없는 불릿이나 아이콘등의 이미지에 대체 텍스트를 제공하면 오히려 쾌적한 정보 이용에 방해가 되므로 alt속성을 빈값으로(alt="") 제공해야 함.

오류 유형

<img>, <input type="image"> 등 이미지 요소에 alt 속성을 제공하지 않거나 불충분하거나 오타로 표기된 경우

오류 예시
이미지에 alt속성을 제공하지 않은 경우
참고 이미지
해결 방법

해당 이미지에 alt속성을 제공해야 함.

<img src="..." alt="사전도 스마트폰에서는 네이버 앱으로! 자세히보기">
오류 예시
이미지에 alt속성을 제공했으나 빈값으로 제공한 경우
참고 이미지
해결 방법

해당 이미지와 동일한 내용의 대체 텍스트를 제공해야 함.

<img src="..." alt="신한금융투자 런던투어 이벤트 주식매매하고 런던가자!">
오류 예시
이미지의 내용중 일부만 대체 텍스트로 제공한 경우
참고 이미지
해결 방법

"네이버를 즐기는 가장 스마트한 방법!" 대신"네이버를 즐기는 가장 스마트한 방법! 네이버me 핵심 기능 보기"와 같이 이미지의 모든 내용을 대체 텍스트로 제공해야 함.

<img src="..." alt="네이버를 즐기는 가장 스마트한 방법! 네이버me 핵심 기능 보기">

블릿 이미지 등 의미 없는 이미지에 alt 속성을 제공하지 않거나 공백이 아닌 불필요한 대체 텍스트를 제공한 경우

오류 예시
블릿 이미지와 같이 의미없는 이미지에 대체 텍스트를 제공한 경우
참고 이미지
해결 방법

의미 없는 이미지에는 빈 alt 속성이 제공되어야 함

<img src="..." alt="">

<area> 요소에 대체 텍스트를 바르게 작성 했더라도 <img> 요소에 alt 속성을 제공하지 않거나 longdesc 속성을 사용하는 이미지 자체에 alt를 제공하지 않은 경우

오류 예시
<area> 요소에 대체 텍스트를 바르게 작성했지만 <img> 요소에 alt 속성이 빈 값으로 제공됨.
참고 이미지
해결 방법

alt 속성에도 이미지에 대한 대체 텍스트를 추가해야 함

<img src="img_organization01.gif" alt="조직도">
오류 예시

<img> 요소에 longdesc 속성을 제공하였으나 alt 속성이 제공되지 않은 경우

<img src="img_organization01.gif" alt="" longdesc="organization.html">
해결 방법

alt 속성에 이미지에 대한 설명을 추가해야 함

<img src="img_organization01.gif" alt="조직도" longdesc="organization.html">

이미지맵 형태로 조직의 관계나 프로세스 등 복잡한 이미지의 대체 텍스트 제공 시 <area>로 각 항목만을 나열하고 항목 간의 관계를 표현하지 않은 경우

오류 예시
조직도의 각 항목이 <area> 요소에 대체 텍스트로 제공되었으나 각 항목 간의 관계가 표현되지 않음
참고 이미지
해결 방법

각 항목 간의 관계를 숨김 대체 콘텐츠로 제공하거나 longdesc로 대체 콘텐츠를 제공해야 함.


숨김 대체 텍스트로 제공하기
<img src="img_organization01.gif" alt="본청조직도">
<p class="blind">
중소기업청장을 기준으로 중소기업창장의 대변인이 있으며 중소기업청장 아래 차장이 있다. 차장을 기준으로 그 아래에 감사담당관과 운영지원과, 기획조정관이 있다. 기획조정관에는 기획재정담당관, 행정업무담당관, 고객정보화담당관, 비상계획담당관이 있다.</p>
longdesc속성으로 대체 콘텐츠 제공하기
<img src="img_organization01.gif" alt="본청조직도" longdesc="org.html">
<!-- org.html -->
<p>중소기업청장을 기준으로 중소기업창장의 대변인이 있으며 중소기업청장 아래 차장이 있다. 차장을 기준으로 그 아래에 감사담당관과 운영지원과, 기획조정관이 있다. 기획조정관에는 기획재정담당관, 행정업무담당관, 고객정보화담당관, 비상계획담당관이 있다. ...</p>

대체텍스트를 title 속성만으로 제공하는 경우

오류 예시
<img src="loading.gif" alt="" title="로딩중">
해결 방법

title 속성은 툴팁 표시 등 부가적인 편의 기능에 불과하기 때문에 title값을 제공했다 하더라도 반드시 alt속성에 대체 텍스트를 제공해야 함.

<img src="loading.gif" alt="로딩중" title="로딩중">

QR코드의 이동 주소 정보 등을 대체텍스트 또는 설명, 링크 등으로 제공하지 않은 경우

오류 예시
naver.com 바로가기 QR코드의 대체 텍스트가 "qrcode"로 잘못 제공됨
참고 이미지
해결 방법

"naver.com 바로가기 QR코드" 등으로 대체 텍스트가 수정되어야 함

<img src="..." alt="naver.com 바로가기 QR코드">

배경 이미지가 의미 있는 정보를 제공하고 있으나 대체 콘텐츠를 제공하지 않은 경우

오류 예시
"클릭 랭킹 1등"이라는 정보를 담고 있는 이미지가 배경 이미지로 제공되었으나 대체 콘텐츠가 제공되지 않음
참고 이미지
해결 방법

의미있는 이미지를 배경으로 사용했을 때에도 대체 콘텐츠를 적절하게 제공해야 함

<span class="ico_best">Best 01</span>

하나의 링크내에 설명문구와 이미지의 대체 텍스트를 중복해서 제공한 경우

오류 예시
"김수현에게 이런 면이"라는 오픈캐스트 항목 이미지의 대체 텍스트가 함께 제공된 텍스트와 중복됨.
참고 이미지
해결 방법

하나의 링크내에 설명문구와 이미지의 대체 텍스트를 중복 제공한 경우 이미지의 alt값을 빈값(alt="")으로 제공해야 함.
하단에 제공된 사례와 같이 이미지와 텍스트에 각각의 링크가 걸려있는 경우, 링크가 이미지와 텍스트를 한꺼번에 감싸도록 수정하는 것이 바람직함.
또한 불필요한 title은 제공하지 않는 것이 바람직함.

<a href="..."><img src="" alt="">김수현에게 이런 면이</a>

플래시 등 부가 어플리케이션이 의미 있는 정보를 제공하고 있으나 대체텍스트를 제공하지 않은 경우

오류 예시
"특수본"이라는 영화 광고 플래시 무비에 대체텍스트가 제공되지 않음
참고 이미지
해결 방법
시각적으로 인식할 수 있는 영화 제목, 개봉 정보 등의 내용이 대체 콘텐츠로 제공되어야 함.
전맹, 저시력인도 플래시의 wmode가 window이고 플래시에서 생성된 객체(버튼, 무비클립)의 name 및 description 속성에 대체 텍스트가 제공되었다면 스크린리더나 점자정보단말기로 읽을 수 있음.

아이콘에 대체 텍스트를 제공하고 있으나 그 의미를 충분하게 전달하지 못한 경우

오류 예시
네이버 마일리지 가맹점임을 표시하는 아이콘의 대체 텍스트가 "마일리지"로 제공됨.
참고 이미지
해결 방법
"네이버 마일리지 가맹점" 등 아이콘의 의미를 충분하게 전달할 수 있는 대체 텍스트를 제공하는 것이 바람직함.

모바일 브라우저에서 제공하는 이미지의 대체 텍스트가 잘못 제공된 경우

오류 예시
네이버 모바일 웹페이지에서 "인식검색, 지역검색 접기" 이미지가 "지역검색 접기"로 제공 됨
참고 이미지
해결 방법
해당 이미지의 대체텍스트를 "인식검색 및 지역검색 접기"로 수정하여 해당 이미지에 대한 대체텍스트를 올바르게 제공하는 것이 바람직함.

바른 예시

사진 예시

참고 이미지
바른
대체 텍스트
<img src="b.png" alt="사진"> (X)
<img src="b.png"alt="김수현"> (O)

정보 전달을 위한 아이콘 예시

참고 이미지
바른
대체 텍스트
<img src="a.png" alt="엑셀로 저장">
<img src="b.png"alt="계산기">
<img src="c.png" alt="인쇄">

그래프 예시

참고 이미지
바른
대체 텍스트
<img src="g.png" alt="그래프"> (X)
<img src="g.png"alt="일상생활의 소모 칼로리 빨리걷기110kcal 자전거타기90kcal 청소70kcal 요리하기70kcal 잠자기25kcal 춤추기150kcal 목욕85kcal ">(O)

주의 사항

화면에 표시된 이미지의 텍스트 정보와 대체 텍스트가 동일하지 않더라도 해당 콘텐츠를 인식하는데 문제가 없을 경우는 오류 아님

오류 아님 예
사업소개 이미지의 "BUSINESS INTRODUCTION"이라는 영문이 대체 텍스트에는 누락되었으나 콘텐츠 인식에 문제가 없다고 판단할 수 있으므로 오류로 평가하지 않음
참고 이미지

평가 방법

  • 이미지가 전혀 사용되지 않은 경우 해당 없음 처리

이미지의 대체 텍스트 유무 확인

평가 도구
N-WAX
평가 방법
"1.1.1 대체 텍스트(img)" 항목에서 모든 이미지에 대체 텍스트가 바르게 제공되었는지 확인. 이 때, (hidden) 으로 표시되어 눈에 보이지 않는 요소도 모두 확인.
[Case.1] alt값이 제공된 경우, 셀이 하얀색으로 표시되며 이미지에서 제공하고 있는 텍스트와 동일한 값으로 제공되었는지 확인.
[Case.2] alt 속성은 선언되었지만 값이 없을 경우, 셀이 노란색으로 표시되며 빈 alt가 맞는지 확인.
[Case.3] alt 속성이 선언되지 않은 경우, 셀이 빨간색으로 표시되며 오류 처리.

의미있는 이미지가 배경 처리 된 경우의 대체 텍스트 유무 확인

평가 도구
N-WAX
평가 방법
"1.1.1 대체 텍스트(bg)" 항목에서 의미있는 이미지가 배경 이미지로 제공된 경우를 찾아 대체 텍스트가 바르게 제공되었는지 확인. 이 때, (hidden) 으로 표시되어 눈에 보이지 않는 요소도 모두 확인.
[Case.1] 의미없는 이미지가 배경 처리된 경우는, 스킵
[Case.2] 의미있는 이미지가 배경 처리된 경우, 이미지에서 제공하고 있는 텍스트와 동일한 값으로 제공되었는지 확인.

플래시 등 부가 어플리케이션의 대체 텍스트 유무 확인

평가 도구
UIA Verify
평가 방법
"Mode" - "Focus Tracking" 메뉴 항목을 활성화한 후, 웹 애플리케이션을 마우스로 선택하면 툴에 해당 웹 애플리케이션의 접근성 정보(대체 텍스트)가 표시됨. 접근성 정보를 보고 시각적으로 인식할 수 있는 정보들이 접근성 정보로도 인식할 수 있는지 판단.
참고 이미지


플래시 무비의 접근성 정보가 제공되지 않은 예



플래시 무비의 접근성 정보가 제공된 예

모바일 환경에서 이미지/배경이미지/플래시 등 부가어플리케이션의 대체텍스트 유무 확인

평가 도구
User Agent Switcher(파이어폭스 부가기능), N-WAX, UIA Verify
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX, UIA Verify를 활용하여 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법