위키백과:이미지에 대한 스타일/접근성/대체 텍스트 설명서

Wikipedia:

대체 텍스트(또는 Alt 텍스트)는 이미지와 관련된 텍스트로, 동일한 목적을 제공하고 이미지와 동일한 필수 정보를 전달한다.[1]웹 브라우저에서 이미지를 끄거나 시각 장애로 인해 화면 판독기를 사용하고 있기 때문에 판독기가 이미지를 사용할 수 없는 경우 대체 텍스트는 정보나 기능성이 손실되지 않도록 보장한다.[1]부재하거나 도움이 되지 않는 대체 텍스트는 시각 장애인 사용자에게 좌절의 원인이 될 수 있다.[2]

위키피디아에서 대체 텍스트는 일반적으로 이미지 캡션과 이미지에 제공된 텍스트의 조합을 통해 제공된다.altMediaWiki 마크업에서 매개 변수.인접한 이미지를 생성하는 예는 다음과 같다.

[[File:Jacques-Louis David 017.jpg thumb upright=0.75 alt=Painting of Napoleon Bonaparte in His Study at the Tuileries ''[[The Emperor Napoleon in His Study at the Tuileries]]'' by [[Jacques-Louis David]]]]

alt파라미터 텍스트("Tuileries에서 그의 서재에 나폴레옹 보나파르트의 그림")는 일반적으로 독자들에게 보이지 않지만, 영상이 꺼졌을 때 웹 브라우저에 의해 표시되거나 시각 장애가 있는 사람들을 위해 스크린 리더에 의해 크게 읽혀질 수 있으며, 검색 엔진에 의해 이미지의 내용을 결정하는 데 사용될 수 있다.[3]다른 인터넷 가이드라인과 일치하여, "라는 용어는alt텍스트"(의 경우)code글꼴)은 이미지에 대해 제공된 텍스트를 참조하는 데 사용된다.alt매개변수 및 HTML alt 속성에 대한 텍스트를 생성하는 용어 "대체 텍스트"는 텍스트가 있는 위치에 관계 없이 이미지와 동등한 텍스트를 의미한다.[4]

이미지 설명 페이지(위키피아의 거의 모든 이미지)로 연결되는 이미지에는alt텍스트는 공백이 될 수 없으며, 또한 ~할 수도 없다.alt매개 변수가 없다이는 화면 판독기가 링크의 목적을 설명하기 위해 "아니오"일 때 이미지 파일 이름을 읽는 것으로 기본 설정되기 때문이다.alt텍스트 사용 가능.[5]이것은 보통 도움이 되지 않는다.위의 나폴레옹 예에서, 화면 판독기는 만약 우리가 그것을 공급하지 않았다면 "링크 그래픽 슬래시 자크 하이픈 루이스의 밑줄 01.7"을 읽었을 것이다.alt매개 [6]변수

순수하게 장식적인 이미지(정보를 제공하지 않고 미적 목적만 제공하는)에는 대체 텍스트가 필요하지 않다.흔히 자막은 대체 텍스트에 대한 요구사항을 완전히 충족한다.그러나, 비어있는 유일한 상황은alt텍스트가 허용될 수 있는 것은 그러한 이미지가 연결되지 않은 곳이며, 이는 거의 불가능하다.한 가지 해결책은 최소한 다음과 같이 최소로 유용한 것을 제공하는 것이다. alt=photograph, alt=painting또는 alt=sculpture. 또 다른 해결책은, 캡션이 이미 이미지를 설명하거나 식별하지 않는다면,alt가능한 한 간략하게 하기 위한 문자하다

청중

대체 텍스트 청중은 다음을 포함한다.

  • JAWS, NVDA 또는 Orca[3] 같이 텍스트를 음성 또는 점자로 번역하는 화면 판독기를 사용하여 위키백과를 검색하는 다양한 수준의 시각 장애를 가진 독자
  • 이미지를 지원하지 않거나(예: Lynx), 표시하지 않도록 구성된 브라우저(예: Wikipedia Zero)[3]를 사용하는 독자
  • 검색엔진 봇.[3]

위키피디아를 스크린 리더로 체험하려면 연습이 필요하다.경험이 풍부한 화면 판독기 사용자는 텍스트의 일부를 건너뛰도록 선택할 수 있다.

대체 텍스트 작성 방법

기본 사항

대체 텍스트는 "농구 선수" 또는 "토니 블레어 전 대통령이 조지 W 부시와 악수"와 같이 짧아야 한다.더 길게 할 필요가 있다면 중요한 세부사항이 처음 몇 단어에 나타나야 하며, 일단 핵심 요점을 이해하면 화면 판독기의 사용자가 앞으로 건너뛸 수 있다.기사의 본문에 대해서는 매우 긴 설명을 남겨둘 수 있다.[1]MediaWiki는 HTML의 longdesc 속성을 지원하지 않는다.모든 독자들은 이 요소가 이미지라는 것을 알게 될 것이기 때문에 "사진"을 추가하는 것은 보통 필요하지 않다.

alt텍스트는 줄 바꿈 없이 일반 텍스트(Wikilink와 같은 HTML 또는 Wiki 마크업 없음)여야 한다.본문은 중립적 관점, 검증가능성, 독창적인 연구 없음생활인의 전기적 관점을 준수해야 한다.인라인 인용문을 포함할 수 없으므로, 논쟁적인 점이나 어떤 독자에게도 명백하지 않은 내용을 전달해서는 안 된다.alt텍스트는 캡션 직전에 화면 판독기에 의해 읽히도록 되어 있으므로, 두 가지 모두에 동일한 세부 정보를 포함하지 마십시오.

컨텍스트의 중요성

Elizabeth II speaking to the public.
패션에 관한 기사에 나오지 않는 한, The는alt엘리자베스 2세의 이 이미지에 대한 텍스트는 "검은색 모자를 쓴 나이든 여성"이 되어서는 안 된다.

이미지의 맥락을 이해하는 것은 매우 중요하다.W3C(World Wide Web Consortium) Web Content Accessibility Guideline(WCAG) 2.0은 다음과 같은 4가지 질문을 [7]고려할 것을 편집자에게 권고한다.

  • 왜 이 비 텍스트 내용이 여기에 있지?
  • 어떤 정보를 제공하고 있는가?
  • 그것은 어떤 목적을 달성하는가?
  • 만약 내가 비 텍스트 내용을 사용할 수 없다면, 같은 기능이나 정보를 전달하기 위해 어떤 단어를 사용하겠는가?

를 들어, 나폴레옹 보나파르트의 이미지는 에 사용될 수 있다.

  • 그러한 지도자의 예를 보여주는 위대한 군 지도자에 관한 기사 - 대체 텍스트가 주제를 명명해야 한다.
  • 나폴레옹에 관한 기사 - 그의 외모를 간략하게 설명해야 한다.
  • 그의 그림에 관한 토막글. 대체 본문은 그 그림을 간략하게 묘사해야 한다.

단어가 포함된 이미지

이미지에 독자의 이해에 중요한 단어가 포함되어 있는 경우, 대체 텍스트에는 그러한 단어가 포함되어야 한다.[1]라틴 문자가 아닌 문자가 포함된 경우, 번역을 제공하는 것을 고려하십시오.유니코드를 지원하지 않는 화면 판독기는 라틴어-1 이외의 문자에 대한 지원이 매우 다양하다.

캡션 및 인근 텍스트

refer to caption
3가지 칫솔 종류 비교

[사용] alt=refer to caption글과 자막은 주제를 묘사하고, 서술한다.alt그저 반복적일 뿐이다.]

이러한 요소를 생성하는 Wiki 마크업에 대한 자세한 내용은 Wikipedia:확장 이미지 구문#알트 텍스트캡션

이미지는 일반적으로 캡션이 있는 미리 보기입니다.자막은 모든 독자가 볼 수 있으며 HTML 마크업, 위키링크 및 인라인 인용문을 포함할 수 있다.infobox는 종종 캡션을 별도의 행으로 하여 일반 이미지를 포함한다.좋은 캡션은 명백한 내용을 상세히 설명하지 않고, 이미지의 주제를 간결하게 식별하고 기사와 이미지의 관련성을 확립해야 한다.

캡션이 이미지를 충분히 설명하거나 환기시키는 경우 또는 이미지의 기능이 무엇인지 명확하게 하는 경우, 한 가지 옵션은 쓰기입니다.글의 근처에 있는 텍스트가 동일한 기능을 수행하는 경우에는 .가 될 수 있다.[4]

지도 및 도표

지도, 도표, 차트를 사용하면 원소의 색상, 위치 및 크기가 중요하지 않다.대신 제시되는 정보에 집중하십시오.예를 들어, 도표에는 "6월 판매량이 7월 판매량을 초과했고, 8월 판매량은 여전히 높았다"라는 대체 텍스트가 있을 수 있으며, 도표 애니메이션에는 "자동차가 움직이는 자동차 엔진의 애니메이션"이라는 대체 텍스트가 있을 수 있다.화학적 화합물의 구조 공식은 IUPAC 명명법을 사용하여 명확하게 설명할 수 있으며 약물 또는 화학적 인포박스는 이 정보를 포함한다.

장식 이미지

본질적인 정보를 제공하지 않는 이미지는 순전히 장식적인 이미지다.장식적인 이미지는 시각적 구조나 미적 풍미를 제공할 수 있지만, 그 시각적 맥락 밖에서 혼란을 야기할 수 있다.장식 영상에 빈 알트 속성이 없으면 화면 판독기 사용자가 소리를 들을 수 있고 검색 엔진 결과에 관련 없는 텍스트를 삽입할 수 있다.

인근 텍스트나 캡션에서 발견되는 정보를 엄격히 반복하는 이미지에도 비슷한 문제가 존재한다.주변의 텍스트는 이미지의 대체 텍스트로 충분하다.alt 속성이 비어 있지 않으면 화면 판독기와 검색 엔진에 대해 반복 텍스트가 생성된다.

두 경우 모두 빈 alt 속성이 이상적이다.

  • 공용 도메인, CC0 또는 이와 유사하게 라이센스가 부여된 이미지의 경우 이미지 연결을 해제하고 빈 alt 속성을 사용하십시오.링크 없음과 빈 alt 속성의 조합은 화면 판독기가 이미지를 건너뛰게 하고, 검색 결과 텍스트 캡처에서 검색 엔진이 이미지를 건너뛰게 한다.
  • CC-BY-SA, GFDL 또는 이와 유사한 라이센스가 부여된 영상의 경우 빈 alt 속성을 사용하지 마십시오.이러한 이미지를 귀속시키기 위해 링크하는 것이 위키피디아의 방침이며, 링크된 이미지는 비어 있는 링크를 방지하기 위해 비어 있지 않은 alt 속성을 가져야 하므로 화면 판독기에 혼란을 초래한다.빈 alt 속성을 원할 경우 CC-BY-SA 영상을 공용 도메인 동등 항목으로 교체해 보십시오.그렇지 않으면 간단한 Alt 속성(예: alt=photograph, alt=painting, alt=sculpture또는 alt=icon헷갈리는 텍스트를 최소화하기 위해.

텍스트에서 찾을 수 없는 정보를 전달하는 아이콘은 모양이 아닌 기능을 설명하는 알트 속성을 가져야 한다.예를 들어, 다음 페이지로 이동하는 데 사용되는 화살표 아이콘은 alt 속성이 아닌 alt 속성을 가져야 한다. 만약 화살표가 같은 함수의 설명 텍스트 링크와 함께 있다면, 빈 alt 속성이 더 적합할 것이다.[3]

템플릿 및 갤러리의 Alt 텍스트

템플릿
{{Infobox} 및 {{Location map+}}과 같은 많은 템플릿에는 지정하기 위한 고유한 매개 변수가 있음alt텍스트. 템플릿에 이러한 매개 변수가 없는 경우 추가 요청을 고려하십시오.

갤러리
태그가 지지함alt미디어위키 1.18 이후 [8]텍스트{{갤러리}, {{멀티이미지}}도 지원한다.테이블 구문을 사용하여 갤러리를 만드는 예는 갤러리를 참조하십시오.

타임라인
태그가 없는 이미지를 생성함alt텍스트. 테이블을 대신 사용할 때는 화면 판독기가 읽어주는 표 요약을 추가하여 내용을 간략하게 설명하십시오.

수학공식
태그는 수학 공식을 생성하는 데 사용된다.이것들은 복잡성과 사용자 선호도에 따라 이미지 또는 텍스트로 렌더링될 수 있다.간단한 공식은alt그것을 영어로 번역하기 위한 매개 변수.더 복잡한 공식은 지정하기 어렵고 원래의 마크업이 최선의 선택일 수 있으며, 그렇지 않을 경우 기본값이다.alt매개 변수가 제공된다.

링크 및 속성

쓰기 " alt="로 인해 MediaWiki 소프트웨어가 HTML을 빈 상태로 렌더링할 수 있음alt에 속하다img이미지가 링크인 경우, 화면 리더는 HTML이면 링크 파일 이름(예: "슬래시 그린 밑줄 체크 표시")을 읽는다.alt속성이 비어 있거나 누락됨.위키백과 기사에 실린 거의 모든 이미지는 더 큰 크기의 이미지와 라이센싱 및 귀인 정보를 포함하는 이미지 설명 페이지로 연결되는 링크다.[Note 1]

위키백과 기사는 때때로 이미지 페이지에 연결되지 않는 이미지, 예를 들어 정보 아이콘 등을 포함하고 있다.이러한 이미지는 화면 판독기에 의해 무시되도록 구성해야 한다.이는 추가함으로써 달성된다. link= alt=이미지 위키 마크업으로.링크를 제거하는 것은 공용 도메인 또는 동등한 CC0의 이미지에 허용된다.링크는 귀인이 필요한 이미지에 대해 억제되지 않아야 한다.

위키백과 기사의 대부분의 이미지는 활성 기능을 제공하지 않는다; 그것들은 버튼이나 메뉴 옵션이 아니다.이미지가 다른 기사에 대한 링크 역할을 하는 경우 대체 텍스트에서 기사의 이름을 지정하십시오.링크를 따라 연산을 수행하는 경우(: 정렬) 연산을 표시하십시오.독자는 이미 이미지가 링크라는 것을 알고 있고 해당 이미지에서 마우스 버튼을 클릭하지 않을 수 있으므로 "여기를 클릭"하거나 "링크"라고 말하지 마십시오.[9]

대체 텍스트 예제
위키코드 일반 보기 화면 판독기 이론적 근거
[[파일:Dannebrog.jpg 엄지손가락 중앙을 똑바로 세웠다=0.75 alt=빨간색 깃발은 왼쪽에서 약간 상쇄되는 흰색 십자가에 의해 4로 나뉜다.가장 오래된 [국기] 디자인은 [덴마크]의 13세기"[덴마크]이다.]]
A red flag divided into four by a white cross slightly offset to the left.
아직도 사용되고 있는 가장 오래된 국기 디자인은 덴마크의 13세기 단네브로크다.
링크 그래픽 왼쪽에서 약간 상쇄되는 흰색 십자가로 네 개로 나뉜 빨간색 깃발아직도 사용되고 있는 가장 오래된 링크 국기 디자인은 덴마크의 13세기 링크인 Dannebrog를 연결하는 것이다. 기사:깃발
이미지의 목적은 덴마크의 단네브로그 깃발이 어떻게 생겼는지 보여주기 위함이다.사진은 평평한 그래픽으로 대체될 수 있고 동일한 목적을 제공할 수 있다.그러므로 깃대, 펄럭이는 것, 하늘도 중요하지 않다.
[[파일:유리 하프 풀.jpeg 엄지손가락이 똑바로 중심을 잡는다=0.75 alt=주둥이의 맑은 물이 쏟아져 나온다.불소화물은 [[먹는 물]의 모양, 맛, 냄새에는 영향을 주지 않는다.]]
Clear water pours from a spout.
불소화는 식수의 모양, 맛, 냄새에 영향을 주지 않는다.
링크 그래픽: 주둥이에서 맑은 물이 쏟아져 나온다.불소화는 식수의 모양, 맛 또는 냄새에 영향을 주지 않는다. 기사:물불소화
이것은 수돗물에 관한 기사에서 물린 소리를 장식하기 위해 선택한 주식 사진이다.이미지가 링크여서 필요한 경우alt텍스트. 캡션이 이미지를 식별하지 않기 때문에 간단한 설명이 적절하다.
[[파일:Blair Bush Whitehouse(2004-11-12).jpg 엄지손가락 중심 직립=0.75 alt=토니 블레어와 조지 W 부시 대통령이 기자회견에서 악수하고 있다.블레어와 부시는 2004년 11월 12일 중동 평화를 위한 전략에 합의한다.]
Tony Blair and George W. Bush shaking hands at a press conference.
블레어와 부시는 2004년 11월 12일 중동 평화를 위한 전략에 동의한다.
토니 블레어와 조지 W 부시 대통령이 기자회견에서 악수하는 장면을 연결했다.블레어와 부시는 2004년 11월 12일 중동 평화를 위한 전략에 동의한다. 이 이미지는 그들이 기자 회견 동안 악수를 하며 인사하는 모습을 보여준다.

alt텍스트는 "두 남자가 악수하는 것"이라고 쓰여서는 안 된다. 왜냐하면 그것이 사진이 선택된 이유가 아니기 때문이다. 그것은 남자들의 신원을 확인할 필요가 있기 때문이다.alt글에서 그들이 백악관의 이스트 룸에 있었다고 말하면 안 된다. 왜냐하면 그것은 사진에서 분명하지 않기 때문이다.남성들이 똑같이 옷을 입었다는 것은 사진으로 전달되지만, 기사와는 관련이 없다.

대체 텍스트의 비정상적인 예
위키텍스트 일반 보기 화면 판독기 이론적 근거
[[파일:Commons-logo.svg frameless upgrade=0.23 테두리 센터 링크=Commons:특수:위키미디어 공용 검색]]
Search Wikimedia Commons
링크 그래픽 검색 Wikimedia Commons 아이콘인 이미지의 목적은 Commons 검색 페이지에 대한 링크를 제공하는 것이다.아이콘의 외관은 중요하지 않지만, 그 기능은 중요하다.이미지 마크업(markup)의 "caption(자막)" 필드에 대체 텍스트를 작성하면 두 가지 모두alt텍스트 및 링크 제목.링크 제목은 일부 브라우저에서 도구 설명으로 나타난다.
<이미지맵> 파일:Bryan-Sewall.jpg 직립=0.75 센터 alt=9508500[William Jenings Bryan William J. Bryan] 원 2950 850 700[Arthur Sewall] 기본값 [http://projects.vassar.edu/1896/democrats.html 1896 민주당 웹사이트] </imagemap>
1896 Democratic campaign posterWilliam J. BryanArthur Sewall
기본 이미지에는 "1896 민주당 선거 포스터"라는 alt 텍스트가 있다.왼쪽 원에는 "윌리엄 J. 브라이언"이라는 알트 텍스트가 있다.오른쪽 원은 다음과 같다.alt문자 "아더 세월"청색(i)alt텍스트 "이 이미지에 대하여"이 모든 것들은 링크 제목이 "1896 민주당 웹사이트"인 기본 이미지를 제외하고 일부 브라우저에서 툴팁을 제공하는 링크 제목 텍스트로 반복된다. 첫 번째 줄은 기본 이미지의alt이 경우 그림을 식별하는 텍스트.각 후속 라인은alt링크의 목적이 되어야 하는 지역 링크의 텍스트.[10]
수성, 금성, 지구, 화성.회색 선.png alt=link=]<br />주피터, 토성, 천왕성, 해왕성.
수성, 금성, 지구, 화성.

목성, 토성, 천왕성, 해왕성.
수성, 금성, 지구, 화성.목성, 토성, 천왕성, 해왕성. 이미지는 시각적 구조를 제공하지만 필수적인 정보는 제공하지 않는다.이미지가 공용 도메인에 있으므로 귀속할 필요가 없으며 링크를 삭제할 수 있으므로 공백으로 지정할 수 있다.alt속성, 따라서 파일 이름은 화면 판독기에 의해 말해지지 않는다.링크 없음과 공백의 조합alt속성은 화면 판독기에 이미지를 완전히 건너뛰도록 지시한다.
[[파일:암박스 경고 pn.svg 28x28px alt=link=] 경고:</strong] 가위로 뛰지 않는다.
경고:가위를 들고 뛰지 마라. 경고:가위를 들고 뛰지 마라. 이미지는 인접한 단어 "경고"에 의해 전달된 정보를 엄격하게 반복한다."경고"는 대체 텍스트로 충분하므로, 공백alt속성이 적절하다.

노트

  1. ^ WebIME은 "링크 내부의 유일한 이미지는 누락되거나 null이 되어서는 안 된다"고 말했다.alt기여하다화면 판독기가 링크를 식별하기 위해서는 SAGENT를 읽어야 하기 때문이다."[3]스크린 리더 에뮬레이터 팡스는 이것을 확인한다.

참조

  1. ^ a b c d W3C. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content; 11 December 2008 [Retrieved 4 April 2010].
  2. ^ Lazar J, Allen A, Kleinman J, Malarkey C. What frustrates screen reader users on the web: a study of 100 blind users [PDF]. Int J Hum Comput Interact. 2007;22(3):247–69. doi:10.1080/10447310709336964.
  3. ^ a b c d e f 2020 WebAIM. Center for Persons with Disabilities, Utah State University. Alternative Text [Retrieved 30 September 2020].
  4. ^ a b G74: 짧은 설명인 WCAG 2.0 기법에서 설명의 위치를 참조하여 텍스트 컨텐츠 근처의 텍스트에 긴 설명을 제공한다.
    WebAim은 다음과 같이 쓰고 있다: "[T]he alt 속성(때로는 alt tag라고 불림, 기술적으로 이것이 부정확하지만)이 이미지의 내용과 기능을 제공하는 유일한 메커니즘은 아니다.또한 이 정보는 이미지에 인접한 텍스트나 이미지를 포함하는 페이지 내에서 제공될 수 있다.대체 텍스트라는 용어는 이 글에서 사용된 것과 같이 텍스트가 어디에 있든 이미지와 동등한 텍스트를 가리킨다.이미지 태그의 alt 속성만 참조하는 것은 아니다.WebIM을 참조하십시오.대체 텍스트 기본 사항, 2020년 9월 30일에 액세스.
  5. ^ W3C. F89: 2014년 11월 5일에 액세스한 WCAG 2.0의 유일한 콘텐츠인 이미지에서 null alt를 사용했기 때문에 실패(...)
  6. ^ WebIME은 다음과 같이 말한다: "링크 안에 있는 유일한 이미지는 절대 누락되거나 null이 되어서는 안 된다.alt기여하다화면 판독기가 링크를 식별하기 위해서는 SAGENT를 읽어야 하기 때문이다."웹 참조AIM, 컨텍스트는 Everything, 2020년 9월 30일에 접속.
  7. ^ W3C. Understanding Success Criterion 1.1.1; Understanding WCAG 2.0; 11 December 2008 [Retrieved 4 April 2010].
  8. ^ 위키미디어 버그 18682
  9. ^ 페트리, 헬렌, 해리슨, 찬드라, 그리고 뎁, 선딥.웹 상의 이미지를 설명하면서: 현재 관행과 미래에 대한 전망에 대한 설문 조사, Centre for Human Computer Interaction Design, City University London은 2010년 6월 8일에 접속했다.
  10. ^ W3C. H24: 이미지 맵의 영역 요소에 대한 텍스트 대체, WCAG 2.0 기법 제공.

외부 링크