우리는 모든 사람이 매일 콘텐츠에 대체 텍스트를 추가하도록 격려하기 위해 대체 텍스트 작성 및 사용에 대한 몇 가지 최고의 팁을 공유하고자 합니다. 우리의 팁은 사용하는 소프트웨어나 애플리케이션에 관계없이 적용할 수 있습니다.
그릇 위에 빨간색, 초록색, 노란색 사과가 가득 담긴 커다란 그릇에 'Alt= 고요한 바다 위로 지는 아름다운 일몰, 물에 반사된 생생한 주황색과 분홍색 빛깔'이라는 말풍선이 그려져 있다.
중요한 대체 텍스트 작성
이미지는 종종 문서, 뉴스레터 및 소셜 미디어에서 대체 텍스트(alt text) 없이 사용됩니다. 환경 및 농촌부(Defra)의 공무원이자 화면 리더 사용자인 크리스 젠킨스는 alt text를 추가하지 않는 것을 쓰레기를 버리는 것과 같다고 설명했습니다.
"사람들은 대체 텍스트를 생략하는데, 잊었거나 추가하는 것이 중요하지 않다고 생각하기 때문입니다. 글쎄요, 저와 제 상황에 처한 사람들에게는 사람들이 그렇게 한다는 의미에서 쓰레기를 버리는 것과 같습니다. 실제로는 용납할 수 없지만, 다른 사람들이 다른 사람들이 그렇게 하는 것을 보고 '음, 내가 해도 괜찮을 거야'라고 생각하기 때문에, 문제는 화면 판독기 사용자가 이미지가 무엇인지 추측할 수 없다는 것입니다."
우리는 모든 사람이 매일 콘텐츠에 alt 텍스트를 추가하도록 격려하기 위해 alt 텍스트에 대한 몇 가지 최고의 팁을 공유하고자 합니다. 우리의 팁은 여러분이 어떤 소프트웨어나 애플리케이션을 사용하든 적용할 수 있습니다.
우리가 사용하는 용어에 대한 참고 사항
이 기사에서 우리는 대체 텍스트를 alt 텍스트로 줄입니다. 우리는 이 용어를 다음을 포함하는 데 사용합니다.
- 웹 페이지의 alt 텍스트 속성에 포함된 설명
- 설명에는 응용 프로그램의 대체 텍스트 상자가 포함되었습니다.
- 페이지에 포함된 이미지에 대한 설명
대체 텍스트의 기본 사항 알아보기
대체 텍스트를 처음 사용하는 분이나 다시 한번 살펴보고 싶으신 분은 다음 자료를 참고하여 소개를 확인하세요.
대체 텍스트를 작성하는 것은 쉽지만 좋은 대체 텍스트를 작성하는 것은 어려울 수 있습니다.
대체 텍스트는 적용하기 가장 쉬운 기술 중 하나이지만 올바르게 작성하는 것은 어려울 수 있습니다. 좋은 대체 텍스트를 작성하는 것은 다음을 포함한 다양한 요소를 고려하는 것입니다.
- 내용의 주제 또는 목적
- 이미지의 기능
- 사용자의 목표는 무엇인가
- 이미지 내용
- 나머지 페이지에는 무엇이 있나요?
대체 텍스트 결정 트리는 이미지에 텍스트가 포함되어 있는지 여부와 같은 일반적인 시나리오를 필터링하여 더 나은 대체 텍스트를 작성하는 데 도움이 될 수 있습니다. 기술을 향상시키거나 더 어려운 이미지를 돕고 싶다면 트리를 사용하세요.
동작 중인 대체 텍스트
다양한 시나리오에서 대체 텍스트를 사용하는 몇 가지 예를 살펴보겠습니다.
모든 사람이 액세스할 수 있도록 페이지에 대체 텍스트를 추가합니다.
GDS (Government Digital Service)의 이미지 가이드에서는 '대체 텍스트'를 비워두고 대신 본문 텍스트에 이미지에 대한 설명을 쓰라고 제안합니다. 그러면 모든 사람이 설명을 볼 수 있습니다. 페이지에 대체 텍스트를 포함하면 시력이 약하고 시각 처리 장애가 있는 사람에게도 유용하기 때문에 장벽이 더 줄어듭니다.
시각적으로 숨겨진 콘텐츠로 대체 텍스트를 추가하는 데 익숙하다면 습관을 깨고 페이지에 추가하기 어려울 수 있습니다. 이를 권장하기 위해 대체 텍스트가 미칠 수 있는 긍정적인 영향을 강조하고자 합니다.
우리는 콘텐츠 디자이너이자 접근성 전문가인 Marian Avery에게 페이지에 대체 텍스트를 포함하는 것이 왜 중요한지 물었습니다. Marian은 또한 시각 장애가 있고 화면 확대경을 사용합니다.
"확대 사용자는 대부분 이미지가 확대되면 픽셀화되기 때문에 이미지를 보는 데 어려움을 겪는 경우가 많습니다. 시각 장애인 중 많은 사람이 보조 기술을 사용하지 않고 귀하의 페이지를 방문할 수 있습니다. 이는 특히 노인이나 새로 진단받은 사람에게 해당됩니다.
밝은 햇빛 아래에서 누군가가 당신의 페이지를 읽는 것도 고려해야 합니다. 보기 가장 어려운 부분은 아마도 이미지일 것입니다. 페이지에 이미지를 설명하면 모두에게 도움이 됩니다.”
마리안은 대체 텍스트와 페이지의 텍스트를 함께 사용하는 방법에 대한 몇 가지 실용적인 팁을 공유했습니다.
"여전히 대체 텍스트 필드를 사용하여 사람들에게 이미지가 페이지에 설명되어 있고 해당 설명이 어디에 있는지 알릴 수 있습니다. 이는 대체 텍스트 필드에 무언가가 있는 데 익숙한 화면 판독기 사용자에게 안심을 줍니다. 설명을 반복하고 화면 판독기 사용자에게 '청각적 혼란'을 주는 것보다는 포인터로 사용하는 것이 좋습니다."
대체 텍스트가 시각적으로 숨겨져 있는 것에서 대체 텍스트가 페이지에 표시되는 것으로 이동하는 것은 새로운 관행입니다. Marian의 조언은 alt 속성을 전혀 사용하지 말라는 GDS 지침과 약간 다릅니다. 우리는 사용자 선호도와 행동에 대해 더 많이 알아낼 때까지 이 기술을 시도해 볼 만한 타당한 기술이라고 생각합니다.
마리안은 또한 대체 텍스트 표시 버튼의 가치를 강조했습니다.
“X(이전의 Twitter)와 Slack과 같은 플랫폼은 눈에 보이는 'alt' 버튼으로 모든 사람을 위한 이미지 설명을 제공합니다. 해당 옵션이 없는 경우, 페이지의 이미지 설명이 가장 유용한 방법입니다.”
대체 텍스트 및 대체 텍스트에 대한 단축키를 사용하는 AI
한 번에 많은 이미지에 대체 텍스트를 추가하는 것은 시간이 많이 걸릴 수 있습니다. 이는 인공 지능(AI)을 살펴보고, 그것이 당신을 대신해 일을 할 수 있는지 확인하게 만들 수 있습니다. AI는 이미지 인식을 사용하여 이미지에 대한 설명을 작성합니다. 간단한 해결책처럼 보일 수 있지만, 컴퓨터가 내 이미지를 설명할 수 있다면 왜 내가 개입해야 합니까?
문제는 컴퓨터가 종종 이미지에 포함된 내용을 매우 문자적인 설명만 제공하고 더 넓은 맥락을 고려하지 못한다는 것입니다.
우리는 온라인 대체 텍스트 생성기로 간단한 실험을 했습니다. 우리는 큰 흰색 그릇에 담긴 다양한 색의 사과, 빨간색, 노란색, 초록색의 이미지를 선택했습니다.
대체 텍스트 생성기는 다음과 같은 결과를 생성했습니다.
- 나무 테이블 위의 도자기 그릇에 담긴 신선한 붉은 사과.
- 빛나는 붉은 사과가 가득 담긴 나무 그릇.
- 베이지색 그릇에 익은 붉은 사과 한 줌이 담겨 있습니다.
- 고요한 바다 위로 지는 아름다운 일몰. 물에 반사된 생생한 주황색과 분홍색 빛깔이 특징입니다.
처음 세 가지 설명은 틀리지 않았지만 그다지 정확하지도 않습니다. 몇 가지 설명은 나무 테이블이나 그릇을 언급하지만 사진에는 보이지 않습니다. 또한, 어떤 설명도 전시된 녹색 또는 노란색 사과를 언급하지 않습니다. 네 번째 설명은 단순히 틀렸고 쓸모가 없습니다.
이 실험에서 알 수 있듯이, 인간의 설명이 더 정확합니다. 우리는 명확하고 일관된 언어를 사용하여 이미지를 설명하고 주변 맥락을 고려할 수 있습니다.
자동 생성된 설명을 사용하여 대체 텍스트를 초안한 다음 게시하기 전에 내용이 올바르고 적절한지 수동으로 확인할 수 있습니다.
소셜 미디어에서의 영향력 확대
모든 사람이 온라인에서 양질의 콘텐츠를 즐길 수 있어야 합니다. 소셜 미디어 게시물에 대체 텍스트를 추가하면 콘텐츠에 더 쉽게 접근할 수 있습니다. 고품질의 접근 가능한 소셜 미디어 콘텐츠를 만드는 데 필요한 대체 텍스트 '필수 지식'은 다음과 같습니다.
- 간결하고 간단하게 유지하세요 - 주변 맥락을 고려하여 이미지를 설명하세요. 관련성이 없다면 모든 세부 사항을 설명할 필요는 없습니다. 대체 텍스트는 100~200자 정도로 유지하세요.
- 텍스트 이미지를 사용하는 경우 해당 텍스트를 대체 텍스트에 포함하세요.
- 검색 엔진 최적화(SEO)를 개선하기 위해 대체 텍스트를 사용하지 마세요. 이미지 설명에 키워드를 논리적으로 넣을 수 있다면 그렇게 하세요. 하지만 대신 해시태그와 수반되는 게시물 텍스트를 사용하는 것이 더 좋습니다.
플로우차트
플로우차트는 워크플로 또는 프로세스를 나타내는 다이어그램입니다. 이는 독자를 시각적인 방식으로 복잡한 프로세스를 안내하는 것을 목표로 하지만, 이는 시각적이지 않은 독자에게는 접근하기 어렵게 만듭니다.
항상 제목, 목록 또는 데이터 표를 사용하여 차트의 구조화된 텍스트 버전을 포함합니다. 이렇게 하면 복잡한 대체 텍스트를 제공할 필요가 없으며 간단히 '[프로세스 이름]에 대한 흐름도, 페이지에 전체 설명'이라고 말할 수 있습니다.
크리스 젠킨스는 다양한 방식으로 데이터를 표현하는 것의 중요성에 대해 설명합니다. '사람들은 종종 차트의 복잡성이나 미묘한 차이점을 처리하는 데 시간이 필요합니다. 정보를 제공하는 방법이 많을수록 전문가든 초보자든 데이터를 이해하는 데 도움이 됩니다.'
인포그래픽
인포그래픽은 시각적 스토리텔링에 관한 것입니다. 인포그래픽은 정보를 빠르고 '한눈에' 보여주기 위한 것입니다. 그러나 인포그래픽을 접근하기 쉽게 만들기 위해 2단계 접근 방식을 권장합니다. 먼저 인포그래픽을 설명하는 짧은 설명을 작성하고 간략하게 유지한 다음 긴 설명을 작성하여 이미지의 일부인 모든 텍스트를 포함하여 모든 필수 정보를 전달합니다.
크리스 젠킨스는 '포함성과 접근성을 고려한다면 시각적 요소만 우선시하는 것이 아니라 모든 사용자 요구 사항을 고려해야 합니다. 시각적으로 접근할 수 있는 수단이 없는 사람들에게 이를 설명하는 것이 중요합니다.'라고 설명합니다.
💀 쓰레기를 버리지 마세요! 대체 텍스트를 쓰세요. 이상적으로는 페이지에 쓰세요. 그러면 더 많은 사람들이 이미지를 이해할 수 있을 겁니다. 이 블로그 게시물을 대체 텍스트를 사용하지 않는 아는 사람과 공유하여, 대체 텍스트가 필요한 사람들에게 어떤 영향을 미치는지 알려주시기 바랍니다.