접근성 준수 컴포넌트 - 이미지 (텍스트가 많은 이미지)

포스터 등 텍스트가 너무 많은 이미지의 경우, 전체 텍스트를 모두 대체 텍스트로 제공하거나 요약정보만 전달하고 별도 연락처를 기재하는 등의 방법을 통해서 접근성 준수 지침을 지킬 수 있습니다. 이 포스트에서는 구체적인 준수 방법에 대해 알아 보고자 합니다.

1. 상세한 설명이 포함된 이미지에 대한 접근성 있고 시맨틱한 HTML 생성하기

웹 콘텐츠를 생성할 때 접근성과 시맨틱 HTML은 모든 사용자가 콘텐츠를 이해하고 상호 작용할 수 있도록 보장하는 데 중요합니다. 이 블로그 포스트에서는 이미지를 자세히 설명하기 위해 HTML 요소를 효과적으로 사용하는 방법을 살펴보고, 접근성과 시맨틱 명확성을 모두 보장하는 샘플 코드 스니펫을 살펴보겠습니다.

접근성과 시맨틱이 중요한 이유

접근성: 웹 콘텐츠의 접근성을 보장하는 것은 시각 장애인과 같은 장애를 가진 사람들이 사이트를 사용하고 탐색할 수 있도록 하는 것을 의미합니다. 예를 들어 스크린 리더는 콘텐츠를 해석하고 사용자에게 소리내어 읽어주기 위해 잘 구성된 HTML을 필요로 합니다.

시맨틱: 시맨틱 HTML은 HTML 요소를 의도된 목적으로 사용하는 것을 의미합니다. 이는 접근성을 돕는 것뿐만 아니라 SEO를 개선하고 코드 유지 보수를 쉽게 만듭니다.

샘플 코드 및 설명

샘플 코드를 살펴보고 각 부분이 왜 그리고 어떻게 사용되는지 이해해 봅시다.

<figure>
    <img src="/image/sub_00/company_02.png" alt="Lorem Ipsum" />
    <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel nisi cursus tincidunt. Integer ut odio eu lacus viverra venenatis.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce in arcu nulla. Aliquam erat volutpat.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur et lacus eu purus commodo tincidunt non at libero.</p>
        <p>Morbi nec lorem eget sapien scelerisque gravida. Sed nec libero id turpis convallis interdum ut at mi. Nam id nisi a augue faucibus consectetur.</p>
        <p>Donec eget sapien justo. Phasellus ac risus eget magna dignissim vestibulum. Cras gravida, erat et vulputate scelerisque, nisi nunc facilisis ex, et convallis orci sem sit amet velit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel nisi cursus tincidunt. Integer ut odio eu lacus viverra venenatis.</p>
        <p>Fusce eget mi sit amet turpis scelerisque suscipit. Suspendisse potenti. Ut et consectetur magna.</p>
    </figcaption>
</figure>

1. `<figure>`와 `<figcaption>` 사용

<figure> 요소는 이미지와 그 설명을 그룹화하는 데 사용됩니다. 이는 둘 사이의 시맨틱 연관성을 만들어주어, <figcaption>의 텍스트가 이미지를 설명하는 것임을 명확하게 합니다.

<figure>
    <!-- Content here -->
</figure>

2. 이미지에 대한 Alt 텍스트 제공

<img> 태그의 alt 속성은 이미지의 텍스트 설명을 제공합니다. 이는 스크린 리더가 이미지를 볼 수 없는 사용자에게 이 텍스트를 읽어주는 데 필수적입니다. Alt 텍스트는 간결하고 설명적이어야 합니다.

<img src="/image/sub_00/company_02.png" alt="Lorem Ipsum" />

3. 자세한 설명을 위한 `<figcaption>` 사용

<figcaption> 요소는 이미지의 자세한 설명을 포함합니다. 이는 복잡한 정보를 전달하거나 광범위한 설명이 필요한 이미지에 특히 유용합니다. 이 텍스트를 <figcaption> 내에 배치하면 시맨틱하게 이미지와 연결됩니다.

<figcaption>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel nisi cursus tincidunt. Integer ut odio eu lacus viverra venenatis.</p>
    <!-- Additional paragraphs -->
</figcaption>

이 구조의 장점

접근성: 스크린 리더가 이미지를 쉽게 식별하고 설명을 제공할 수 있어 시각 장애 사용자에게 더 나은 사용자 경험을 제공합니다.
SEO: 검색 엔진이 이미지의 내용을 더 잘 이해할 수 있어 사이트의 검색 순위를 개선합니다.
유지 보수성: 콘텐츠를 논리적으로 분리하여 코드를 깔끔하고 업데이트하기 쉽게 만듭니다.

2. `figure` 태그와 `figcaption` 태그 없이 `visually-hidden` 방법을 사용하는 예제 코드

figure 태그와 figcaption 태그를 사용하지 않고 시각적으로 숨겨진 텍스트 설명을 제공하는 것이 주요 목표라면, visually-hidden 방법을 사용하는 것도 여전히 유효합니다. 이 방법은 시각적 표현과 스크린 리더 경험을 다르게 해야 할 때 특히 유용합니다.

`visually-hidden`을 사용하는 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>접근 가능한 이미지 예제</title>
    <style>
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    </style>
</head>
<body>
    <h3>원장 인사말</h3>
    <img src="/image/sub_00/company_02.png" alt="원장 인사말" />
    <div class="visually-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel nisi cursus tincidunt. Integer ut odio eu lacus viverra venenatis.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce in arcu nulla. Aliquam erat volutpat.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur et lacus eu purus commodo tincidunt non at libero.</p>
        <p>Morbi nec lorem eget sapien scelerisque gravida. Sed nec libero id turpis convallis interdum ut at mi. Nam id nisi a augue faucibus consectetur.</p>
        <p>Donec eget sapien justo. Phasellus ac risus eget magna dignissim vestibulum. Cras gravida, erat et vulputate scelerisque, nisi nunc facilisis ex, et convallis orci sem sit amet velit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel nisi cursus tincidunt. Integer ut odio eu lacus viverra venenatis.</p>
        <p>Fusce eget mi sit amet turpis scelerisque suscipit. Suspendisse potenti. Ut et consectetur magna.</p>
    </div>
</body>
</html>

설명

헤딩과 이미지: 헤딩(h3)과 이미지(img)는 시각적인 구조를 제공합니다. 이미지의 alt 속성은 스크린 리더를 위한 간단한 설명을 제공합니다.
시각적으로 숨겨진 콘텐츠: visually-hidden 클래스를 가진 <div>는 스크린 리더를 위한 상세한 설명을 포함합니다. 이 콘텐츠는 화면에 보이지 않지만 스크린 리더에 의해 읽혀져서 보조 기술을 사용하는 사용자가 정보를 접근할 수 있게 합니다.

`visually-hidden` 방법의 장점

접근성: 스크린 리더 사용자가 시각적 레이아웃에 영향을 주지 않고 상세한 설명에 접근할 수 있습니다.
단순성: HTML 구조를 단순하고 시각적인 사용자에게 집중할 수 있게 유지합니다.
유연성: 시각적 인터페이스를 어지럽히지 않고 상세한 설명을 제공할 수 있습니다.

3. 이미지의 모든 텍스트틑 다 전달해야 할까?

많은 텍스트가 포함된 이미지(예: 포스터 및 홍보 이미지)를 다룰 때, 접근성(A11Y) 원칙을 고려하여 스크린 리더를 사용하는 사용자도 포함한 모든 사용자가 정보를 접근할 수 있도록 해야 합니다. 다음은 최선의 접근 방식을 결정하는 데 도움이 되는 가이드라인입니다.

많은 텍스트가 포함된 이미지의 텍스트 설명 제공을 위한 모범 사례

전체 텍스트 설명: 이상적으로는 이미지에 포함된 전체 텍스트를 접근 가능한 형식으로 제공해야 합니다. 이렇게 하면 모든 사용자가 추가적인 절차 없이 정보를 동일하게 접근할 수 있습니다.
간단한 설명과 추가 연락처 정보 제공: 만약 전체 텍스트가 너무 길어서 alt 속성이나 숨겨진 텍스트로 제공하기 어렵다면, 주요 정보를 간략히 요약하고 추가 정보를 얻을 수 있는 연락처 정보를 제공할 수 있습니다. 이는 매우 복잡하거나 상세한 이미지의 경우 합리적인 타협이 될 수 있습니다.

예제 접근 방식

전체 텍스트 설명 예제

이미지 텍스트가 관리 가능하다면, 접근 가능한 형식으로 전체 텍스트를 포함합니다. 예를 들어:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>접근 가능한 이미지 예제</title>
    <style>
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    </style>
</head>
<body>
    <h3>홍보 포스터</h3>
    <img src="/image/promotional_poster.png" alt="홍보 포스터 - 모든 정보는 다음 텍스트를 참조하세요" />
    <div class="visually-hidden">
        <p>행사 제목: 2024 여름 페스티벌</p>
        <p>날짜: 2024년 7월 20일</p>
        <p>시간: 오전 10시 - 오후 5시</p>
        <p>장소: 서울 올림픽 공원</p>
        <p>내용: 음악 공연, 푸드 트럭, 가족 놀이 활동 등이 포함된 여름 축제</p>
        <p>참가비: 무료</p>
        <p>문의: info@example.com 또는 123-456-7890</p>
    </div>
</body>
</html>

간단한 설명과 연락처 정보 제공 예제

이미지에 많은 텍스트가 포함되어 있어 전체 설명이 어렵다면, 간략한 요약과 연락처 정보를 제공합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>접근 가능한 이미지 예제</title>
    <style>
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    </style>
</head>
<body>
    <h3>홍보 포스터</h3>
    <img src="/image/promotional_poster.png" alt="홍보 포스터 - 여름 페스티벌, 7월 20일, 서울 올림픽 공원. 자세한 정보는 연락처 참조" />
    <div class="visually-hidden">
        <p>더 많은 정보를 원하시면 info@example.com 또는 123-456-7890으로 연락주세요.</p>
    </div>
</body>
</html>

결론

시맨틱 HTML 요소를 사용하는 것은 모든 사용자가 접근 가능하고 이해할 수 있는 웹 콘텐츠를 보장합니다. 이러한 접근 방식은 사용자 경험을 향상시킬 뿐만 아니라 SEO와 코드 유지 보수성에도 기여합니다. 제공된 샘플 코드를 템플릿으로 사용하여 프로젝트에 적용해 보세요. 접근성은 단지 기능이 아니라 웹 개발의 기본적인 측면입니다.

또한 figure와 figcaption 태그를 사용하지 않고 visually-hidden 방법을 사용하는 것은 접근 가능하고 시맨틱한 웹 페이지를 만드는 효과적인 방법입니다. 이 방법은 깨끗한 시각적 표현을 유지하면서도 모든 사용자가 접근할 수 있도록 보장합니다. figure와 figcaption을 사용할지, visually-hidden 방법을 사용할지는 특정 필요와 콘텐츠의 맥락에 따라 다릅니다. 두 방법 모두 유효하며 웹 페이지의 접근성과 시맨틱 명확성을 향상시키는 데 사용할 수 있습니다.

더불어 많은 텍스트가 포함된 이미지의 경우, 접근 가능한 형식으로 전체 텍스트를 제공하는 것이 이상적이지만 항상 실용적이지는 않습니다. alt 속성에 간단한 요약과 함께 추가 정보를 제공할 수 있는 연락처 정보를 제공하는 것이 균형 잡힌 접근 방식입니다. 이를 통해 모든 사용자가 필수 정보를 접근할 수 있고 필요한 경우 추가 정보를 얻을 수 있는 방법을 제공합니다.

'정보 접근성 > 접근성 (A11Y) - 컴포넌트' 카테고리의 다른 글

접근성 준수 컴포넌트 - 이미지 (테이블 대체 텍스트 만들기) (0)	2024.07.07
접근성 준수 컴포넌트 - 앵커 (a, 링크 태그) (0)	2024.07.05
접근성 준수 컴포넌트 - 이미지 (0)	2024.07.05
접근성 준수 컴포넌트 - 탭 버튼 (0)	2024.07.03
접근성 준수 컴포넌트 - 테이블 (Table) (0)	2024.07.03

단순함연구소 UX개발실

접근성 준수 컴포넌트 - 이미지 (텍스트가 많은 이미지)

1. 상세한 설명이 포함된 이미지에 대한 접근성 있고 시맨틱한 HTML 생성하기

접근성과 시맨틱이 중요한 이유

샘플 코드 및 설명

1. `<figure>`와 `<figcaption>` 사용

2. 이미지에 대한 Alt 텍스트 제공

3. 자세한 설명을 위한 `<figcaption>` 사용

이 구조의 장점

2. `figure` 태그와 `figcaption` 태그 없이 `visually-hidden` 방법을 사용하는 예제 코드

`visually-hidden`을 사용하는 예제 코드

설명

`visually-hidden` 방법의 장점

3. 이미지의 모든 텍스트틑 다 전달해야 할까?

많은 텍스트가 포함된 이미지의 텍스트 설명 제공을 위한 모범 사례

예제 접근 방식

전체 텍스트 설명 예제

간단한 설명과 연락처 정보 제공 예제

결론

'정보 접근성 > 접근성 (A11Y) - 컴포넌트' 카테고리의 다른 글

티스토리툴바

접근성 준수 컴포넌트 - 이미지 (텍스트가 많은 이미지)

1. 상세한 설명이 포함된 이미지에 대한 접근성 있고 시맨틱한 HTML 생성하기

접근성과 시맨틱이 중요한 이유

샘플 코드 및 설명

1. <figure>와 <figcaption> 사용

2. 이미지에 대한 Alt 텍스트 제공

3. 자세한 설명을 위한 <figcaption> 사용

이 구조의 장점

2. figure 태그와 figcaption 태그 없이 visually-hidden 방법을 사용하는 예제 코드

visually-hidden을 사용하는 예제 코드

설명

visually-hidden 방법의 장점

3. 이미지의 모든 텍스트틑 다 전달해야 할까?

많은 텍스트가 포함된 이미지의 텍스트 설명 제공을 위한 모범 사례

예제 접근 방식

전체 텍스트 설명 예제

간단한 설명과 연락처 정보 제공 예제

결론

'정보 접근성 > 접근성 (A11Y) - 컴포넌트' 카테고리의 다른 글

'정보 접근성/접근성 (A11Y) - 컴포넌트' Related Articles

티스토리툴바

1. `<figure>`와 `<figcaption>` 사용

3. 자세한 설명을 위한 `<figcaption>` 사용

2. `figure` 태그와 `figcaption` 태그 없이 `visually-hidden` 방법을 사용하는 예제 코드

`visually-hidden`을 사용하는 예제 코드

`visually-hidden` 방법의 장점