접근성 준수 컴포넌트 - 이미지

1. 이미지에 대체 텍스트를 제공하는 방법

이미지의 접근성을 보장하기 위해 적절한 텍스트 설명을 제공하는 것이 중요합니다. alt 속성은 인라인 이미지에서 가장 일반적인 방법이지만, CSS 배경 이미지와 같은 다양한 유형의 이미지를 처리하는 여러 가지 방법이 있습니다. 주요 기술은 다음과 같습니다:

1. <img> 태그의 alt 속성 사용

이미지에 대한 대체 텍스트를 제공하는 가장 일반적인 방법은 <img> 태그의 alt 속성을 사용하는 것입니다.

<img src="image.jpg" alt="이미지 설명">

2. 장식용 이미지에 대한 설명 제공

이미지가 순전히 장식적이고 중요한 정보를 전달하지 않는 경우, 빈 alt 속성을 사용해야 합니다.

<img src="decorative-image.jpg" alt="">

3. 배경 이미지에 대한 ARIA 속성 사용

CSS를 통해 적용된 배경 이미지의 경우, ARIA(Accessible Rich Internet Applications) 속성을 사용하여 설명을 제공할 수 있습니다.

방법 1: aria-label 사용

<div style="background-image: url('background.jpg');" aria-label="배경 이미지 설명"></div>

방법 2: aria-labelledby 사용

다른 요소를 참조하여 설명을 제공할 수 있습니다.

<div style="background-image: url('background.jpg');" aria-labelledby="bg-desc"></div>
<p id="bg-desc" class="visually-hidden">배경 이미지 설명</p>

4. 배경 이미지에 role="img"과 aria-label 사용

해당 요소가 스크린 리더에 의해 이미지로 처리되도록 하려면, role="img" 속성과 aria-label을 사용할 수 있습니다.

<div style="background-image: url('background.jpg');" role="img" aria-label="배경 이미지 설명"></div>

5. 상세한 설명이 필요한 이미지를 위한 figure와 figcaption 사용

상세한 설명이 필요한 이미지의 경우, <figure>와 <figcaption> 요소를 사용합니다.

<figure>
    <img src="image.jpg" alt="간단한 설명">
    <figcaption>이미지의 상세 설명</figcaption>
</figure>

6. 긴 설명을 위한 longdesc 속성 사용

alt 속성으로 제공하기에 너무 긴 상세 설명의 경우, longdesc 속성을 사용하여 상세 설명이 포함된 페이지의 URL을 제공합니다. 이 속성은 널리 지원되지 않으므로 주 방법보다는 추가 방법으로 고려하십시오.

<img src="image.jpg" alt="간단한 설명" longdesc="description.html">

7. SVG에 텍스트 대체 제공

SVG 이미지의 경우, 내용을 설명하기 위해 SVG 내부에 <title>과 <desc>를 제공할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" role="img">
  <title>SVG의 제목</title>
  <desc>SVG의 설명</desc>
  <!-- SVG 콘텐츠 -->
</svg>

8. 순전히 장식용 이미지를 위한 aria-hidden="true" 사용

이미지가 순전히 장식적이고 스크린 리더에서 숨기고 싶은 경우, aria-hidden="true"를 사용할 수 있습니다.

<img src="decorative-image.jpg" alt="" aria-hidden="true">

9. 텍스트 대체가 있는 CSS 배경 이미지 처리 기술

CSS 배경 이미지의 경우, 인근에 텍스트 대체를 제공해야 합니다. 이는 배경 이미지 자체에 alt 속성을 가질 수 없기 때문입니다.

<div class="background-image-container" role="img" aria-label="배경 이미지 설명">
    <!-- 콘텐츠 -->
</div>

또는 시각적으로 숨겨진 텍스트를 사용합니다:

<div class="background-image-container">
    <span class="visually-hidden">배경 이미지 설명</span>
</div>

2. 대체 텍스트 적절하게 작성하기

웹 개발에서 접근성(A11Y)을 보장하는 것은 장애를 가진 사용자를 포함한 모든 사용자가 콘텐츠에 접근하고 상호 작용할 수 있도록 하는 데 매우 중요합니다. 이미지는 웹 콘텐츠의 중요한 부분이며, 접근 가능한 이미지를 제공하면 스크린 리더와 같은 보조 기술에 의존하는 사용자가 시각 콘텐츠를 이해하고 감상할 수 있습니다. 이 블로그 포스트에서는 일반 이미지의 접근성을 보장하기 위한 일반적인 실천 방법, 특히 alt 속성의 효과적인 사용과 의미 있는 대체 텍스트 작성 팁을 다루겠습니다.

alt 속성 이해하기

<img> 태그의 alt 속성은 이미지의 텍스트 설명을 제공합니다. 이 텍스트는 스크린 리더가 이미지를 대신하여 읽어줌으로써 시각 장애 사용자가 웹사이트의 이미지 내용과 기능을 이해할 수 있게 합니다. 또한 이미지 로드에 실패할 경우 alt 텍스트가 대신 표시됩니다.

alt 속성 사용을 위한 모범 사례

1. 항상 alt 속성을 포함하세요: 모든 <img> 태그에는 alt 속성이 있어야 합니다. 이미지가 장식용이고 의미 있는 내용을 전달하지 않는 경우 alt 속성을 비워둡니다(예: alt=""). 이는 스크린 리더에게 이미지를 건너뛰라고 지시합니다.
2. 설명적이고 간결하게 작성하세요: alt 텍스트는 이미지의 명확하고 간결한 설명을 제공해야 합니다. 시각 사용자와 동일한 정보를 전달하는 방식으로 이미지를 설명하는 것이 목표입니다.
3. 중복된 문구를 피하세요: "image of" 또는 "picture of"와 같은 문구는 피하세요. 스크린 리더는 이미 콘텐츠가 이미지임을 알립니다, 그래서 이러한 정보는 중복됩니다.
4. 맥락을 고려하세요: 이미지가 나타나는 맥락을 고려하세요. alt 텍스트는 이미지의 목적과 주변 콘텐츠와의 관련성을 반영해야 합니다.
5. 기능적 이미지: 링크나 버튼으로 작동하는 이미지의 경우, 그들의 외관이 아니라 수행하는 작업을 설명하세요(예: 돋보기 아이콘의 경우 alt="검색").

좋은 예와 나쁜 예

예 1: 설명이 필요한 이미지

이미지: 정원 밖을 바라보며 창턱에 앉아 있는 고양이 사진.

좋은 Alt 텍스트:

alt="정원을 바라보며 창턱에 앉아 있는 검은색과 흰색 고양이."

나쁜 Alt 텍스트:

alt="고양이"

설명: 좋은 alt 텍스트는 장면을 전달하기에 충분한 세부 정보를 제공하지만, 나쁜 alt 텍스트는 너무 모호하고 전체 맥락을 포착하지 못합니다.

예 2: 장식용 이미지

이미지: 시각적으로 장식적인 효과를 주지만 정보적인 가치는 없는 장식용 테두리 이미지.

좋은 Alt 텍스트:

alt=""

나쁜 Alt 텍스트:

alt="장식용 테두리"

설명: 이미지가 순전히 장식적인 경우, 빈 alt 속성이 적절하며, 스크린 리더가 이를 건너뛰도록 신호를 줍니다.

예 3: 기능적 이미지

이미지: 검색 버튼으로 사용되는 돋보기 아이콘.

좋은 Alt 텍스트:

alt="검색"

나쁜 Alt 텍스트:

alt="돋보기"

설명: 좋은 alt 텍스트는 이미지의 기능을 설명하여 사용자가 아이콘을 클릭할 경우 어떤 동작이 수행될지 명확히 합니다.

의미 있는 Alt 텍스트 작성하기

효과적인 alt 텍스트를 작성하려면 약간의 생각과 고려가 필요합니다. 다음은 의미 있는 설명을 작성하는 데 도움이 되는 몇 가지 팁입니다:

1. 이미지의 목적 이해하기: 이미지가 있는 이유와 전달하려는 정보에 대해 생각해보세요. 이는 관련 alt 텍스트를 작성하는 데 도움이 됩니다.
2. 구체적으로 작성하기: 구체적인 세부 사항이 이미지를 정확하게 전달하는 데 도움이 됩니다. "강아지" 대신 "공놀이하는 골든 리트리버"라고 작성하세요.
3. 간결하게 유지하기: 세부 사항이 중요하지만 alt 텍스트는 간결해야 합니다. 사용자를 압도하지 않으면서 이미지의 본질을 포착하는 간략한 설명을 목표로 합니다.
4. 키워드 현명하게 사용하기: 이미지가 SEO 작업을 지원한다면 관련 키워드를 자연스럽게 alt 텍스트에 포함하세요. 사용자 경험을 저해할 수 있는 키워드 과잉 사용은 피하세요.
5. 스크린 리더로 테스트하기: 사이트를 스크린 리더로 테스트하면 alt 텍스트가 어떻게 들리고 좋은 사용자 경험을 제공하는지 이해하는 데 도움이 됩니다.

결론

웹사이트의 이미지 접근성을 보장하는 것은 모든 사용자를 위한 포괄적인 웹 경험을 만드는 중요한 단계입니다. alt 속성을 효과적으로 사용하고 의미 있는 alt 텍스트를 작성함으로써 보조 기술에 의존하는 사용자가 시각 콘텐츠에 접근할 수 있도록 할 수 있습니다. 항상 alt 속성을 포함하고, 설명적이면서도 간결하게 작성하며, 각 이미지의 맥락을 고려하는 것을 기억하세요. 이러한 모범 사례를 통해 웹사이트를 더 접근 가능하고 사용자 친화적으로 만들 수 있습니다.

또한 이미지에 대한 접근성을 보장하는 것은 alt 속성 사용만으로 끝나지 않습니다. 이미지의 유형과 구현 방법에 따라 ARIA 속성, role="img", <figure>와 <figcaption>, CSS 기술 등을 사용할 수 있습니다. 이러한 다양한 방법을 이해하고 적용함으로써 모든 사용자가 시각 콘텐츠에 접근하고 이해할 수 있도록 할 수 있습니다.