이미지에는 이미지가 나타내는 정보 또는 기능을 설명하는 대체 텍스트가 있어야 합니다.
이렇게 하면 다양한 장애를 가진 사람들이 이미지를 사용할 수 있습니다. 이 튜토리얼에서는 이미지의 목적에 따라 적절한 대체 텍스트를 제공하는 방법을 설명합니다.
- 정보 제공 이미지 :
개념과 정보를 그래픽으로 표현하는 이미지로, 일반적으로 그림, 사진 및 일러스트레이션이 해당됩니다. 대체 텍스트는 이미지가 제시하는 필수 정보를 전달하는 간단한 설명 정도여야 합니다. - 장식 이미지 :
이미지의 유일한 목적이 페이지 이해에 중요한 정보를 전달하는 것이 아니라 페이지에 시각적 장식을 추가하는 것일 경우 빈 값의 대체 텍스트(alt="")를 제공합니다. - 기능적 이미지 :
링크 또는 버튼으로 사용되는 이미지의 대체 텍스트는 시각적 이미지가 아닌 링크 또는 버튼의 기능을 설명해야 합니다. 이러한 이미지의 예로는 인쇄 기능을 나타내는 프린터 아이콘이나 양식 제출 버튼 등이 있습니다. - 텍스트 이미지 :
이미지 내에 읽을 수 있는 텍스트가 표시되는 경우가 있습니다. 이미지가 로고가 아닌 경우 이미지에 텍스트를 넣지 마세요. 그러나 텍스트 이미지를 사용하는 경우에는 대체 텍스트에 이미지와 동일한 단어를 포함해야 합니다. - 그래프 및 다이어그램과 같은 복잡한 이미지 :
데이터 또는 자세한 정보를 전달하려면 이미지에 제공된 데이터 또는 정보에 해당하는 완전한 텍스트를 텍스트 대체물로 제공하세요. - 이미지 그룹 :
여러 이미지가 하나의 정보를 전달하는 경우 한 이미지의 대체 텍스트는 전체 그룹에 대한 정보를 전달해야 합니다. - 이미지 맵 :
클릭 가능한 영역이 여러 개 포함된 이미지의 대체 텍스트는 링크 집합에 대한 전반적인 컨텍스트를 제공해야 합니다. 또한 개별적으로 클릭할 수 있는 각 영역에는 링크의 목적 또는 대상을 설명하는 대체 텍스트가 있어야 합니다.
특정 이미지가 어떤 카테고리에 속하는지 결정하는 방법에 대한 간략한 개요는 alt 값의 결정을 도와주는 표를 참조하세요. 대체 텍스트는 이미지의 용도, 문맥 및 콘텐츠에 따라 작성자가 결정해야 합니다. 예를 들어 이미지에 있는 새의 정확한 종류와 생김새는 공원에 관한 웹사이트에서는 관련성이 낮고 간략하게만 설명할 수 있지만 새에 관한 웹사이트에서는 적절할 수 있습니다.
이것이 왜 중요한가요?
이미지와 그래픽은 많은 사람들, 특히 인지 및 학습 장애가 있는 사람들이 콘텐츠를 더 즐겁고 쉽게 이해할 수 있게 해줍니다. 이미지와 그래픽은 저시력자를 비롯한 시각 장애인이 콘텐츠에서 방향을 잡는 데 사용하는 단서 역할을 합니다.
그러나 이미지는 웹사이트에서 광범위하게 사용되며 접근성이 떨어지면 큰 장벽이 될 수 있습니다. 접근 가능한 이미지는 다음과 같은 여러 상황에서 유용합니다.
- 스크린 리더를 사용하는 사람 : 대체 텍스트를 소리내어 읽거나 점자로 렌더링할 수 있습니다.
- 음성 입력 소프트웨어를 사용하는 사람 : 사용자는 한 번의 음성 명령으로 버튼이나 링크된 이미지에 초점을 맞출 수 있습니다.
- 음성 지원 웹사이트를 탐색하는 사용자 : 텍스트 대체를 소리내어 읽을 수 있습니다.
- 모바일 웹 사용자 : 특히 데이터 로밍 시 이미지를 끌 수 있습니다.
- 검색 엔진 최적화 : 검색 엔진에서 이미지를 색인화할 수 있습니다.
참고
웹사이트에서 이미지를 제거하면(소위 '텍스트 전용 버전') 이러한 사용자 및 상황에서 웹사이트에 대한 접근성과 기능이 저하됩니다.
정보 제공 이미지
유익한 이미지는 짧은 구절이나 문장으로 표현할 수 있는 간단한 개념이나 정보를 전달합니다. 대체 텍스트는 일반적으로 이미지에 대한 문자 그대로의 설명이 아닌 시각적으로 표시되는 의미나 내용을 전달해야 합니다.
경우에 따라 자세한 문자 그대로의 설명이 필요할 수 있지만, 이는 이미지의 내용이 전달되는 정보의 전부 또는 일부인 경우에만 해당됩니다. 이미지를 정보 제공용 또는 장식용으로 취급할지 여부는 작성자가 페이지에 이미지를 포함하는 이유에 따라 판단합니다.
예 1 ) 기타 정보에 레이블을 지정하는 데 사용되는 이미지
이 예에서는 두 개의 이미지 아이콘(전화기, 팩스)을 보여줍니다. 각 이미지 뒤에는 전화 번호가 있습니다. 시각적 표시와 일관되게 "전화:" 및 "팩스:"라는 대체 텍스트가 각 번호와 연결된 장치를 식별하는 데 사용됩니다.
<p>
<img src="phone.png" alt="Telephone:"> 0123 456 7890
</p>
<p>
<img src="fax.png" alt="Fax:"> 0123 456 7891
</p>
예 2 ) 기타 정보를 보완하는 데 사용되는 이미지
다음 이미지는 방울을 착용한 개를 보여줍니다. 이 이미지는 이 종의 용도를 설명하는 인접한 텍스트를 보완합니다. 시각적으로 표시되지만 텍스트에 설명되지 않은 정보는 짧은 텍스트로 대체하여 설명할 수 있으며, 이 경우 대체 텍스트는 "목줄에 방울이 달린 개"입니다.
<p>
<img src="dog.jpg" alt="목줄에 방울이 달린 개">
비번 안내견은 종종 벨을 착용합니다. 이 벨은 시각장애인 ...
</p>참고
텍스트에 개가 방울을 착용하는 방법에 대한 설명이 포함된 경우 이미지는 중복된 것으로 간주되어 장식적인 것으로 간주될 수 있습니다. 텍스트에 언급되어 있지 않으므로 이미지는 정보를 제공하는 것으로 간주됩니다.
예 3 ) 간결한 정보를 전달하는 이미지
이 간단한 다이어그램은 병뚜껑이나 뚜껑을 풀 때 시계 반대 방향으로 돌리는 방법을 보여줍니다. 짧은 문장으로 정보를 설명할 수 있으므로 대체 텍스트인 "뚜껑을 아래로 누르고 시계 반대 방향(오른쪽에서 왼쪽으로)으로 돌립니다"를 alt 속성으로 지정할 수 있습니다.
<img src="cap.png" alt="뚜껑을 아래로 누르고 시계 반대 방향(오른쪽에서 왼쪽으로)으로 돌립니다." />
참고
1. 다른 기법은 이미지 대신 텍스트 대신 주요 콘텐츠 내에 지침을 제공하는 것입니다.
이 기법을 사용하면 모든 사람이 모든 정보를 텍스트로 사용할 수 있으며, 시각적으로 정보를 보는 것을 선호하는 사람에게는 일러스트
를 제공할 수 있습니다.
2. 다이어그램보다 더 많은 정보를 이미지로 전달하려는 경우 복잡한 이미지에 설명된 접근 방식 중 하나를 따르는 것이 더 나을 수 있습
니다. 예를 들어 이 다이어그램이 병에 표시되어 있다는 사실이나 병의 모양과 크기가 관련 정보인 경우 더 자세한 대체 텍스트를 사용
합니다.
예 4 ) 인상이나 감정을 전달하는 이미지
이 사진은 행복한 가족 그룹을 보여줍니다. 스톡 이미지이므로 개인을 식별해서는 안 됩니다. 이 이미지는 웹사이트 또는 웹사이트가 대표하는 회사가 가족 친화적이라는 인상을 주기 위해 사용되고 있습니다. 의도한 인상을 가장 잘 설명하는 텍스트는 "우리는 가족 친화적입니다"입니다.
<img src="family.jpg" alt="우리는 가족 친화적입니다." />참고
이 이미지의 목적이 인상을 전달하기보다는 단순히 페이지의 모양을 개선하는 것이라면 '장식용 이미지'에 표시된 것처럼 장식용으로 간주할 수 있습니다. “분위기에 사용되는 이미지"에서와 같이 장식적인 이미지로 간주할 수 있습니다. 이미지 사용 목적은 작성자가 결정합니다.
예 5 ) 파일 형식을 전달하는 이미지
이 예에서는 텍스트 링크 내의 형식 아이콘으로 식별되는 세 가지 형식으로 문서를 다운로드할 수 있습니다. 각 링크의 파일 형식을 구분하기 위해 'HTML', 'Word 문서', 'PDF'라는 텍스트 대체 아이콘이 있습니다.
<p>
<a href="…">
2012 Annual report and accounts
<img src="html5logo.png" alt="HTML" > (43KB)
</a>, also available in
<a href="…">
<img src="worddocument.png" alt="Word document"> (254KB)
</a>
or
<a href="…">
<img src="pdfdocument.png" alt="PDF"> (353KB)
</a>
format.
</p>참고
1. 형식 식별이 링크 텍스트의 일부로 작성된 경우 이미지는 장식용으로 간주되어 비어 있는 alt 속성(alt="")을 가질 수 있습니다. 클릭
가능한 영역에 포함하기 위해 텍스트와 동일한 링크 요소(<a>)에 남아있을 수 있습니다. 자세한 내용은 "기능성 이미지: 링크 텍스트
내의 로고 이미지"를 참조하세요.
2. 이 특정 예는 이미지가 링크 텍스트에 제공되지 않는 정보를 전달한다는 점에서 링크 텍스트 내의 기능성 이미지 아이콘과 유사합니다.
장식 이미지
장식 이미지는 페이지 콘텐츠에 정보를 추가하지 않습니다. 예를 들어 이미지가 제공하는 정보는 이미 인접한 텍스트를 사용하여 제공되거나 웹사이트를 시각적으로 더 매력적으로 만들기 위해 이미지가 포함될 수 있습니다.
이러한 경우에는 스크린 리더와 같은 보조 기술에서 무시할 수 있도록 비어 있는 대체 텍스트(alt="")를 제공해야 합니다. 이러한 유형의 이미지에 대한 텍스트 값은 스크린 리더 출력에 청각적 혼란을 가중시키거나 주제가 인접한 텍스트의 주제와 다른 경우 사용자의 주의를 분산시킬 수 있습니다. alt 속성을 제공하지 않으면 일부 스크린 리더에서는 이미지의 파일 이름을 대신 알려주므로 이 속성을 생략하는 것도 옵션이 아닙니다.
이미지를 장식용으로 처리할지 정보용으로 처리할지는 페이지에 이미지를 포함하는 이유에 따라 작성자만이 판단할 수 있습니다. 이미지는 장식용일 수 있습니다.
- 테두리, 스페이서 및 모서리와 같은 시각적 스타일링
- 텍스트의 모양을 개선하거나 클릭 가능한 영역을 늘리기 위해 링크 텍스트를 보조하는 경우
- 인접한 텍스트를 설명하지만 정보를 제공하지는 않는 경우('눈요기')
- 주변 텍스트에 의해 식별 및 설명됨
아래 예시에서는 <img> 요소를 사용하여 장식 이미지를 제공할 때 alt 속성을 사용하는 방법을 보여줍니다. 가능한 경우 장식 이미지는 CSS 배경 이미지를 사용하여 제공해야 합니다.
예 1 ) 페이지 디자인의 일부로 사용되는 이미지
이 이미지는 페이지 디자인에서 테두리로 사용되며 순전히 장식적인 목적으로 사용됩니다.
<img src="topinfo_bg.png" alt="" />
또한 스크린 리더를 사용하면 role=”presentation”을 사용하여 요소를 숨길 수 있습니다. 그러나 현재 이 기능은 비어있는 alt 속성을 사용하는 것만큼 널리 지원되지는 않습니다.
<img src="topinfo_bg.png" role="presentation" />
참고
스토리에서 장면이 바뀌거나 다른 주제로 전환하는 등 주제별 구분을 나타내기 위해 이미지를 사용하는 경우에는 <hr> 요소를 사용하여 보조 기술을 알리는 것이 적절할 수 있습니다.
예 2 ) 텍스트 링크의 일부로 장식 이미지 사용
이 크로커스 전구 그림은 링크를 더 쉽게 식별하고 클릭 가능한 영역을 늘리기 위해 사용되었지만 인접한 링크 텍스트(동일한 앵커의)에 이미 제공된 정보에 추가되지는 않습니다. 이 경우 이미지에 비어 있는 대체 값을 사용합니다.
<a href="crocuspage.html">
<img src="crocus.jpg" alt="" />
<strong> Crocus bulbs</strong>
</a>
예 3 ) 인접한 텍스트 대체 이미지
이 잠자는 개 그림은 이미 인접한 텍스트로 충분히 설명되어 있습니다. 이 정보를 반복할 필요가 없으며 이 이미지에는 비어 있는 대체 값을 사용할 수 있습니다.
<p>
<img src="sleepingdog.jpg" alt="" />
<strong>잠자는 개:</strong> ...
</p>
예 4 ) 분위기(눈요깃거리)에 사용되는 이미지
이 이미지는 페이지에 분위기나 시각적 흥미를 더하는 데만 사용됩니다.
<img src="tropical.jpg" alt="" />
참고
이 이미지의 목적이 단순히 페이지의 모양을 개선하기 위한 것이 아니라 식물을 식별하거나 다른 정보를 전달하기 위한 것이라면 정보 제공용으로 취급해야 합니다. 이미지의 사용 목적은 작성자가 결정합니다.
기능적 이미지
기능 이미지는 정보를 전달하기보다는 행동을 유도하는 데 사용됩니다.
버튼, 링크 및 기타 인터랙티브 요소에 사용됩니다. 이미지의 대체 텍스트는 이미지에 대한 설명이 아니라 시작될 작업(이미지의 목적)을 전달해야 합니다.
예를 들어 아래 예시와 같이 대체 텍스트는 '(프린터 이미지)'가 아닌 '이 페이지 인쇄', '돋보기'가 아닌 '검색', '예시닷컴 로고'가 아닌 '예시닷컴 홈페이지'가 되어야 합니다.
기능 이미지는 콘텐츠의 기능에 필수적이므로 대체 값이 누락되거나 비어 있으면 스크린 리더 사용자에게 심각한 문제가 발생합니다. 스크린 리더는 일반적으로 이미지 파일 이름, 이미지 URL 또는 링크 대상의 URL을 알려주므로 사용자가 이미지로 인해 시작될 작업을 이해하는 데 도움이 되지 않습니다.
예 1 ) 링크된 로고로 단독으로 사용된 이미지
다음 이미지는 W3C 홈 페이지로 연결되는 링크의 유일한 콘텐츠입니다. 이 이미지에는 링크가 사용자를 어디로 연결할지 나타내는 "W3C 홈"이라는 대체 텍스트가 있습니다. 다음 예제인 '링크 텍스트 내의 로고 이미지' 예제에서는 링크에 목적지를 식별하는 텍스트가 더 있는 경우 어떻게 해야 하는지에 대해 설명합니다.
<a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C 홈" />
</a>참고
1. 이 상황에서도 로고는 'W3C'라는 텍스트 이미지이지만, 이 경우 로고의 주요 기능은 홈페이지 링크이므로 텍스트 대체에 '홈'이라는 단어를 추가했습니다.
2. 로고로 사용되는 이미지는 다른 텍스트 이미지에 적용되는 일부 접근성 요구 사항(예: 최소 색상 대비 및 텍스트 크기 요구 사항 없음)이 면제됩니다.
예시 2 ) 링크 텍스트 내 로고 이미지
이 예에서는 W3C 로고가 W3C 홈 페이지로 연결되는 링크 내의 텍스트를 보완하는 데 사용됩니다. 이미지는 링크 텍스트에 이미 제공된 것과 다른 기능을 나타내거나 다른 정보를 전달하지 않으므로 중복 및 반복을 방지하기 위해 널(공백) 값(alt="")이 적용됩니다. 사실상 이미지는 링크 텍스트에 대한 장식적인 보조 또는 시각적 단서 역할을 합니다.
<a href="https://www.w3.org/">
<img src="w3c.png" alt="" /> W3C Home
</a>
예 3 ) 링크 텍스트 내에 정보를 전달하는 아이콘 이미지
이 예에서는 이미지가 링크 내의 텍스트를 따라가면서 링크가 새 창에서 열릴 것임을 사용자에게 알립니다. 아이콘의 의미를 전달하기 위해 '새 창'이라는 대체 텍스트가 있습니다.
<a href="https://www.w3.org/" target="_blank">
W3C Homepage <img src="new-window.png" alt="새 창" />
</a>참고
이 기법은 아이콘과 함께 AVI, ODF, MP3, PDF, Word 등과 같은 다양한 파일 형식을 나타내는 데 자주 사용됩니다. 이 경우 대체 텍스트는 각 아이콘이 나타내는 형식을 동일하게 전달해야 합니다(유익한 이미지를 참조하세요).
예 4 ) 기능이 있는 독립형 아이콘 이미지
다음 이미지는 인쇄 기능을 나타내는 프린터를 나타내는 아이콘입니다. 이 아이콘의 목적은 인쇄 대화 상자를 선택했을 때 활성화하는 것이므로 "이 페이지 인쇄"라는 텍스트 대안이 있습니다.
<a href="javascript:print()">
<img src="print.png" alt="이 페이지 인쇄" />
</a>
예 5 ) 버튼에 사용된 이미지
다음 이미지는 버튼에 독특한 스타일을 부여하는 데 사용됩니다. 이 경우 검색 요청을 시작하는 버튼이며 돋보기를 나타내는 아이콘입니다. 이미지의 대체 텍스트는 버튼의 목적을 전달하기 위해 "검색"입니다.
<input type="image" src="searchbutton.png" alt="검색" />
텍스트 이미지
텍스트 이미지는 읽히도록 의도된 텍스트를 표시합니다. 대부분의 웹 브라우저에서 현재 CSS 기능을 사용할 수 있으므로 이미지 기반 텍스트 표시보다는 CSS로 스타일이 지정된 실제 텍스트를 사용하는 것이 좋은 디자인 관행입니다. 실제 텍스트는 이미지보다 훨씬 유연합니다: 선명도를 잃지 않고 크기를 조정할 수 있으며 배경 및 텍스트 색상을 사용자의 읽기 선호도에 맞게 수정할 수 있습니다. 이미지는 크기를 조정할 때 왜곡되거나 픽셀화될 가능성이 더 높습니다. 드물지만 텍스트 이미지를 사용해야 하는 경우에는 대체 텍스트에 이미지에 표시된 텍스트와 동일한 텍스트가 포함되어야 합니다.
예 1 ) 장식 효과가 있는 스타일 텍스트
다음 이미지는 장식 효과가 있는 슬로건 텍스트를 전달하는 데 사용됩니다.
이미지 사용
이전에는 여러 브라우저에서 일관되게 렌더링되는 CSS 스타일링을 사용하여 이러한 텍스트를 만들 수 없었기 때문에 텍스트 이미지를 사용했습니다. 이 이미지의 대체 텍스트는 "도시에 대한 귀하의 접근성"로 이미지에 표시된 슬로건과 동일합니다. 장식 효과(양식화된 텍스트 및 그림자)는 관련성이 없으므로 설명하지 않았습니다.
<img src="access-city.png" alt="도시에 대한 귀하의 접근성." />
CSS3 사용
위 이미지의 시각적 효과는 CSS3와 임베디드 글꼴을 사용하여 만들 수 있습니다. 구형 브라우저를 지원해야 하는 작성자와 개발자는 스타일이 덜한 대체 텍스트를 사용할 수 없는 경우 이 이미지 예제가 유용할 수 있습니다.
브라우저 지원
이러한 효과를 표시하려면 다음 웹 기술을 지원하는 브라우저가 필요합니다.
- CSS Transforms
- CSS Fonts
<div class="tagline"><span>도시에 대한 귀하의 접근성</span></div>@font-face {
font-family: 'Harabara Hand';
src: url('harabarahand.ttf') format('truetype');
}
.background {
background-color: #FFF;
padding: 2em;
}
.tagline {
font-family: 'Harabara Hand', cursive;
text-transform: lowercase;
color: #226C8E;
font-size: 1.5em;
letter-spacing: -1px;
padding-left: 1em;
background-color: #DDD9D6;
box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.tagline span {
display: inline-block;
transform: rotate(-10deg);
}참고
코드 스니펫에는 공급업체 접두사가 표시되지 않습니다. CSS3 기능의 실험적 구현을 사용하여 이전 버전의 웹 브라우저와의 호환성을 높이기 위해 이러한 접두사를 추가할 수 있습니다.
예 2 ) 링크되지 않은 로고로 사용된 텍스트 이미지
다음 이미지는 웹 접근성 이니셔티브의 로고입니다. 이 이미지는 링크의 일부가 아니므로 대체 텍스트는 "웹 접근성 이니셔티브"입니다. 로고라는 점을 언급할 필요가 없습니다.
<img src="wai.png" alt="Web Accessibility initiative" />참고
1. 로고로 사용되는 이미지는 다른 텍스트 이미지에 적용되는 일부 접근성 요구 사항에서 면제됩니다. 예를 들어 최소 색상 대비 및 텍스트 크기 요구 사항이 없습니다.
2. 이 로고가 링크되면 기능적 이미지가 됩니다. 기능성 이미지를 참조하세요: 링크된 로고로 단독으로 사용되는 이미지를 참조하세요.
예 3 ) 수학 표현식
지금까지 수학식은 방정식과 특수 수학 기호를 HTML로 표현하기 어렵기 때문에 이미지로 표현되는 경우가 많았습니다. 그러나 MathML은 웹에서 접근 가능한 수학을 표현하는 데 선호되는 방식으로 부상하고 있습니다.
이미지 사용
아래 이미지는 반복되는 십진수(끝이 없는 십진수)를 표시합니다. 이 반복 숫자의 대체 텍스트는 '0.3333 반복'입니다. (이미지에서 반복은 소수점 넷째 자리의 '3' 위에 선으로 표시되어 있습니다.)"입니다.
이 특정 예에서는 재귀가 표시되는 방식이 중요하므로 텍스트 대안에도 설명되어 있습니다. 다른 이미지와 마찬가지로 작성자는 이미지가 전달하고자 하는 정보를 결정하고 그에 따라 텍스트 대안을 구성할 수 있는 가장 좋은 위치에 있습니다.
<img
src="0dot3333recurring.png"
alt="0.3333 반복. (반복은 소수점 넷째 자리의 '3' 위에 선으로 표시됩니다.)" />
MathML 사용
수학 표현식 이미지는 페이지 또는 웹사이트의 일반 콘텐츠에 예외적으로 적용되는 경우 등 예외적인 상황에서만 사용해야 합니다. 수학 표현식을 표시하는 데 가장 선호되는 방법은 수학 표현식을 의미적으로 표시할 수 있는 MathML입니다.
수학식이 콘텐츠의 상당 부분을 차지하는 경우(예: 온라인 수학 강좌)에는 MathML을 대신 사용해야 합니다. MathML은 프레젠테이션과 콘텐츠를 의미적으로 모두 표현하므로 더 많은 사용자가 더 쉽게 접근할 수 있습니다.
반복수의 간단한 예는 수학적 표현으로 내용과 표현을 간결하고 명확하게 설명하는 것이 얼마나 어려운지를 보여줍니다. 특히, 일부 수업 환경에서는 중요하지만 재귀를 나타내는 오버라인의 위치와 위치를 설명하는 것이 번거롭습니다. 더 복잡한 표현식이나 방정식의 경우 이미지 대신 텍스트를 사용하면 충분한 세부 정보를 간결하게 제공하지 못할 수 있습니다. MathML은 텍스트가 아닌 코드 내에서 이러한 의미를 제공하는 데 도움이 됩니다.
<math>
<mstack stackalign="right">
<msline length="1"/>
<mn> 0.3333 </mn>
</mstack>
</math>접근성 지원: MathML, 웹 브라우저 및 보조 기술
대부분의 웹 브라우저는 MathML을 올바르게 렌더링하기 위해 플러그인이 필요하며, 특히 이 예제에서 사용된 새로운 MathML 3.0 기능의 경우 더욱 그렇습니다. 아래 MathML 예제를 보려면 이 Firefox 플러그인이 필요할 수 있습니다.
MathJax와 같이 웹 브라우저용 MathML을 폴리필하는 일부 라이브러리는 접근성 기능을 지원합니다.
MathML에 대한 접근성 지원은 다양하지만 웹 브라우저와 보조 기술이 발전함에 따라 계속 개선되고 있습니다. 어떤 기술을 사용할지 결정하기 전에 MathML 지원을 평가하는 것이 중요합니다.
웹킷 기반 및 Mozilla 기반 브라우저의 MathML 상태에 대한 자세한 정보를 확인하세요.
참고
위의 코드에는 보조 기술에 콘텐츠와 프레젠테이션을 모두 전달하는 의미론적 정보가 포함되어 있습니다.
복잡한 이미지
복잡한 이미지에는 짧은 구절이나 문장으로 전달할 수 있는 것보다 더 많은 정보가 포함되어 있습니다. 일반적으로 다음과 같은 이미지가 이에 해당합니다.
- 순서도 및 조직도를 포함한 그래프 및 차트
- 페이지 텍스트가 사용자가 이미지를 이해할 수 있는지에 따라 달라지는 다이어그램 및 일러스트레이션
- 날씨 시스템과 같은 위치 또는 기타 정보를 보여주는 지도
이러한 경우 두 부분으로 구성된 텍스트 대체물이 필요합니다. 첫 번째 부분은 이미지를 식별하기 위한 짧은 설명이며, 적절한 경우 긴 설명의 위치를 표시합니다. 두 번째 부분은 이미지가 전달하는 필수 정보를 텍스트로 표현하는 긴 설명입니다. 다음 예는 이러한 짧은 설명과 긴 설명을 제공하는 데 사용할 수 있는 다양한 접근 방식을 보여줍니다.
긴 설명
이미지의 구성이 중요하여 긴 설명을 제공해야 하는 상황이 있습니다. 예를 들어, 막대형 차트에서 사용된 색상의 순서와 열의 상대적 높이는 차트가 나타내는 실제 값과 추세 외에도 차트의 구조에 대한 관련 정보일 수 있습니다.
복잡한 이미지는 많은 사람들, 특히 저시력자, 학습 장애가 있는 사람, 주제에 대한 경험이 부족한 사람에게는 이해하기 어려울 수 있습니다. 콘텐츠를 더 많은 사람에게 전달하려면 모든 사람이 이해할 수 있는 긴 설명을 제공하세요. 예를 들어 설명을 주요 콘텐츠의 일부로 표시합니다. 또한 이미지의 불필요한 복잡성을 줄이고 모든 사람이 이해하기 쉽게 만들 수도 있습니다.
더 복잡한 이미지는 함께 제공되는 텍스트에서 참조하고 요약하는 것도 좋은 방법입니다. 예를 들어 "다음 그래프는 1분기에는 방문자 수가 감소했지만 2분기에는 회복되었음을 보여줍니다."와 같은 참조 문구는 이미지가 전달하고자 하는 관련 정보를 파악하는 데 도움이 됩니다.
예시 1 ) 구조화된 정보를 포함하는 설명
이 예에서 웹사이트 방문자 통계의 막대형 차트에는 이미지의 alt 속성을 통해 제공되는 "사이트 1~3에 대한 2014년 1분기 월별 및 총 방문자를 보여주는 막대형 차트"라는 짧은 설명이 있습니다. 긴 설명은 시각적으로 표시되는 척도, 값, 관계 및 추세를 포함한 자세한 정보를 제공합니다. 예를 들어, 긴 설명은 막대형 차트에 인코딩된 사이트 1의 감소하는 값, 사이트 2의 일관된 값, 사이트 3의 증가하는 값을 지적할 수 있습니다. 다음 예에서 사용된 긴 설명 접근 방식은 이 섹션의 뒷부분에 설명되어 있습니다.
참고
이 이미지와 관련된 긴 설명 예시를 참조하세요.
아래 방법 중 첫 번째와 네 번째 방법은 웹 브라우저 및 검색 엔진과 같은 다른 프로그램에서 정보를 사용할 수 있도록 합니다.
접근 방식 1 ) 이미지 옆에 긴 설명에 대한 텍스트 링크 제공
이 접근 방식은 이미지 옆에 긴 설명이 포함된 별도의 웹 페이지 또는 동일한 웹 페이지의 섹션을 가리키는 텍스트 링크를 제공합니다. 링크 텍스트는 목적지를 명확히 하고 이미지와 연결되어야 합니다.
<p>
<img
src="chart.png"
alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트" />
<br>
<a href="2014-first-qtr.html">Example.com 사이트 방문자 2014년 1월부터 3월까지의 막대형 차트 텍스트 설명</a>
</p>이 접근 방식은 모든 웹 브라우저와 보조 기술에서 지원되며 모든 사람이 긴 설명을 사용할 수 있습니다. 그러나 링크는 의미론적으로 이미지와 연결되지 않습니다.
HTML5 <figure> 및 <figcaption> 요소를 사용하여 이미지와 링크를 의미적으로 그룹화할 수 있습니다. 그림에 role="group"을 추가하면 <figure> 요소의 기본 시맨틱을 지원하지 않는 웹 브라우저와의 하위 호환성을 유지할 수 있습니다.
<figure role="group">
<img
src="chart.png"
alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트">
<figcaption>
<a href="2014-first-qtr.html">Example.com 사이트 방문자 2014년 1월부터 3월까지의 막대형 차트 텍스트 설명</a>
</figcaption>
</figure>
접근 방식 2 ) alt 속성에 긴 설명의 위치 설명하기
이미지와 동일한 웹 페이지에 긴 설명이 제공되는 경우 이미지의 alt 속성을 사용하여 해당 위치를 설명할 수 있습니다. 위치 정보는 사용자가 콘텐츠를 찾는 데 도움이 되도록 명확하고 정확해야 합니다.
<p>
<img
src="chart.png"
alt="사이트 1~3에 대한 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대형 차트입니다. 사이트 방문자 전체 텍스트 제목 아래에 설명되어 있습니다.">
</p>
[…]
<h4>사이트 방문자 전체 텍스트</h4>
[…]
접근 방식 3 ) 이미지와 인접한 긴 설명(HTML5)을 구조적으로 연결하기
HTML5 <figure> 요소를 사용하여 이미지와 긴 설명을 모두 묶을 수 있습니다. 긴 설명(제목, 텍스트 및 표로 표시됨)은 <figcaption> 요소로 둘러싸입니다. 이 설명은 <figure> 요소의 의미를 전달하지 않는 웹 브라우저에서 포함된 <figure> 요소에 role="group"을 사용하여 이미지와 명시적으로 연결됩니다.
<figure role="group">
<img src="chart.png"
alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대형 차트는 아래에 자세히 설명되어 있습니다.">
<figcaption>
<h2>개요</h2>
<p>이 차트는 2014년 1분기 웹사이트 조회수를 보여줍니다...</p>
<h2>값</h2>
<table>
<caption>2014년 1월부터 3월까지 Example.com 사이트 방문자 수</caption>
<tr>…</tr>
</table>
</figcaption>
</figure>
접근 방식 4 ) longdesc를 통해 긴 설명에 대한 링크 제공
longdesc 속성에는 이미지에 대한 긴 설명을 제공하는 별도의 웹 페이지의 URI 또는 긴 설명을 제공하는 동일한 페이지의 요소를 참조하는 조각 식별자가 포함될 수 있습니다.
longdesc 속성에 긴 설명이 있는 다른 웹 페이지를 참조하는 URI가 포함된 경우 접근 방식 1(이미지 옆에 긴 설명에 대한 텍스트 링크)도 적용하는 것이 좋습니다. 이 방법은 longdesc 속성을 완전히 지원하지 않는 웹 브라우저 및 보조 기술을 위한 해결 방법입니다.
<img
src="chart.png"
alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트"
longdesc="2014-first-qtr.html">
<a href="2014-first-qtr.html">긴 설명</a>접근성 지원 : 긴 설명, 웹 브라우저 및 보조 기술
Firefox에서는 이미지의 컨텍스트 메뉴에 있는 '설명 보기'를 통해 긴 설명으로 연결된 긴 설명을 사용할 수 있습니다. 비슷한 방식으로 긴 설명 액세스 기능을 추가하는 공식 Chrome 확장 프로그램도 있습니다. Safari는 longdesc를 지원하지 않습니다. 다른 웹 브라우저에서는 현재 스크린 리더 사용자만 longdesc를 사용할 수 있습니다. 모바일 플랫폼은 현재 longdesc를 지원하지 않습니다.
위에서 언급한 이미지 컨텍스트 메뉴 외에 longdesc 속성의 존재를 시각적으로 표시하는 브라우저는 없습니다.
longdesc 속성에 # 뒤에 같은 웹 페이지에 있는 요소의 ID("해시 링크")가 포함된 경우, 이는 긴 설명을 제공하는 같은 웹 페이지의 요소를 나타냅니다. 웹 브라우저 및 보조 기술의 지원 여부는 다를 수 있지만 예시 2, 접근 방식 1과 유사한 사용 사례를 다룹니다. 긴 설명이 이미지와 가까운 곳에 있는 경우 (접근 방식 2를 적용하여) 추가 링크가 필요하지 않습니다.
<img
src="chart.png"
alt="사이트 1~3의 2014년 1분기 월별 및 총 방문자 수를 보여주는 막대 차트"
longdesc="#chart-longdesc">
[…]
<div id="chart-longdesc">
[…]
</div>
예 2: 텍스트 정보가 포함된 설명
WAI-ARIA aria-describedby 속성을 사용하면 longdesc 접근 방식과 유사한 방식으로 동일한 웹 페이지의 어느 곳에서나 제공되는 이미지의 설명에 연결할 수 있습니다. 속성 값은 긴 설명을 제공하는 요소의 ID입니다.
중요: aria-describedby가 참조하는 요소는 하나의 연속된 텍스트 단락으로 취급됩니다. 스크린 리더 및 기타 보조 기술은 제목 및 표와 같은 구조적 정보에 액세스할 수 없습니다. 따라서 구조적 관계를 표시하지 않고 해당 탐색 메커니즘 없이 포함된 요소의 텍스트를 읽거나 제공합니다. 따라서 이 접근 방식은 이전 예제에서와 같이 구조적 정보가 필요하지 않고 텍스트로만 구성된 긴 설명에 대해서만 작동합니다.
이 예에서는 웹 페이지에 있는 텍스트 단락을 사용하여 공작의 머리를 설명합니다.
<img src="peacock.jpg"
alt="수컷 공작새 머리"
aria-describedby="description" />
[…]
<p id="description">
수컷은 왕관의 금속성 파란색이며 머리의 깃털은 짧고 말려 있습니다. 머리의 부채꼴 볏은 깃털로 만들어져 있으며 검은색 축이 드러나 있고 연두색 물갈퀴로 끝이 있습니다. 눈 위에는 흰색 줄무늬가 있고 눈 아래에는 초승달 모양의 흰색 패치가 흰색 피부로 형성되어 있습니다. 머리 옆면에는 무지개 빛깔의 녹청색 깃털이 있습니다. 등에는 검은색과 구리색 무늬가 있는 비늘 모양의 청록색 깃털이 있습니다.
</p>
이미지 그룹
때로는 이미지 그룹을 함께 사용하여 하나의 정보를 나타내기도 합니다. 예를 들어 별표 아이콘 모음은 함께 등급을 나타냅니다. 이 경우 이미지 중 하나만 전체 컬렉션을 설명하는 대체 텍스트가 필요하고 다른 이미지는 보조 기술에서 무시되도록 비어 있는 alt 속성을 갖습니다.
다른 경우에는 이미지 그룹이 관련 이미지의 컬렉션을 나타낼 수 있습니다. 예를 들어, 주제별로 관련된 예술 작품 모음을 표시할 수 있습니다. 이 경우 각 이미지에는 그룹 내 관계뿐만 아니라 개별 이미지를 설명하는 대체 텍스트가 필요합니다.
예 1 ) 하나의 정보를 전달하는 여러 이미지
다섯 개의 이미지가 결합된 이 그룹은 제품 등급을 보여줍니다. 전체 평점을 나타내는 이미지 5개(채워진 별 3개, 반쯤 채워진 별 1개, 비어 있는 별 1개)가 있습니다. 첫 번째 이미지의 대체 텍스트는 "평점: 별 5개 중 3.5점"입니다. 다른 모든 이미지에는 null(비어 있는) alt 속성(alt="")이 있습니다.
Rating:
<img src="star-full.jpg" alt="3.5 out of 5 stars">
<img src="star-full.jpg" alt="">
<img src="star-full.jpg" alt="">
<img src="star-half.jpg" alt="">
<img src="star-empty.jpg" alt="">
예 2 ) 이미지 컬렉션
아래 예시에서는 HTML5 <figure> 및 <figcaption> 요소를 사용하여 컬렉션의 각 이미지에 캡션을 제공합니다. <figure> 요소는 중첩될 수 있으며, 이 예에서는 전체 이미지 컬렉션에 대한 캡션을 제공하는 데 사용됩니다. 그룹 값이 있는 WAI-ARIA 속성 role은 보조 기술에 이 그룹을 나타내는 데 사용되며, aria-labelledby는 figcaption 요소가 개별 그룹에 대한 레이블로 사용되도록 합니다.
참고: 웹 브라우저 및 보조 기술 지원은 이 특정 WAI-ARIA 속성 및 값에 따라 다릅니다.
<figure role="group" aria-labelledby="fig1">
<figcaption id="fig1">
The castle through the ages: 1423, 1756, and 1936 respectively.
</figcaption>
<figure role="group" aria-labelledby="fig11">
<img src="castle-etching.jpg"
alt="The castle has one tower, and a tall wall around it.">
<figcaption id="fig11">Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>
<figure role="group" aria-labelledby="fig12">
<img src="castle-painting.jpg"
alt="The castle now has two towers and two walls.">
<figcaption id="fig12">Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>
<figure role="group" aria-labelledby="fig13">
<img src="castle-fluro.jpg"
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption id="fig13">Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
</figure>
이미지 맵
클라이언트 측 이미지 맵은 사용자 상호 작용을 허용하는 <area> 요소('핫스팟')로 정의된 선택 가능한 영역으로 나뉘어진 이미지입니다. 일반적으로 선택 가능한 영역은 다른 페이지로 연결되는 링크입니다. 이미지 맵의 경우 <img> 요소 자체(정보 컨텍스트를 전달하기 위해)와 각 <area> 요소(링크 대상 또는 링크를 따라갈 경우 시작될 작업을 전달하기 위해) 모두에 텍스트 대체 텍스트가 필요합니다.
예 1 ) 개별 페이지로 연결되는 링크가 있는 조직도
다음 조직도는 각 이사의 홈페이지로 연결되는 링크를 제공하는 데 사용됩니다.
이미지의 대체 텍스트는 "이사회 및 관련 직원 :"입니다. 링크된 각 <area>에는 개인을 식별할 수 있는 "Davy Jones: 회장"와 같은 대체 텍스트가 있습니다. 개인에 대한 대체 텍스트에는 그래프에 관계도 명시되어 있습니다.
<img src="orgchart.png"
alt="Board of directors and related staff: "
usemap="#Map">
<map name="Map" id="Map">
<area
shape="rect"
coords="176,14,323,58"
href="…"
alt="Davy Jones: Chairman"
>
<area
shape="rect"
coords="81,75,226,114"
href="…"
alt="Carole Brewster: Company Secretary"
>
<area
shape="rect"
coords="6,138,155,182"
href="…"
alt="Harry H Brown: Marketing Director (reports to chairman)"
>
<area
shape="rect"
coords="175,138,323,182"
href="…"
alt="Paula Holbein: Sales Director (reports to chairman)"
>
<area
shape="rect"
coords="345,136,496,186"
href="…"
alt="Hugh Howard: Finance Director (reports to chairman)"
>
</map>이미지 맵에 대한 브라우저 구현은 작성 시점에 따라 다르므로 이 HTML 버그를 참조하세요. 다양한 구현을 수용하려면 다음 사항에 유의하세요.
- 모든 이미지 맵은 한 번만 사용하세요. 즉, 동일한 맵이 포함된 여러 이미지를 사용하려면 맵을 복제하고 다른 ID를 사용해야 합니다.
- <map> 요소를 이미지의 직접적인 형제 요소로 배치합니다.
참고
영역의 좌표가 이미지와 동일한 비율로 배율이 조정되지 않은 경우 일부 모바일 장치에서는 이미지 맵이 제대로 작동하지 않을 수 있습니다. 이를 보완하려면 동일한 페이지에 중복 텍스트 링크를 제공하세요.
alt 결정 트리
이 의사 결정 트리에서는 다양한 상황에서 <img> 요소의 alt 속성을 사용하는 방법을 설명합니다. 일부 유형의 이미지의 경우 텍스트 이미지 대신 장식용 이미지나 웹 글꼴에 CSS 배경 이미지를 사용하는 등의 대체 접근 방식이 있습니다.
이미지 사용 팁
- 적절한 텍스트 대체물 선택하기 웹 페이지를 이해해야 하는 상대방에게 전화로 웹 페이지를 소리 내어 읽어준다고 상상해 보세요. 이렇게 하면 이미지에 어떤 정보나 기능이 있는지 결정하는 데 도움이 됩니다. 정보가 없고 링크나 버튼이 아닌 것처럼 보이는 이미지는 장식용으로 처리하는 것이 안전합니다.
- 텍스트 대체 정보에 우선순위를 둡니다 가장 중요한 정보를 맨 앞에 배치하는 것을 목표로 합니다.
- 대체 텍스트의 길이 대체 텍스트는 이미지의 용도를 최대한 간결하게 설명해야 합니다. 짧은 구절이나 문장 이상의 설명이 필요한 경우 복잡한 이미지에서 설명한 긴 설명 방법 중 하나를 사용하는 것이 좋습니다.
- 반응형 디자인 텍스트 레이블이 있는 아이콘은 작은 화면에서 볼 때 텍스트 레이블이 잘 보이지 않는 경우가 많습니다. 아이콘이 해당 크기에서 읽을 수 있고, 텍스트 없이도 이해할 수 있으며, 텍스트 설명이 있는지 확인하세요.
- alt 속성 내 구두점
- 모든 텍스트의 경우 대체 텍스트에 구두점을 사용하면 정보를 더 쉽게 이해할 수 있습니다. 특히 이미지와 인접한 텍스트 사이에 공백 문자가 없는 경우 대체 텍스트에 공백 문자를 추가하여 스크린 리더가 읽을 때 단어가 함께 이어지는 것을 방지해야 합니다.
- 장식 이미지를 숨기기 위해 널(비어 있는) 텍스트 대체(alt="")를 사용하는 경우 따옴표 사이에 공백 문자가 없는지 확인합니다. 공백 문자가 있으면 보조 기술에서 이미지가 효과적으로 숨겨지지 않을 수 있습니다. 예를 들어 일부 스크린 리더는 따옴표 사이에 공백 문자를 넣어도 이미지가 있음을 알립니다.
- 텍스트 대체에 불필요한 정보가 있는 경우 일반적으로 대체 텍스트에 '이미지', '아이콘' 또는 '그림'과 같은 단어를 포함할 필요가 없습니다. 볼 수 있는 사람들은 이미 이 사실을 알고 있으며 스크린 리더는 이미지가 있음을 알려줍니다. 일부 상황에서는 그림, 사진, 일러스트레이션 등을 구분하는 것이 중요할 수 있지만 일반적인 용어는 피하는 것이 가장 좋습니다.
- SVG 그래픽
- SVG 그래픽은 다른 이미지 형식(PNG, JPEG, GIF)과 마찬가지로 <img> 요소의 src 속성에서 참조할 수 있습니다. 이 경우 이 튜토리얼의 예제는 SVG에도 사용할 수 있습니다.
- SVG 이미지는 HTML과 같은 태그로 구성되므로 해당 코드를 HTML5에서 직접 사용할 수도 있습니다. 이 경우 SVG 이미지 내의 <title> 요소에 텍스트 대안을 제공할 수 있습니다. 접근성 지원을 개선하기 위해 해당 제목은 예를 들어 <svg> 요소의 aria-labelledby 속성에서 참조해야 합니다.
- 로고 텍스트가 포함된 로고 이미지는 일부 접근성 요구 사항에서 면제됩니다. 예를 들어 최소 대비 요구 사항이 없습니다.
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">설정</title> [기타 svg 코드]
</svg>
기타 W3C 리소스
- 장애인의 웹 사용 방법에서 텍스트가 아닌 콘텐츠에 텍스트 대체물을 제공하는 것에 대한 배경 정보를 확인하세요.
- 사이트에서 이미지의 접근성을 테스트합니다. 빠른 이미지 텍스트 대체 확인.
- 텍스트 대체물 선택 시 좋은 사례와 나쁜 사례의 예는 데모 전후(BAD) 데모에서 확인할 수 있습니다.
묶음 글 목록
[A11Y] - 웹접근성 튜토리얼 - 2. 페이지 구조
[A11Y] - 웹접근성 튜토리얼 - 3. 메뉴(네비게이션)
[A11Y] - 웹접근성 튜토리얼 - 4. 이미지
이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.
'A11Y' 카테고리의 다른 글
| [번역] 웹접근성 튜토리얼 - 6. 폼 (0) | 2023.07.06 |
|---|---|
| [번역] 웹접근성 튜토리얼 - 5. 테이블(표) (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 3. 메뉴(네비게이션) (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 2. 페이지 구조 (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 1. 개요 (0) | 2023.07.06 |
