이미지

hidden
notion image
 
이미지 접근성이미지 접근성의 중요성이미지의 목적과 맥락 판단1) 장식용 이미지 (Decorative Images)1. alt=”” 2. role=”presentation” or role=”none” or aria-hidden=”true”3. CSS 배경 이미지로 처리.예시2) 정보 제공 이미지 (Informative Images)예시SVG 이미지 처리3) 기능성 이미지 (Functional Images)시각적으로 보이지 않지만 접근성 기술(AT)에서는 올바르게 정보를 전달할 수 있는 방법예시4) 복잡한 이미지 (Complex Images)alt + 링크alt + figure + figcaptionalt + aria-describedbyalt + longdesc (권장되지 않음)대체 텍스트 작성 가이드
 

이미지 접근성

이미지 접근성의 중요성

대부분 단순히 이미지 태그에 "alt 텍스트"를 추가하면 된다고 생각하는데 그렇게 간단하지 않다.
  • 이미지에 접근성을 부여하도록 코드를 작성하는 방법
  • 이미지와 관련해서 공유되어야 하는 정보와, 어디에 표기해야 하는지
  • 장애인을 지원하기 위해 이미지를 개선하는 추가 방법들

이미지의 목적과 맥락 판단

notion image
코드를 작성하기 전에, 이미지의 목적과 어디에 들어갈 지에 대해 생각해보자.
스크린 리더와 같은 보조 기술 (AT)을 사용하는 사용자에게 정보를 어떻게 전달할 지 결정하는 데 도움이 된다.
  • 이 이미지가 콘텐츠 이해에 필수적인가?
  • 이미지가 전달하려는 정보는 무엇인가?
  • 단순한 이미지인지, 복잡한 이미지인지?
  • 이미지가 감정을 이끌어내거나, 유저에게 행동을 유도하는가?
  • 이미지를 숨겼을 때 콘텐츠가 여전히 이해 가능한지 확인.
이미지 결정 트리와 같은 시각적 플로우 차트를 사용하면 이미지가 속한 카테고리를 결정하는 데 도움이 된다.
 
브라우저 확장 프로그램이나 다른 방법을 사용하여 사이트 또는 웹 앱에서 이미지를 숨겨 보자.
이미지 없이 콘텐츠를 읽었을 때 콘텐츠 내용이 이해가 됐다면 장식용 이미지일 가능성이 높다.
그렇지 않은 경우 이미지는 어떤 식으로든 정보를 제공하고 문맥상 필요하다.
 

1) 장식용 이미지 (Decorative Images)

장식용 이미지 예시 - divider
장식용 이미지 예시 - divider
콘텐츠와 콘텍스트 이해에 필수적이지 않은 이미지.
따라서 AT가 이를 읽지 않도록 코드로 접근성 트리(Accessibility Tree)에서 의도적으로 제외시켜야 함.
방법은 여러가지 있다.

1. alt=”” 

<img src="https://링크" alt="" />
📌
alt 속성을 아예 생략한 경우에는 AT는 파일 이름이나 주변 콘텐츠를 읽어 이미지에 대한 정보를 제공하려고 한다.

2. role=”presentation” or role=”none” or aria-hidden=”true”

// 현재 태그가 장식용이라고 알림
<img src="https://링크" role="presentation" />
<img src="https://링크" role="none" />

// 현재 태그 및 하위 항목 모두 AT에서 제외
<img src="https://링크" aria-hidden="true" />
role="presentation" 또는 role="none"
  • 현재 요소의 시맨틱 의미를 삭제합니다.
  • 하위 요소는 여전히 접근성 트리에 포함됩니다.
  • 예시: <div role="presentation"><button>Click me</button></div>이 경우, div는 무시되지만 button은 여전히 스크린 리더 등에서 감지됩니다.
aria-hidden="true"
  • 현재 요소와 모든 하위 요소를 접근성 API에서 완전히 제거합니다.
  • AT(보조 기술)는 해당 요소 및 하위요소들까지 전혀 인식하지 못합니다.
  • 예시: <div aria-hidden="true"><button>Click me</button></div>이 경우, div와 button 모두 AT에서 숨겨집니다.

3. CSS 배경 이미지로 처리.

.ladybug {
  display: inline-grid;
  outline: 2px solid black;
  width: 500px;
  height: 315px;
  
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Ladybug_%2813794506584%29.jpg/640px-Ladybug_%2813794506584%29.jpg"); 
  background-size: contain;
}
CSS로 배경 이미지를 추가하면 스크린 리더가 이미지 파일을 감지할 수 없습니다.

예시

notion image
페이지 디자인의 일환인 이미지
notion image
꾸며주는 용도의 이미지
notion image
이미 이미지에 대한 충분한 설명이 있는 경우
notion image
eye-candy 시각적 즐거움을 주기 위한 용도의 이미지도 AT에 의해 읽힐 필요가 업다.
 

2) 정보 제공 이미지 (Informative Images)

개념, 아이디어, 감정 등을 전달하는 정보성 이미지.
이미지를 설명하는 적절한 대체 텍스트(alt 텍스트)를 포함해야 함.
  • AT를 사용하는 이미지의 메세지와 의도를 이해할 수 있게 도와줌.
  • 예: <img src="..." alt="장미 덤불에 쉬고 있는 빨간 무당벌레 떼">

예시

notion image
이미지가 다른 정보의 label이 되는 경우:
아이콘이 뒤에 오는 숫자가 무엇인 지에 대한 의미부여를 해주므로, alt에 어떤 정보인지 명시한다.
 
notion image
보충 설명을 돕는 이미지:
이미지가 시각적으로 전달하지만 텍스트에서 설명되지 않은 정보를 간략한 대체 텍스트로 제공.
 
notion image
이미지로 간단한 정보를 전달:
이미지가 간단한 행동 가이드를 제시하고 있다. 따라서 alt에 이 내용을 풀어서 전달한다.
 
notion image
인상이나 감정을 전달하는 이미지:
“우리는 가족 친화적인 기업입니다”를 표현하기 위해 가족 사진을 넣었다면, 이 의도에 맞는 alt를 넣어야 한다.
alt="우리는 가족 친화적입니다”
 
notion image
파일 형식을 알리는 이미지:
다운로드 가능한 링크인 경우 파일 포맷을 알리는 아이콘을 쓰기도 한다.
이 때는 파일 형식에 대한 정보를 제공해야 한다.

SVG 이미지 처리

SVG는 의미론적으로 코딩되므로 기본적으로 AT가 무시함.
장식용이라면 문제 없으나, 정보 제공 목적이라면 role="img"를 추가해야 한다.
svg에는 alt 속성이 없으므로 자식 요소로 <title> 태그를 추가하자.
<svg role="img" ...>
  <title>붉은 무리의 무당벌레들이 내가 아끼는 장미 덤불의 잎 위에 쉬고 있다.</title>
</svg>
여러가지 svg 태그 접근성 고려 방식
여러가지 svg 태그 접근성 고려 방식

3) 기능성 이미지 (Functional Images)

기능성 이미지는 동작과 연결된다.
시각적 측면이 아닌 목적과 동작을 알리는 대체 설명이 포함되어야 한다.
  • 홈페이지로 연결되는 로고,
  • 검색 버튼으로 사용되는 돋보기,
  • 다른 웹사이트 또는 앱으로 연결되는 소셜 미디어 아이콘 등

시각적으로 보이지 않지만 접근성 기술(AT)에서는 올바르게 정보를 전달할 수 있는 방법

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>
이와 같이 title과 alt를 사용하면 DOM에 정보가 있기 때문에 AT는 이 정보를 잘 전달한다.
하지만 시각적으로 보이는 요소는 사용하지 않았으므로 일반적인 사용자들은 이미지만 보게 된다.
 

예시

notion image
이미지만 있는 링크 태그는 이미지에 대한 설명을 alt에 넣는다.
a 태그라 링크라는 것은 해석되므로 어디로 가는 지에 대해 alt에 넣었다.
 
notion image
링크 텍스트와 중복된 내용을 전달할 필요는 없다.
따라서 링크를 설명하는 텍스트가 포함된다면 alt=”” 로 생략한다.
 
notion image
어디로 이동하는 지에 대해서는 이미 링크 텍스트로 설명하고 있다. 중복해서 전달할 필요 없다.
하지만 윈도우 아이콘은 새 창이 열릴 것을 의미하므로 alt=”new window”라는 아이콘의 의미를 넣었다.
📌
주로 파일 포맷을 나타내는 아이콘과 같이 쓰일 경우에 자주 쓰이는 기법이다. (다운로드 링크 등)
✅ alt="PDF 파일"
✅ alt="MP3 오디오 파일"
 
notion image
기능을 포함하고 있는 단독 아이콘 이미지의 경우 기능에 대해 설명하는 alt를 넣는다.
 
notion image
버튼 역할을 하는 이미지도 그 기능을 설명하는 대체 텍스트(alt text)를 제공해야 한다
📌
✅ <img src="search-icon.png" alt="Search">
✅ <button><img src="search-icon.png" alt="Search"></button>
AT가 돋보기 아이콘을 "검색" 버튼으로 인식할 수 있다.
 
🚫 <img src="search-icon.png" alt="Magnifying glass">
🚫 <img src="search-icon.png" alt="">
기능에 대해 설명하지 않고 아이콘 모양 또는 빈 텍스트로 하면 의도를 이해할 수 없다.

4) 복잡한 이미지 (Complex Images)

복잡한 이미지는 전체 의도를 전달하기 위해서는 짧은 설명과 긴 설명 모두 필요하다.
  • 예시) 인포그래픽, 지도, 그래프, 차트, 다이어그램, 복잡한 일러스트레이터 등

alt + 링크

리소스에 대한 추가 설명이 담긴 링크 제공: <a href="...">더 보기</a>
리소스로 연결하거나 페이지 뒷부분에 있는 더 긴 설명으로 연결되는 점프 링크를 제공
모든 브라우저에서 호환된다는 장점이 있지만, 이 방식은 두 요소가 시멘틱 하게 연결되어 있진 않다.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
notion image

alt + figure + figcaption

figure, figcaption은 HTML5에 추가된 태그로 이미지와 링크를 시멘틱하게 연결지을 수 있다.
figure 태그에 role=”group”를 추가함으로써 figure를 지원하지 않는 브라우저와의 호환성도 챙길 수 있다.
📌
figure와 aria-describedby는 모두 이미지와 설명을 시멘틱하게 연결하는 방법이지만
  • figcaption에는 구조적인 설명을 제공할 수 있는 반면
  • aria-describedby는 텍스트만 포함된 설명에만 연결할 수 있습니다.
notion image
<figure role="group">
    <img
        src="chart.png"
        alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
    <figcaption>
        <a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
    </figcaption>
</figure>
figcaption에 짧게 링크로만 연동만 시켜도 되고,
<figure role="group">
  <img src="chart.png"
    alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, described in detail below.">
  <figcaption>
    <h2>Overview</h2>
    <p>The chart shows the website hits for the first quarter of 2014 …</p>
    <h2>Values</h2>
    <table>
      <caption>Example.com Site visitors Jan to March 2014</caption>
      <tr>…</tr>
    </table>
  </figcaption>
</figure>
위와 같이 구조적으로 설명할 수도 있다.

alt + aria-describedby

aria-describedby 속성 추가로 이미지와 긴 설명 글을 연결한다.
<img src="peacock.jpg"
     alt="Male peacock head"
     aria-describedby="description">
[…]
<p id="description">
  The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.
</p>
notion image
📌
  • aria-describedby는 같은 웹페이지 내의 요소와 id를 통해 연결할 수 있으며, 외부 링크로 연동시킬 순 없습니다.
  • 스크린 리더는 해당 텍스트만 읽고, 구조적 관계는 인식하지 못하므로, 연결되는 설명은 구조적 정보 없이 텍스트만 포함된 요소여야 합니다.

alt + longdesc (권장되지 않음)

alt에 짧은 설명을, longdesc에 긴 설명을 담는 방식인데, HTML5에서 권장되지 않는다.
<img
  src="chart.png"
  alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3"
  longdesc="2014-first-qtr.html"
>
<a href="2014-first-qtr.html">Long Description</a>
 

대체 텍스트 작성 가이드

대체 텍스트를 포함하는 것만으로는 충분하지 않습니다.
텍스트는 의미가 있어야 합니다.
  • 의미 있고 간결하게 작성: 최대 150자 권장.
  • 피해야 할 내용:
    • "이미지", "사진" 같은 불필요한 단어.
    • 예를 들어 장미나무의 잎을 갉아먹는 무수한 무당벌레를 보여주는 이미지에 '벌레'라는 대체 텍스트를 사용하면 이미지의 전체 메시지와 의도를 전달할 수 없다.
    • 대체 설명은 관련 시각적 정보를 최대한 많이 담고 간결해야 합니다
    • 키워드 과잉 사용.
      • 키워드 stuffing은 누구에게도 도움이 되지 않습니다. 스크린 리더를 사용하는 사용자는 불편을 겪게 되고 검색엔진 알고리즘은 이를 감지하여 불이익을 줍니다.
  • 좋은 대체 텍스트 작성법:
    • 파일 이름은 명확하고 일관성 있게 설정.
      • 이미지 이름은 대체 텍스트가 누락되거나 무시될 때의 대체입니다.
    • 알파벳 이외의 문자 (예: #, 9, &)는 사용하지 마세요. 이미지 이름이나 대체 텍스트에는 단어 사이에 밑줄 대신 대시를 사용하세요.
    • 사람 중심의 자연스러운 문장 작성.
    • 적절한 문장부호 사용.
      • 구두점을 사용하지 않으면 이미지 설명이 끝없이 이어지는 긴 문장처럼 들립니다.