[H45] 이미지에 대한 자세한 정보를 제공하는 longdesc속성

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H45.html

---

longdesc속성은 이미지에 대한 내용 및 기능을 자세하게 알려주는 역할을 합니다.

---

기술설명

이 기술의 목적은 이미지의 대체 텍스트 만으로는 이미지의 기능이나 정보를 충분히 전달하지 못하는 경우, longdesc속성으로 이미지의 추가적인 정보를 제공하는 것입니다.

longdesc속성에 URL(인터넷 주소)를 사용하는 경우, 해당 주소에서는 이미지에 대한 자세한 설명이 제공되어야 합니다.

 

제작자는 이미지를 설명하는 텍스트를 별도의 문서로 제공할 수 있습니다.

또는 이미지를 포함하고 있는 페이지 내에서 텍스트로 이미지의 설명을 제공할 수도 있습니다.

 

이미지에 대한 설명의 별도의 문서로 제공하는 경우, 동일한 이미지를 여러 번 사용할 때 편하며, 원본 문서 내에서 시각적 혼란을 추가하지 않으며, 설명의 끝점을 사용자가 명확하게 알 수 있다는 장점이 있습니다.

 

이미지를 포함한 페이지 내에서 설명을 제공하는 경우, 모든 사용자가 해당 설명에 접근할 수 있다는 장점이 있습니다.

 

페이지 내에서 설명을 제공하는 방식이나 별도의 페이지에서 여러 개의 설명을 제공하는 방식에는 한계는 있습니다.

이미지에 대한 자세한 설명이 어디서 끝나는지, 종료 위치를 명확하게 알 수 없다는 것입니다.

제작자는 설명의  종료 위치를 정확히 알 수 있게 만들어 문제를 해결해야 합니다.

 

 

예시

[예제1] 이미지에 대한 설명을 별도의 문서로 제공하는 경우

<p><img src="chart.gif" alt="복잡한 구성의 차트" longdesc="chartdesc.html"/></p>

 

 

[예제2] 페이지 내에서 설명을 제공하는 경우

<img src="./graph.png" alt="가입자 수에 대한 선 그래프" longdesc="thisPage.html#desc">
<div id="desc">
    <h3>자세한 설명: 가입자 수에 대한 선 그래프</h3>
    ... 선 그래프에 대한 설명 ...
    <p>자세한 설명 끝.</p>
<div>

 

 

자료

HTML5 이미지 설명 확장

미네소타 덜루스 대학교 런던 도구 목록

 

 

관련기술

G73: 텍스트가 아닌 콘텐츠 바로 옆에 있는 링크와 함께 다른 위치에 긴 설명 제공

G74: 짧은 설명에서 긴 설명의 위치를 ​​참조하여 비텍스트 콘텐츠 근처에 긴 설명을 텍스트로 제공

G92: 동일한 목적을 달성하고 동일한 정보를 제공하는 비텍스트 콘텐츠에 대한 긴 설명 제공

G94: 비텍스트 콘텐츠와 동일한 목적을 갖고 동일한 정보를 제공하는 비텍스트 콘텐츠에 대한 짧은 텍스트 대체 제공

 

 

점검절차

1. img요소에 longdesc속성이 있는지 확인합니다.

2. longdesc속성 값이 URI인지 확인합니다.

3. 해당 URI의 페이지가 이미지에 대한 자세한 설명을 포함하고 있는지 확인합니다.

---

https://link.coupang.com/a/cl4UpZ

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프

https://link.coupang.com/a/cl4UBK

Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡

https://link.coupang.com/a/cv9oir

[삼성전자 공식파트너] 갤럭시북4 15.6 코어I5 13세대 가성비 노트북 한컴오피스팩 동봉 - 노트북 |

*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

나의 정리

longdesc속성은 이미지에 대한 내용 및 기능을 자세하게 알려주는 역할을 합니다.

예를 들어 복잡한 그래프 이미지가 있습니다. 이 이미지에 있는 그래프의 수치와 설명을 제공해 주어야 하는데, 짧은 설명으로 대체 텍스트를 제공하는 alt 속성으로는 긴 설명을 담을 수 없습니다.

그래서 길고 자세한 설명을 입력할 수 있는 longdesc속성이 필요한 것입니다.

 

longdesc의 속성 값은 URl로, 해당 이미지에 대한 자세한 설명을 담고 있는 페이지의 경로를 적어주면 됩니다.

설명을 담고 있는 콘텐츠가 다른 페이지에 있다면 해당 URI를 입력하면 됩니다.

만약 해당 이미지와 그 이미지를 설명하고 있는 콘텐츠가 같은 페이지에 있는 경우에는 설명의 콘텐츠가 있는 요소의 id 값을 넣어주면 됩니다.

 

활용 예제를 보겠습니다.

이미지에 대한 설명을 담은 콘텐츠가 다른 페이지에서 제공하는 경우,

<p><img src="graph.gif" alt="2025년 5월 가계부" src=“accountBook2505.html"/></p>

longdesc 속성으로 accountBook2505.html파일을 가리키고 있습니다. 즉 chart.gif 이미지에 대한 자세한 설명은 accountBook2505.html파일 안에 있다는 것입니다.

 

이미지에 대한 설명을 담은 콘텐츠와 해당이미지가 같은 페이지에 있는 경우,

<img longdesc="#desc" alt="2025년 5월 가계부" src="graph.gif">
<div id="desc">
    <h3>2025년 5월 가계부</h3>
    <p>10일 마트에서 10만원, 15일 핸드폰 결제 55,000원, 20일 외식 100,00원을 사용했습니다.</p>
    <p>5월 가계부 내역 끝</p>
<div>

 

 페이지 내에서 해당 설명으로 이동할 수 있도록 아이디 값을 입력해 줍니다.

 

사용자가 헛갈리지 않도록 '이미지를 설명하는 콘텐츠'의 '해당 이미지에 대한 설명이 끝나는 부분'에 '설명이 끝났다'는 안내문을 넣어 주도록 합니다. 이렇게 하면 하면 '스크린 리더' 같이 '보조 기술'을 사용하는 사용자들도 어디까지가 설명인지를 알 수 있게 됩니다.

 

longdesc는 HTML5 부터는 사용을 하지 않습니다.

그러므로 longdesc 보다는 aria-describedby 속성 사용하는 것이 좋습니다.

<img src="graph.gif" alt="2025년 5월 가계부" aria-describedby="detailed-description">
<div id="detailed-description" class="visually-hidden">
  10일 마트에서 10만원, 15일 핸드폰 결제 55,000원, 20일 외식 100,00원을 사용했습니다.
</div>

aria-describedby 속성 값으로 해당 이미지를 설명하는 콘텐츠의 아이디 값을 입력하여 서로 연결시켜주면 됩니다.

 

---

 

H45: Using longdesc

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H45.html

H45: Using longdesc | Techniques for WCAG 2.0