텍스트 아닌 콘텐츠(non-text contents)중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어 있어야 한다.

WAI에서 여기에 해당하는 항목은 다음과 같습니다.

1.1 모든 비-텍스트 콘텐츠에 대해서는 대체 텍스트를 제공해야 한다.(예를 들어 "alt", "longdesc" 등 을 쓰거나 또는 요소 내의 콘텐츠에 직접 써야 한다.) 이것은 다음과 같은 요소들을 포함한다: 이미지, (기호를 포함하여) 그래픽으로 나타낸 텍스트, 이미지 맵의 어떤 영역, 애니메이션(예: 애니메이션 GIF), 애플릿, 프로그램 객체, 아스키 아트, 프레임, 스크립트, 리스트 불릿으로 쓰인 이미지, 공간을 확보하기 위해 쓰인 빈 이미지(spacers), 그래픽 버튼, (사용자와의 상호작용에 의해 또는 자동으로 플레이되는) 사운드, 독립적인 오디오 파일, 비디오의 오디오 트랙, 비디오.

이 지침에서 주의해야 할 점은 alt text를 사용할 때 대상의 의미와 목적을 충분히 설명할 수 있어야 한다는 것입니다. 즉 형식적인 삽입을 피해야 한다는 것입니다. 따라서 만약에 긴 설명이 필요하다면 long desc을 사용하고 이조차도 너무 길다고 생각한다면 이 설명이 담겨있는 다른 링크를 longdesc 속성에 포함시키는 것도 한 방법입니다.

사용예

■ 이미지 링크를 사용하는 경우


<a href="http://www.coolcheck.co.kr/index.asp">
<img src="/image/sub_logo.gif" width=234 height=45 border=0 alt="CoolCheck Logo"></a> 일반적인 스크린 리더나 보이스 리더에서는 위와 같은 경우 "[CoolCheck Logo]", "Link CoolCheck Logo", "Link Graphic CoolCheck Logo" 라고 읽어주게 됩니다. alt 텍스트가 없으면 <a> 태그의 href 속성을 읽거나 <img> 태그의 src 속성을 읽기 때문에 href 또는 src 값이 이미지 링크의 의미를 전달할 수 있다고 볼 수 없습니다.

■ 이미지 버튼을 사용하는 경우



진단 URL : <INPUT id="url" size=55 value="http://" name="URL" alt="주소입력">
<INPUT id="sub" type="image" src="//image/check_bimage.gif" width=68 height=25 value="Check!" name="output" alt="진단시작"> 버튼에 alt 속성이 없을 경우 스크린 리더나 보이스 리더에서는 value 값을 찾게 되고 value 값도 없는 이미지 버튼인 경우 src 값을 읽어주게 되므로 리더중에는 "이미지 버튼 : //image/check_bimage.gif" 이런식으로 읽어지게 됩니다.
이것은 버튼의 의미를 정확히 전달할 수 없으며, value 또는 alt 값을 넣지 않는 경우도 발생하므로 규정을 준수하여 정확한 정보를 제공해야 합니다.

■ 데코레이션 이미지와 포멧팅 이미지를 사용하는 경우

웹 진단 서비스
소개
진단 항목

<span class="menu">
    <img src="/image/m_dot.gif" width="10" height="10" alt="불릿">
        <span id="s_0101" class="menu" style="color:#000000; cursor:auto;">웹 진단 서비스</span>
</span><br>
<span class="menu">
    <img src="/image/sub_dot.gif" width="10" height="10" alt="불릿">
    <a class="title" href="/service/service_0102.asp" title="소개">
        <span id="m_0102">소개</span>
    </a>
</span><br>
<span class="menu">
    <img src="/image/sub_dot.gif" width="10" height="10" alt="불릿">
    <a class="title" href="/service/service_0103.asp" title="진단 항목">
        <span id="m_0103">진단 항목</span>
    </a>
</span><br>

               

위의 예처럼 이미지를 단순히 데코레이션용으로 사용한다면 alt 값을 짧게 의미를 전달할 정도로 작성해 줘야 합니다. 또 다른 예로 링크로 연결될 페이지에 대한 설명 텍스트가 같은 <a>안에 포함되어 있다면
<a href=".."><img src="..." alt="테스트">테스트</a>
스크린 리더나 보이스 리더가 중복으로 "link 테스트","link 테스트" 읽게 됩니다. alt 값을 null 값(alt="")으로 처리하게 되면 "link","link 테스트" 로 읽어 중복을 피할수 있지만 이용자의 판단을 요구하는 부분이므로 가급적 alt 값은 넣어 주는것이 좋습니다.

■ 이미지 맵을 사용하는 경우

<img src="/image/index_topmenu.gif" width=337 height=24 border=0 alt="상단 검색메뉴"     usemap="#topnavi">
<map name="topnavi">
    <area href="/index.asp" alt="Cool Check" shape="rect" coords="0,0,41,23">
    <area href="/service/service_0101.asp" alt="서비스 종류" shape="rect" coords="41,0,125,23">
    <area href="/directory/directory.asp" alt="사이트 평가" shape="rect" coords="125,0,209,23">
    <area href="/document/board/board01.asp?code=board01&btitle=웹%20관련%20뉴스" alt="뉴스 및 자료" shape="rect" coords="209,0,275,23">
    <area href="/help/faq.asp" alt="도움말" shape="rect" coords="275,0,336,23">
</map>

위와 같은 경우 alt 값은 짧고 간결한 문구로 써야합니다.
예를 들어 "도움말"의 내용을 상세히 알려 주기 위해 "FAQ 및 가이드, 용어집, QA" 이렇게 작성할 수 있으나 스크린 리더나 보이스 리더에서 듣는 시간을 단축시키기 위해 짧은 alt 값을 사용한 것입니다.
CoolCheck!™ 사이트의 경우 상단 검색메뉴는 텍스트로만 이루어져 있습니다. 페이지의 사이즈를 줄여주어 저속 모뎀 기준으로 다운로드 시간을 조금 줄여줄 수 있습니다.

■ 차트와 같은 많은 정보를 전달하는 이미지를 사용하는 경우

주간 접속통계

텍스트 화면

<img src="/image/chart_bar.gif" width=373 height=293 border=0 alt="주간 접속통계"
    longdesc="week_diagnosis.html">
<a href="javascript:Win_open(\'week_diagnosis.html\');" title="week_diagnosis.html">텍스트 화면</a>

위와 같이 차트로 구성되어 있는 이미지의 경우 포함되어 있는 정보가 alt 텍스트의 짧은 문구로 처리하기에는 많습니다.
이 경우 longdesc(long description) 속성으로 처리되지만 브라우저 종류에 따라 longdesc 속성을 지원하지 않는다면 별도의 텍스트로 이루어진 페이지를 제공해야 합니다.

WAI에서 대응하는 항목은 다음과 같습니다.

1.4 시간을 기반으로 한 멀티미디어 프리젠테이션(예를 들면 동영상이나 애니메이션)과 그에 상응하는 대체물 (예를 들면 시각적인 트랙에 대한 캡션(텍스트 자막)이나 음성 설명)은 동기화시켜야 한다.

이 지침과 관련하여 특기할 만한 점은 인터넷을 통하여 MS사의 파워포인트 프리젠테이션을 제공할 때 음성 설명이 없는 경우 alt text를 제공해야 한다는 것입니다. 파워포인트 2000 이상에서는 alt text를 쉽게 입력할 수 있습니다. 즉 서식 메뉴에서 \'그림\'을 누르고 \'웹\' 탭을 누른 다음 대체 텍스트(alt text)를 입력하면 됩니다.

단순히 페이지의 배경 음악으로 처리되는 오디오인 경우 alt 텍스트를 넣어줄 필요는 없습니다.
하지만 뉴스를 다루는 사이트와 같이 정보 전달을 목적으로 사용된 중요한 오디오, 비디오 컨텐츠는 보완해줄 자막이나 원고 같은 텍스트 링크를 제공하여 액세서빌리티를 향샹시킬 수 있습니다.

또한 중요시 되는 것으로 실시간으로 진행되는 오디오 방송의 경우 방송후에 제공되는 원고 만으로는 접근성을 충족시켰다고 할 수 없으므로 실시간 자막 방송등의 방법을 찾아야 합니다. 현재 이런 부분에 대한 활발한 기술 개발이 이루어지고 있으며 향후 효과적인 컨텐츠 전달이 이루어지리라 판단됩니다.

이에 대응하는 WAI의 지침은 다음과 같습니다.

2.1 색깔과 함께 전달되는 모든 정보는 색깔이 없더라도 맥락이나 다른 마크업에 의해 구별 가능해야 한다.

  이 지침에서 오해하지 말아야 할 것은 동 지침이 색상의 선택을 제한하는 것이 아니라는 점입니다. 동 지침의 구체적인 사례를 들어보자면 예컨데 회원가입 폼 작성시 "빨간색으로 표시된 항목은 필수 기재 사항입니다"라고 적는 경우입니다. 이런 경우엔 <strong>이나 <em> 태그를 사용하는 등의 방법을 쓰는게 좋습니다.
  그리고 이미지 안에 색상으로만 액션을 표시하는 것도 피해야 합니다. 불가피한 경우 적당한 alt text 문구를 넣어서 혼란을 방지하도록 하는 것이 좋습니다.

■ 색상으로 의미를 전달한 잘못된 예

※ 아래의 입력 사항을 정확히 기재해 주시기 바랍니다. 확인후 빠른 시간내에 연락드리도록 하겠습니다.
※ 빨간색으로 표시된 항목은 필수 기재 사항입니다

사이트명(도메인)
신청자명(기관명)
이메일 주소
전화 번호
서비스 신청

    

위와 같은 경우는 일부 보이스 리더는 색상 구분을 하지 못하므로 어떤 항목이 필수 기재 사항인지 알 수가 없습니다. 이런 문제는 특수 문자를 사용하거나 텍스트를 강조(<strong>, <em>)하여 그 의미를 파악할 수 있게 해야 합니다. 아래는 올바른 사용예입니다.

※ 아래의 입력 사항을 정확히 기재해 주시기 바랍니다. 확인후 빠른 시간내에 연락드리도록 하겠습니다.
※ * 표시된 강조된 항목은 필수 기재 사항입니다.

이미지 맵 기법이 필요할 경우에는 클라이언트측 이미지 맵을 사용하거나 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍스트로 구성된 대체 콘텐츠를 제공해야 한다.

콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.