대체 텍스트 올바르게 제공하기- 3편
오류 유형으로 살펴보는 웹 접근성 지침
오류유형3. 계층구조적 이미지에 대한 대체 텍스트 제공
우리가 콘텐츠를 접할 때 서술형 텍스트로 된 내용보다는 구조화되었거나 이미지로 표현된 내용이 한층 이해하기 쉬운 경우가 있습니다. 이러한 이유로 웹 콘텐츠 중에는 복잡한 조직의 구조나 단계적 절차 등을 간결한 이미지로 나타낸 예가 많습니다.
하지만 이러한 웹 콘텐츠들을 마크업할 때는 반드시 주의해야 할 점이 있습니다.
조직간의 관계를 표현하지 않은 경우
정부나 기업과 같이 조직체의 구조와 관계를 표현한 조직도 이미지는 각 계층 간의 관계 정보가 중요합니다. 따라서 관계 정보를 사용자가 이해할 수 있도록 올바르게 제공하는 방법을 살펴보도록 하겠습니다.
Example
조직 계층이 있는 이미지
Do Not
<img alt="조직도" src="org.png" usemap="#orgmap">
<map name="orgmap" id="orgmap">
<area id="org1" title="조직" alt="대표이사" href="org_ceo.html;" coords="253,0,607,97" shape="rect">
<area id="org2" title="조직" alt="컨설팅팀" href="org_consulting.html;" coords="1,195,356,292" shape="rect">
<area id="org4" title="컨설팅팀" alt="웹 접근성" coords="1,318,356,397" shape="rect">
<area id="org6" title="컨설팅팀" alt="유아이/유엑스" coords="1,414,356,492" shape="rect">
<!--생략-->
</map>
스크린 리더 음성
"조직도 이미지"
"대표이사 이미지맵 링크"
"컨설팅팀 이미지맵 링크"
"웹 접근성 이미지맵 링크"
"유아이/유엑스 이미지맵 링크"
Do
<img alt="조직도" src="org.png" usemap="#orgmap">
<map name="orgmap" id="orgmap">
<area id="org1" alt="조직의 대표이사" href="org_ceo.html;" coords="253,0,607,97" shape="rect">
<area id="org2" alt="조직의 컨설팅팀" href="org_consulting.html;" coords="1,195,356,292" shape="rect">
<area id="org4" alt="조직의 컨설팅팀 소속 웹 접근성" coords="1,318,356,397" shape="rect">
<area id="org6" alt="조직의 컨설팅팀 소속 유아이/유엑스" coords="1,414,356,492" shape="rect">
<!-- 후략 -->
</map>
스크린 리더 음성
"조직도 이미지"
"조직의 대표이사 이미지맵 링크"
"조직의 컨설팅팀 이미지맵 링크"
"조직의 컨설팅팀 소속 웹 접근성 이미지맵 링크"
"조직의 컨설팅팀 소속 유아이/유엑스 이미지맵 링크"
Do Not에서는 title 속성을 이용하여 조직 구성의 계층 관계 정보를 제공하려고 했습니다. 하지만, title 속성에 추가정보 제공을 지양해야 하는 이유가 있습니다. 위와 같이 스크린리더가 title 속성을 읽지 않거나, 모바일에서는 title 속성의 내용은 사용자에게 전달되지 않을 수 있기 때문입니다. 따라서, Do와 같이 조직 구성 간의 계층 관계 정보는 직접적으로 텍스트에 포함하여 이해하기 편한 순서로 제공해야 온전한 내용을 전달할 수 있습니다.
한 가지 주의해야 할 점은 이미지맵 태그 사용시 조직 구성에 대한 링크 유무에 관계없이 모든 하위 조직을 <area>로 마크업하고, 각 항목에 대한 계층관계를 포함한 정보를 alt 속성을 통해 명확하게 제공해야 한다는 것입니다.
구조를 표현하지 않은 경우
조직도와 같이 구조적인 이미지에 대체 텍스트를 제공할 때 주의해야 할 점이 있습니다. 바로 그 구조를 올바르게 표현하는 것입니다. 위의 이미지를 사례로 들어 살펴보겠습니다.
Do Not
<ul>
<li><a href="org_ceo.html">대표이사</a></li>
<li><a href="org_consulting.html">컨설팅팀</a></li>
<li><a href="org_construction.html">디지털서비스구축팀</a></li>
<!-- 생략 -->
</ul>
Do
<!-- 생략 -->
<li>
<a href="org_consulting.html">컨설팅팀</a>
<ul>
<li>웹 접근성</li>
<li>UI/UX</li>
</ul>
</li>
<!-- 생략 -->
Do Not의 경우 조직의 정보를 왼쪽에서 오른쪽으로 상위조직명만 읽는 순으로 표현하여 정확한 계층구조를 파악하기 어렵습니다. 하지만 Do와 같이 상위조직이 포함하고 있는 하위 조직명까지 구조적으로 표현하여 대체 텍스트를 제공한다면 스크린리더 사용자도 조직의 구조를 명확히 이해할 수 있게 됩니다.
만약 CSS로 표현하기가 꽤 복잡하고 어려운 경우에는 이를 손쉽게 처리할 수 있는 방법이 있습니다.
Best
<img>와 구조적인 코드 혼용
<img src="image/org.png" alt="조직도">
<div class="hidden">
<ul>
<li>
<a href="org_ceo.html">대표이사</a>
<ul>
<li><a href="org_consulting.html">컨설팅팀</a></li>
<ul>
<li>웹 접근성</li>
<li>유아이/유엑스</li>
</ul>
<li><a href="org_construction.html">디지털서비스구축팀</a></li>
<!-- 후략 -->
위와 같이 <img>태그와 구조적인 코드로 정보를 제공하면 대체텍스트도 올바르게 제공될 뿐만 아니라 복잡한 이미지를 CSS로 힘들게 표현할 필요가 없기 때문에 가장 효율적인 방법이라고 할 수 있습니다.
단계나 절차를 표현하지 않은 경우
단계나 절차는 순서에 따른 정보가 존재합니다. 이러한 정보는 서술형으로 풀어서 제공했을 때와 절차에 따라 구조적으로 정보를 제공했을 때 차이가 있습니다. 어떠한 차이가 있는지 대체 텍스트 제공 방법에 따라 사용자의 경험을 자세히 살펴보도록 하겠습니다.
Example
업무처리 절차 이미지
Do 1
<img alt="장애인 차별행위에 관한 진정 및 권리구제 절차. 장애를 이유로 차별 받은 장애인, 그 사실을 알고 있는 사람, 단체가 국가인권위원회에 진정을 접수하면 국가인권위원회에서 조사 후에 시정을 권고합니다. 시정권고를 불이행시 법무부는 직권 또는 피해자의 신청에 의해 시정명령을 내리며, 이에 불이행하는 경우 3천만원 이하의 과태료를 부과할 수 있습니다." src="image/process.png"/>
스크린 리더 음성
"장애인 차별행위에 관한 진정 및 권리구제 절차. 장애를 이유로 차별 받은 장애인, 그 사실을 알고 있는 사람, 단체가 국가인권위원회에 진정을 접수하면 국가인권위원회에서 조사 후에 시정을 권고합니다. 시정권고를 불이행시 법무부는 직권 또는 피해자의 신청에 의해 시정명령을 내리며, 이에 불이행하는 경우 3천만원 이하의 과태료를 부과할 수 있습니다."
Do2
<img alt="장애인 차별행위에 관한 진정 및 권리구제 절차" src="image/process.png"/>
<div class="hidden">
<ol>
<li>장애를 이유로 차별 받은 장애인, 그 사실을 알고 있는 사람, 단체가 국가인권위원회에 진정 접수</li>
<li>국가인권위원회에서 조사 착수</li>
<li>차별사실이 있으면 시정권고</li>
<li>불이행시 직권 또는 피해자의 신청에 의해 법무부에서 시정명령</li>
<li>명령을 어길시 과태료 3천만원 이하를 부과</li>
</ol>
</div>
스크린 리더 음성
"장애인 차별행위에 관한 진정 및 권리구제 절차 이미지"
"목록 시작 개수 5 (1의 1)"
"1. 장애를 이유로 차별 받은 장애인, 그 사실을 알고 있는 사람, 단체가 국가인권위원회에 진정 접수"
"2. 국가인권위원회에서 조사 착수"
"3. 차별사실이 있으면 시정권고"
"4. 불이행시 직권 또는 피해자의 신청에 의해 법무부에서 시정명령"
"5. 명령을 어길시 과태료 3천만원 이하를 부과"
Do1과 같은 경우에는 서술형으로 정보를 매끄럽게 제공할 수 있지만, 정보가 한 번에 쏟아져서 듣는 사람 입장에서는 정보를 이해하기 힘들 수 있습니다.
이에 대한 대안으로 Do2와 같이 구조적으로 대체 텍스트를 제공한 경우에는 사용자의 조작에 따라 정보를 받아들일 수 있다는 장점이 있지만, 제공되는 정보가 사용자가 듣기에 매끄럽지 못할 수도 있습니다.
따라서 제공하려는 콘텐츠에 따라 내용이 짧은 경우에는 Do1과 같이 제공하고, 내용이 긴 경우에는 Do2와 같이 제공하는 것이 좋습니다.
요약
이처럼 계층구조나 절차를 나타내는 이미지의 경우, 구성요소 간에 관계를 알 수 있도록 alt속성에 직접적으로 관계정보를 포함하여 텍스트를 제공하거나, 간적접으로 구조적인 코드를 사용하여 온전한 콘텐츠의 의미를 전달해야 합니다.
이렇게 대체 텍스트 제공은 사용자 관점에서 맥락상 의미를 온전히 파악할 수 있는지를 확인하고, 보다 자연스러운 정보 제공이 이뤄질 수 있도록 노력해야 합니다.
이번 편에서는 조직도나 업무 처리 절차 이미지처럼 관계 정보가 내포된 이미지 요소의 대체 텍스트를 올바르게 제공하는 방법에 대해 살펴 보았습니다.
다음 편에서는 배경 이미지가 의미 있는 정보를 제공하지만, 이에 대한 대체 텍스트가 없는 경우를 사례를 통해 살펴 보겠습니다.
