대체 텍스트 가이드
구체적이고 간결하다
가능한 한 적은 수의 단어를 사용하십시오. 개체의 색상이 관련이 있습니까? 배경의 날씨가 관련이 있습니까? 사람의 머리색이 중요합니까? 콘텐츠 작성자는 이 정보가 메시지에 추가되거나 삭제되는지 여부를 판단해야 합니다. *문자 제한은 100-150입니다. (권장 125자)
미학이 아닌 정보를 기술하라
"밝은 파랑새의 그래픽"과 같이 그림이 어떻게 보이는지 설명하지 마십시오. "트위터 아이콘"과 같이 이미지 콘텐츠가 무엇이며 어떤 역할을 하는지 설명합니다.
이미지의 기능에 대해 생각하기
콘텐츠 작성자는 이유가 있어 웹 페이지에 이미지를 추가합니다. 내가 왜 이것을 포함하고 있는지 자문해 보십시오. 그것을 포함함으로써 내가 전달하려는 메시지는 무엇입니까? 이 설명을 포함하지 않으면 어떤 추가 정보와 의미를 놓칠 수 있습니까? 팁: 전화로 누군가에게 이미지를 설명한다고 상상해 보십시오.
일반 구두점 사용
쉼표 및 마침표와 같은 일반적인 구두점을 사용하면 화면 판독기(및 최종 사용자)가 텍스트를 더 쉽게 이해할 수 있습니다.
장식 이미지의 경우 대체 텍스트를 비워 둡니다.
인터넷은 긴 텍스트 페이지를 나누거나 콘텐츠의 느낌을 향상시키는 데 사용되는 장식적인 이미지로 가득 차 있습니다. 이는 콘텐츠를 게시하는 기술, 과학 또는 기업 사이트에서 일반적입니다.스크린 리더 사용자는 일반적으로 웹 페이지의 분위기, 느낌 및 미학이 관련이 없다는 데 동의합니다. 중요한 콘텐츠의 접근성을 방해해서는 안 됩니다.
저작권 정보 또는 사진 크레딧을 포함하지 마십시오.
사진 작가의 이름, 크리에이티브 커먼즈 라이선스 또는 추가 저작권 정보를 대체 텍스트에 포함할 필요가 없습니다. 이미지 아래 캡션에 더 적합한 귀중한 단어를 낭비합니다.
"~의 사진" 또는 "~의 이미지"로 시작하지 마십시오.
매일 스크린 리더를 사용하는 사람들은 img 요소의 의미 때문에 이미지에 도달했다는 것을 알게 될 것입니다. 이 정보는 불필요하고 귀중한 설명 단어를 낭비합니다.
복잡한 이미지의 경우 다른 곳에서 추가 설명 제공
특정 상황에서는 125자가 이미지로 전달되는 모든 정보를 전달하기에 충분하지 않을 수 있습니다. 수학 방정식, 인포그래픽, 순서도와 같은 이미지가 좋은 예입니다. 화면 판독기 사용자를 페이지나 웹사이트의 다른 위치에 있는 텍스트 기반 설명으로 안내하는 대체 텍스트를 포함해야 할 수도 있습니다. 복잡한 이미지를 위한 대체 텍스트 작성에 대한 Penn State University의 지침 읽기
대체 텍스트가 필요하지 않은 경우
이미지가 장식적일 때, 즉 페이지에 표시되는 나머지 정보에 더 이상의 맥락이나 의미를 추가하지 않습니다. 다른 예는 다음과 같습니다.
- 링크에 이미지를 사용하지만 링크의 목적을 이해하기 위해 이미지가 필요하지 않은 경우
- 이미 텍스트 레이블이 있는 아이콘
- 중요한 정보가 이미 본문에 효과적으로 전달된 다이어그램 또는 차트
대체 텍스트 테스트 절차
1. 의미 있는 이미지 (텍스트 이미지, 행동을 시작하거나 의미를 전달하거나 응답을 촉구하는 데 사용 되는 기능적 이미지, 이미지 지도 등)
- alt="" 아닌지 확인 (텍스트 문자열이 비어 있지 않은지 확인)
- aria-role="presentation" 이 아닌지 확인
- aria-role="none" 이 아닌지 확인
- aria-hidden이 "true" 로 설정되어 있지 않은지 확인
2. 장식 이미지 (순수한 장식이거나 시각적 서식 지정에만 사용)
*다음 절차중 하나 이상 참인지 체크
- aria-role="presentation"
- aria-role="none"
- aria-hidden="true"
- alt=""
- css(background)를 통해 이미지 삽입
3. 보안 문자
*다음 절차중 하나라도 수행 못할 시 실패
- 텍스트 문자열이 비어 있지 않은지 확인
- 텍스트 문자열이 CAPTCHA의 목적을 식별하고 설명하는지 확인
- 시각이 없는 사용자와 청각이 없는 사용자를 위해 최소한 대체 형식의 CAPTCHA가 제공되는지 확인
4. 텍스트 이미지 (로고 또는 브랜드 이름의 일부인 로고 유형 또는 텍스트)
- 텍스트를 사용하면 텍스트 이미지와 동일한 시각적 표현 및 효과를 얻을 수 없는지 확인
- 텍스트 이미지를 사용자의 요구 사항에 맞게 시각적으로 사용자 지정할 수 있는지 확인 (웹 콘텐츠를 통해 사용자는 글꼴, 크기, 색상 및 배경 설정을 지정할 수 있으며 이러한 설정에 따라 텍스트의 모든 이미지가 제공)
Reference
https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ https://ictbaseline.access-board.gov/06Images/#accessibility-requirements https://ictbaseline.access-board.gov/06Images/#62-test-procedure-for-decorative-images