Alt 속성
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
`alt` 속성은 HTML의 `img` 및 `area` 태그에 사용되는 속성으로, 이미지를 로드할 수 없는 경우 이미지 대신 표시될 텍스트를 지정한다. 1993년 HTML 1.2 초안에 처음 도입되었으며, HTML 4.01부터 필수 속성이 되었다. `alt` 속성은 스크린 리더나 텍스트 기반 브라우저에서 이미지의 대체 텍스트로 사용되며, 검색 엔진 최적화(SEO)에도 영향을 미친다. W3C의 웹 콘텐츠 접근성 지침에 따르면, `alt` 속성은 이미지의 의미와 의도를 전달해야 하며, 장식용 이미지는 빈 문자열(`alt=""`)로 지정해야 한다. 웹사이트의 적절한 `alt` 속성 부재는 접근성 관련 소송의 원인이 되기도 한다.
더 읽어볼만한 페이지
- 웹 접근성 - 보조과학기술
보조과학기술은 이동, 시각, 청각, 의사소통, 인지, 생활 등을 보조하는 기술로, 휠체어, 보청기, 스크린 리더, AAC 장치 등이 있으며, 작업 치료 분야에서 독립성 증진을 위해 활용된다. - 웹 접근성 - 웹 콘텐츠 접근성 가이드라인
웹 콘텐츠 접근성 가이드라인(WCAG)은 장애인을 포함한 모든 사용자가 웹 콘텐츠를 쉽게 이용하도록 설계된 국제적인 지침으로, 인식 가능성, 운용 가능성, 이해 가능성, 견고성의 4가지 원칙을 기반으로 하며, 여러 국가에서 법적으로 웹 접근성 준수를 의무화하고 있다. - HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다. - HTML - HTML 편집기
HTML 편집기는 HTML 마크업 언어로 작성된 웹 페이지 소스 코드를 편집하는 소프트웨어로, 텍스트 기반 편집 방식과 WYSIWYG 방식이 있으며, 구문 강조 등의 기능을 제공하여 코딩 편의성을 높인다.
| Alt 속성 | |
|---|---|
| 설명 | |
| 용도 | HTML 요소가 렌더링되지 못할 때 나타나는 대체 텍스트 |
| HTML 요소 | |
| 관련 요소 | meta div and span blink marquee |
| 관련 속성 | alt 속성 |
| 기타 | |
| 관련 기술 | Dynamic HTML HTML5 XHTML HTML 요소 HTML 속성 HTML 프레임 HTML 편집기 문자 인코딩 Document Object Model Browser Object Model 스타일 시트 CSS 글꼴 웹 색상 JavaScript Web3D WebGL WebGPU WebXR W3C WHATWG 쿼크 모드 웹 스토리지 렌더링 엔진 |
2. 역사
alt 속성은 1993년 HTML 1.2 초안에 처음 도입되어 텍스트 기반 브라우저를 지원했다.[1] 1999년에 발표된 HTML 4.01에서는 img 및 area 태그에 이 속성을 필수로 적용하도록 했고,[2] input 태그와 더 이상 사용되지 않는 applet 태그에는 선택 사항으로 두었다.[3]
과거 인터넷 익스플로러 7 및 그 이전 버전에서는 alt 속성의 텍스트를 툴팁으로 표시하는 오류가 있었다. 이는 월드 와이드 웹 컨소시엄(W3C)의 HTML 표준을 따르지 않는 동작이었다.[4] 이 때문에 많은 웹 개발자들이 이미지에 대한 추가 정보를 보여주는 툴팁을 표시할 때, 본래 용도인 title 속성 대신 alt 속성을 잘못 사용하는 경우가 많았다.[5][6] 이러한 문제는 2009년에 출시된 인터넷 익스플로러 8부터 alt 속성이 더 이상 툴팁으로 표시되지 않도록 수정되었다.[7]
3. 사용법
alt 속성의 텍스트는 이미지를 불러올 수 없을 때 해당 이미지를 대신하여 표시되며, 이때 웹 페이지 내용의 본래 의도가 바뀌지 않도록 하는 역할을 한다.[8] W3C의 웹 콘텐츠 접근성 지침(WCAG)에 따르면, alt 속성은 이미지 자체를 단순히 묘사하는 것이 아니라 이미지의 의미와 목적을 전달해야 한다.[9] 예를 들어, 어떤 기관의 로고 이미지라면 alt 속성에는 로고의 시각적 특징보다는 'OO기관 로고'와 같이 해당 기관의 로고임을 명시하는 것이 적절하다.[10][11] alt 속성은 이미지에 대한 짧고 간결한 설명을 제공하기 위한 것이며, 더 길고 자세한 설명이 필요할 경우에는 `longdesc` 속성을 사용할 수 있다. 다만 `longdesc` 속성은 alt 속성을 보완할 뿐 대체하지는 않는다.[2]
alt 속성은 웹 접근성을 높이는 데 중요한 역할을 한다. Orca와 같은 스크린 리더는 시각 장애인 사용자를 위해 이미지 대신 alt 텍스트를 읽어준다.[12] Lynx와 같은 텍스트 기반 웹 브라우저는 이미지를 표시할 수 없으므로 이미지 대신 alt 텍스트를 보여준다 (만약 이미지가 클릭 가능한 버튼이라면 `value` 속성값을 표시하기도 한다).[13] 일반적인 GUI 기반 브라우저는 기본적으로 이미지를 보여주지만, 사용자가 이미지 속성을 확인하거나, 브라우저 설정을 통해 이미지 표시를 껐거나, 혹은 기술적인 문제로 이미지를 불러오지 못하는 경우에는 alt 텍스트를 대신 표시한다.[14]
정보를 전달하지 않고 순전히 꾸미기 위한 목적으로 사용되는 이미지는 HTML 마크업보다는 CSS를 이용해 배경 이미지 등으로 처리하는 것이 W3C의 권장 사항이다. 만약 HTML을 사용해 장식용 이미지를 넣어야 한다면, 이미지에 아무런 의미가 없다는 것을 명시하기 위해 `alt=""`와 같이 빈 alt 속성을 사용하는 것이 좋다.[17] 이렇게 하면 스크린 리더 사용자나 텍스트 기반 브라우저 사용자가 불필요한 정보를 건너뛰고 페이지 내용을 더 쉽게 파악할 수 있다. 만약 alt 속성이 아예 생략되면, 이미지를 표시할 수 없는 브라우저는 이미지의 URL 주소 등 식별 정보를 대신 표시하게 되어 사용자에게 혼란을 줄 수 있다.[18][19] 2021년 Google Lighthouse 감사 결과, 검사된 alt 속성 중 27%가 비어 있었으며, 이들 중 상당수는 장식용이 아닌 정보 전달 목적의 이미지였다는 문제가 지적되기도 했다.[20]
예를 들어, 오른쪽에 보이는 덴마크 국기 이미지에 대한 alt 속성은 다음과 같이 작성될 수 있다.
이 경우, 스크린 리더 사용자는 이미지 대신 "빨강 배경에 하양 십자의 깃발이 하늘에서 펄럭이고 있으며, 깃발의 십자 세로 막대는 약간 깃대에 가깝다."라는 설명을 듣게 된다. 물론, 문맥에 따라서는 "덴마크 국기"와 같이 더 간결하게 작성할 수도 있다.
3. 1. 검색 엔진 최적화 (SEO)
alt 속성에 설명을 추가하면 검색 엔진 최적화(SEO)에 도움이 된다. Google Images와 같은 이미지 검색 엔진은 이 설명을 활용하여 웹사이트의 관련 이미지를 찾아 검색 결과에 표시할 수 있다.[15] 또한, 이미지가 아닌 일반 텍스트 검색 결과에서도 alt 속성 안의 텍스트는 페이지의 다른 일반 텍스트처럼 검색 엔진에 의해 읽힌다.[16]
4. 흔한 오해
alt 속성은 반드시 이미지의 내용을 기술할 필요는 없으며, 문맥, 이미지를 배치하는 목적, 그리고 이미지를 볼 수 없는 사람들에게 대신 어떤 문자열을 표시하는 것이 가장 유용한지도 고려해야 한다. 대체 텍스트란 즉 이미지의 "대체"가 되는 것이므로, 일반적으로는 이미지의 목적을 기술하는 경우가 많다. 예를 들어, 경고 표시 이미지의 대체 텍스트는 "노란색 배경의 삼각형에 검은색 테두리, 가운데에 느낌표"가 아니라, 간단하게 "경고!"로 해야 한다. 단, 주제가 경고 표시의 형태인 경우, 전자의 대체 텍스트가 더 적절하다고 할 수 있다.
Internet Explorer 7 및 그 이전 버전에서는 alt 속성을 툴팁으로 렌더링했지만, 이는 웹 표준 규격에 맞지 않는 구현이었다.[32][33] 이 잘못된 구현으로 인해, 많은 웹 개발자들이 alt 속성을 오용하여 이미지의 추가 정보를 툴팁으로 표시하기 위해 그 정보를 alt 속성에 기술하는 상황이 발생했다.[34] 이러한 목적을 위해서는 title이라는 별도의 속성이 존재한다.[35] 이 문제는 Internet Explorer 8에서 수정되어, alt 속성이 더 이상 툴팁으로 잘못 렌더링되지 않게 되었다.[36]
alt 속성을 실수로 "alt 태그"(alt tag)라고 부르는 경우가 있는데, 이는 잘못된 표현이다. alt는 HTML 요소(tag)가 아니라 HTML 속성이다.[33][37][38]
5. 장식용 이미지
W3C는 정보를 전달하지 않고 순전히 장식적인 목적의 이미지는 HTML 마크업 대신 CSS를 사용하여 지정할 것을 권장한다.[17][39] 장식적인 이미지는 콘텐츠에 특별한 의미를 더하지 않으며 추가 정보도 제공하지 않는다. 만약 HTML을 사용하여 장식용 이미지를 표시해야 할 경우, W3C는 alt=""와 같이 빈 alt 속성 값을 포함할 것을 권장한다.[17][40]
이렇게 빈 alt 속성을 사용하면 스크린 리더 사용자나 텍스트 기반 웹 브라우저 사용자가 의미 없는 이미지 정보를 건너뛰고 웹 페이지 내용을 더 쉽게 파악할 수 있다.[18] 만약 alt 속성이 아예 제공되지 않으면, 이미지를 표시할 수 없는 브라우저는 해당 이미지를 건너뛰지 않고 이미지의 URL이나 다른 식별 표시를 대신 읽거나 보여주게 된다.[18] 사용자는 단순히 URL만으로는 해당 이미지가 내용과 관련이 있는지, 아니면 단순히 장식용인지 판단하기 어렵기 때문에 혼란을 느낄 수 있다.[19]
참고로, 2021년 Google Lighthouse 감사 결과에 따르면, 감사 대상 alt 속성 중 27%가 비어 있었으며, 이 중 상당수는 실제로는 장식용이 아닌 정보성 이미지였다는 문제점이 지적되기도 했다.[20]
6. 법적 문제
웹사이트 접근성 문제, 특히 이미지에 대한 적절한 alt 속성이 제공되지 않아 정보 접근에 어려움을 겪는 사용자들이 소송을 제기하는 사례가 해외에서 발생하고 있다.[18] 이는 시각 장애인 등 웹사이트 이용에 어려움을 겪는 사용자의 권리와 직결되는 문제로, 여러 국가에서 법적 분쟁의 대상이 되어 왔다. 대표적인 해외 사례로는 호주와 미국 등에서 alt 속성 부재를 이유로 제기된 소송들이 있으며, 이는 웹사이트 운영에 있어 접근성 확보가 법적 의무가 될 수 있음을 시사한다. 구체적인 해외 소송 사례는 하위 문단에서 다룬다.
6. 1. 해외 사례
웹사이트 접근성 문제와 웹사이트의 적절한 alt 속성 부재와 관련하여 많은 소송이 제기되어 왔다.[18]2000년에 있었던 ''매과이어 대 시드니 올림픽 조직 위원회'' 소송은 대표적인 사례 중 하나이다. 이 소송은 호주의 한 시각 장애인이 시드니 올림픽 조직 위원회의 공식 웹사이트(www.olympics.com) 이미지에 alt 속성이 없어 내용을 파악할 수 없다는 이유로 제기한 것이었다.[21] 호주 인권 위원회는 해당 웹사이트가 시각 장애인의 정보 접근을 위한 표준을 지키지 않아 차별에 해당한다고 판결했다.[22] 이 소송을 계기로 호주 연방, 주, 자치령 정부는 광대역 통신 및 디지털 경제부를 통해 모든 정부 웹사이트(.gov.au)에 대해 W3C의 접근성 지침을 따르기로 공동 발표했다.[23]
미국에서도 이미지에 alt 속성이 없어 미국 장애인법 (ADA)을 위반했다는 이유로 여러 소송이 제기되었다.[24] 미국 법무부는 alt 속성 부재를 웹사이트 접근성을 가로막는 장벽의 한 예시로 명시하고 있다.[25] 2006년의 ''전미 시각 장애인 연맹 대 타겟사'' 소송은 타겟사(Target)의 온라인 쇼핑몰인 Target.com이 이미지에 alt 속성을 사용하지 않아 ADA를 위반했다고 주장한 집단 소송이었다.[26] 이 소송은 미국의 웹사이트 접근성 및 ADA 준수와 관련하여 중요한 법적 선례를 남겼다.[27]
참조
[1]
웹사이트
Hypertext Markup Language (HTML) Internet Draft version 1.2
https://www.w3.org/M[...]
IETF IIIR Working Group
2010-09-18
[2]
웹사이트
13 Objects, Images, and Applets
http://www.w3.org/TR[...]
World Wide Web Consortium
2005-12-04
[3]
웹사이트
Use the alt attribute to describe the function of each visual
https://www.w3.org/Q[...]
2022-10-14
[4]
웹사이트
Why doesn't Mozilla display my alt tooltips?
https://developer.mo[...]
2009-07-22
[5]
웹사이트
Use of ALT texts in IMGs
https://www.htmlhelp[...]
2022-10-16
[6]
웹사이트
7.4.3 The title attribute
http://www.w3.org/TR[...]
W3C
2009-07-22
[7]
웹사이트
What's New in Internet Explorer 8 – Accessibility and ARIA
http://msdn.microsof[...]
Microsoft
2009-07-22
[8]
웹사이트
HTMLImageElement.alt
https://developer.mo[...]
2022-10-14
[9]
웹사이트
Using alt attributes on img elements
https://www.w3.org/T[...]
2022-10-13
[10]
웹사이트
Logo Alt Text
https://sc.edu/about[...]
2022-10-15
[11]
웹사이트
Google Explains Alt Text for Logos & Buttons
https://www.searchen[...]
2022-11-03
[12]
웹사이트
Text Art: Rendering images as text
https://www.linux-ma[...]
2022-10-14
[13]
웹사이트
Lynx Users Guide v2.8.9
https://lynx.invisib[...]
2022-10-15
[14]
웹사이트
Image ALT Text
https://accessibilit[...]
2014-10-06
[15]
웹사이트
Google Images best practices
https://developers.g[...]
2022-10-14
[16]
웹사이트
Google: Alt Text Only A Factor For Image Search
https://www.searchen[...]
2022-10-14
[17]
웹사이트
Embedded content – HTML 5
https://www.w3.org/T[...]
2017-06-29
[18]
논문
Monitoring for Accessibility and University Websites: Meeting the Needs of People with Disabilities
https://eric.ed.gov/[...]
2022-10-14
[19]
논문
A Longitudinal Study of Website Accessibility: Have Social Work Education Websites Become More Accessible?
http://www.tandfonli[...]
2022-10-14
[20]
웹사이트
Part II Chapter 9 – Accessibility
https://almanac.http[...]
2022-10-14
[21]
뉴스
Battle to be equal
https://www.newspape[...]
2022-10-14
[22]
웹사이트
Website 'discriminated against blind'
https://www.theguard[...]
2022-10-14
[23]
웹사이트
Seventh Ministerial meeting of the Online Council – Media release
http://www.dbcde.gov[...]
2022-10-14
[24]
논문
What retailers need to understand about website inaccessibility and disabled consumers: Challenges and opportunities
https://onlinelibrar[...]
2020-09
[25]
웹사이트
Guidance on Web Accessibility and the ADA
https://beta.ada.gov[...]
2022-10-14
[26]
웹사이트
Websites for the Blind: Is This The Next 'Year 2000 Compliant' Requirement?
http://localtechwire[...]
WRAL-TV
2022-10-14
[27]
서적
Proceedings of the 41st Annual Hawaii International Conference on System Sciences (HICSS 2008)
IEEE
2022-10-14
[28]
문서
クローズドキャプション、字幕放送、聴覚障害者、字幕
[29]
웹사이트
Hypertext Markup Language – 2.0
https://datatracker.[...]
World Wide Web Consortium
2017-04-04
[30]
웹사이트
13 Objects, Images, and Applets
https://www.w3.org/T[...]
World Wide Web Consortium
2017-04-04
[31]
웹사이트
Alternative Text
http://webaim.org/te[...]
2015-09-03
[32]
웹사이트
Why doesn’t Mozilla display my alt tooltips?
https://developer.mo[...]
2009-07-22
[33]
웹사이트
Alt attribute (alt tag, alt tooltip)
http://annevankester[...]
2009-07-22
[34]
웹사이트
正しい実装をしたMozilla FirefoxのBugzillaではこの正しい実装がバグとして報告されたほどである。
https://bugzilla.moz[...]
2017-04-04
[35]
웹사이트
7.4.3 The title attribute
https://www.w3.org/T[...]
W3C
2009-07-22
[36]
웹사이트
What's New in Internet Explorer 8 – Accessibility and ARIA
http://msdn.microsof[...]
Microsoft
2009-07-22
[37]
웹사이트
It’s alt attribute, not alt tag
http://www.456bereas[...]
2005-11-07
[38]
웹사이트
Alt tags
http://www.autisticc[...]
2004-07-20
[39]
웹사이트
Embedded content - HTML 5.1 Nightly
http://www.w3.org/ht[...]
2013-01-07
[40]
웹사이트
HTML5: Techniques for providing useful text alternatives
http://dev.w3.org/ht[...]
W3C
2013-01-07
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com