액세스 가능한 이미지 사용하기

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• 이미지 및 그래픽에 대한 대체 텍스트를 작성하는 모범 사례를 요약할 수 있습니다.
• 컨텐츠에서 이미지에 액세스할 수 있는지 확인할 수 있습니다.
• 완전하고 정확한 대체 텍스트 없이 이미지를 사용하는 것이 미칠 수 있는 영향에 대해 설명할 수 있습니다.

액세스 가능한 이미지의 중요성

액세스 가능한 이미지는 많은 유형의 사용자에게 중요한 의미와 가치를 제공합니다.

시각 장애가 있거나 시력이 좋지 않은 사용자 또는 많은 정보를 처리하는데 어려움을 겪거나 쉽게 산만해지는 사용자는 이미지를 이해하기 위해 스크린 리더에 의존합니다. 또한 시각 및 인지 장애가 없는 많은 사용자는 데이터를 절약하기 위해 이미지를 끕니다.

모든 사용자는 이미지를 보는 것과 같이 대체 텍스트와 주변 텍스트에서 동일한 정보를 얻을 수 있어야 합니다. 

스크린 리더에서 이미지를 액세스할 수 있도록 하는 두 가지 요구 사항은 대체(Alt) 텍스트 속성 및 설명 텍스트입니다.

대체(Alt) 텍스트 속성

모든 이미지에는 대체(Alt) 텍스트 속성이 필요합니다. 주변 컨텐츠에 의미와 컨텍스트를 제공하는 이미지의 경우 대체 텍스트 속성은 이미지의 의미 또는 목적에 대한 간략한 설명을 포함합니다. 관련 정보는 이미지의 컨텍스트에 크게 의존합니다. 이미지가 추가적인 의미나 목적을 제공하지 않는 경우 대체 텍스트 속성은 빈 문자열로 설정됩니다. 

설명 텍스트

전달할 정보가 권장 대체 텍스트 제한을 초과하는 경우 설명 텍스트가 필요합니다. 설명 텍스트는 주요 컨텐츠에 포함된 이미지에 대한 정보입니다. 설명 텍스트를 통해 이미지에 대한 간단한 요약(분명한 경우)을 제공하고 이미지 주변 컨텍스트에 적용되는 이미지에 제공되는 데이터를 설명할 수 있습니다. 

예를 들어 차트나 그래프를 포함할 경우 대체 텍스트는 표시된 데이터의 핵심 주제를 요약하고 설명 텍스트는 데이터에 대한 세부 정보를 제공합니다. 이미지에 대해 어떤 정보를 전달해야 하는지 이해하려면 이미지가 포함되어 있는 이유를 생각해 보세요. 

다이어그램, 차트 및 인포그래픽 정보와 같은 더 복잡한 이미지의 경우 대체 텍스트가 아닌 이미지 주변의 설명 텍스트에 최대한 많은 정보를 제공합니다. 정보, 정보 속성 및 서로 다른 정보 조각이 서로 어떻게 관련되는지 설명해 보세요. 가능하면 표나 목록을 사용하여 차트 또는 인포그래픽이 전달하는 데이터를 설명할 수 있습니다. 그런 다음 대체 텍스트를 사용하여 이미지가 설명 텍스트에 해당하도록 합니다(예: 대체 텍스트 = '해당 정보 차트').

대체 텍스트와 설명 텍스트의 조합은 이미지의 의미를 효과적으로 요약한 것이어야 합니다. 이렇게 하면 시각 장애가 있는 사용자나 이미지를 사용 중지한 사용자가 어떤 항목도 잃지 않게 됩니다. 모든 사용자는 이미지를 보는 것과 같이 대체 텍스트와 주변 텍스트에서 동일한 정보를 얻을 수 있어야 합니다. 

이 두 요소의 조합은 다른 사용자에게 제공하는 설명 텍스트 및 이미지와 동일한 수준의 의미를 스크린 리더 사용자에게 제공하는 한 설명 텍스트 및 대체 텍스트를 제공하는 가장 적절한 방법입니다.

검색 엔진은 대체 텍스트를 사용하여 이미지를 인덱싱하므로 대체 텍스트에 이미지 설명을 제공함으로써 컨텐츠의 검색 가능성을 높일 수 있습니다. 대체 텍스트를 통해 검색 가능성을 최적화할 수도 있지만 첫 번째 목적은 설명 정보를 올바르게 전달하는 것입니다. 필요하고 적용 가능한 곳에 키워드를 사용하되, 설명되는 이미지에 적용되는 경우에만 사용합니다.

이미지 유형

이미지를 통해 페이지를 꾸미거나 정보를 전달할 수 있습니다.

페이지 테두리 및 색상 배너와 같은 장식 이미지는 의미를 전달하지 않습니다. 유일한 목적은 시각적으로 흥미로운 페이지를 만드는 것입니다. 

장식 이미지는 의미가 있지 않기 때문에 스크린 리더를 사용하는 사용자가 해당 이미지를 건너뛰도록 하려고 합니다. 이를 위해 대체 텍스트를 빈 스트링(예: 대체 텍스트="")으로 설정합니다. 

정보가 있는 이미지는 스크린샷, 플로차트, 아키텍처 다이어그램 및 그래프와 같이 사용자에게 정보와 의미를 제공합니다. 정보가 있는 이미지는 정보나 의미를 전달하므로 항상 전달하려는 의미를 요약하는 대체 텍스트가 필요합니다. 더 복잡한 이미지에는 이미지에 포함된 데이터 또는 기타 정보에 대한 자세한 정보를 제공하기 위한 설명 텍스트가 필요합니다. 대체 텍스트와 설명 텍스트에 중복되는 정보가 없는지 확인하세요.

이미지가 정보를 전달하는지 또는 장식적인지 확실하지 않은 경우 컨텐츠에서 해당 이미지를 삭제하고 필요한 정보나 의미가 없는지 확인합니다. 이미지 없이 정보를 전달할 수 없는 경우 이미지는 정보를 전달하는 목적이며 대체 텍스트가 필요하다는 것을 알 수 있습니다. 

항상 정보를 전달하는 이미지의 유형은 다음과 같습니다.

• 링크로 된 이미지
• 링크에 포함된 이미지
• 의미 있는 텍스트를 포함하는 이미지
• 로고

많은 이미지는 충분한 주요 정보가 없더라도 풍부한 시각적 세부 정보를 제공합니다. 이미지를 잠깐 보는 것으로 이미지의 의미를 이해할 수 있다면 설명도 간략해야 합니다. 이미지에 대한 대체 텍스트를 작성할 경우 다른 사람에게 구두로 어떻게 설명할지 생각해 보세요.

대체 및 설명 텍스트 모범 사례

다음 표에서 대체 텍스트를 만들 경우 고려해야 할 중요한 사항을 확인하세요.

대체 텍스트 고려 사항

대체 텍스트는 추가 컨텐츠가 아닌 컨텐츠의 일부입니다. 이미지의 주변에 있는 컨텐츠를 작성할 때 대체 텍스트 및 설명 텍스트를 작성하세요. 초기 내용이 작성된 후 대체 텍스트를 작성한다면 일반적으로 완성도가 부족하며 덜 효과적이게 됩니다. 이미지 또는 해당 이미지에 대한 세부 정보를 포함한 이유를 기억하지 못할 수도 있기 때문입니다. 컨텐츠를 나중에 추가하는 대신 컨텐츠를 작성하는 동안 대체 텍스트를 작성하는 것이 가장 좋습니다.

좋은 설명 및 대체 텍스트는 생각과 노력이 필요합니다. 정답은 한 가지만 있는 것이 아닙니다. 장애가 있거나 없는 사용자 모두를 고려해야 하며 모두에게 필요한 의미와 목적을 가장 잘 전달할 수 있는 방법이 필요합니다. 간결하면서도 의미 있는 대체 텍스트를 작성하는 데는 시간과 연습이 필요합니다.

이미지에 대한 설명 및 대체 텍스트를 작성할 경우 이미지가 생각보다 복잡하여 필요한 의미를 전달하기 위해 주변 텍스트가 추가로 필요할 수 있습니다. 또는 이미지가 추가 정보를 전달하지 않는다고 판단하고 제거할 수도 있습니다. 

사용자 경험에 대해 더 많이 생각하고 사용자와 공감할수록 더 좋은 작성자가 됩니다.

요약

이미지를 사용할 경우 대체 텍스트와 설명 텍스트를 제공하면 이미지의 정보를 해당 정보에 액세스할 수 없는 다양한 사용자에게 효과적으로 전달할 수 있습니다. 이미지에 제공된 의미가 없을 경우 이러한 사용자의 사용자 경험은 크게 감소됩니다. 대체 및 설명 텍스트에 대한 기본 원칙을 준수하면 모든 사용자가 컨텐츠에 더 쉽게 액세스할 수 있습니다. 

다음 유닛에서는 대체 텍스트를 만드는 몇 가지 예제를 살펴보겠습니다.

리소스

• W3C: 페이지 구조 개념
• WebAIM: 대체 텍스트
• National Center for Accessible Media: 경험+ 학습/교육 미디어/디지털 토킹북의 과학 컨텐츠 설명에 대한 효과적인 방안/NCAM