HTMLimg 태그의 alt 속성, title 속성 사용 소개 및 분석

HTML img 태그: alt 속성과 title 속성. 많은 분들이 이 두 속성에 대해 헷갈려 하시는 것 같아서 어떻게 사용하면 되는지 제 생각을 적어봤습니다. 브라우저 공급업체가 표준을 굽히고 규칙을 따르지 않는 작업을 수행하면 문제가 발생하거나 적어도 혼란이 발생할 수 있습니다. 한 가지 예는 사용자 수가 많은 Windows용 Internet Explorer와 같은 일부 브라우저가 Alt 속성(종종 Alt 태그라고 잘못 호출됨)을 처리하는 방식입니다.

대체 텍스트는 도구 설명으로 사용되지 않으며, 더 정확하게는 이미지에 대한 추가 설명 정보를 제공하지 않습니다. 대신, title 속성을 사용하여 요소에 대한 추가 설명 정보를 제공해야 합니다. 이 정보는 대부분의 이미지 브라우저에서 도구 설명으로 표시되지만 제조업체는 제목 속성 텍스트를 다른 방법으로 자유롭게 렌더링할 수 있습니다.

많은 사람들이 이 두 가지 속성에 대해 혼란스러워하는 것 같아서(최근 Web Standards Group 메일링 리스트에 이 질문이 올라왔습니다), 이 두 속성을 어떻게 사용하는지에 대한 제 생각을 적어봤습니다.

alt 속성

은 이미지, 양식 또는 애플릿을 표시할 수 없는 사용자 에이전트(UA)입니다. Alt 속성은 대체 텍스트를 지정하는 데 사용됩니다. 대체 텍스트의 언어는 lang 속성으로 지정됩니다. 출처: 대체 텍스트를 지정하는 방법

Alt 속성("레이블"이 아닌 "속성"에 유의)에는 이미지 및 이미지 핫스팟에 필요한 교체 지침이 포함되어 있습니다. img, Area, input 요소(애플릿 요소 포함)에서만 사용할 수 있습니다. 입력 요소의 경우 alt 속성은 제출 버튼 이미지를 대체하기 위한 것입니다. 예:

alt 속성을 사용하는 것은 이미지를 볼 수 없는 시청자에게 추가 정보를 제공하는 것입니다. 귀하의 문서에 대한 설명입니다. 여기에는 기본적으로 이미지 표시를 지원하지 않거나 이미지 표시가 꺼진 브라우저를 사용하는 사용자, 시각 장애가 있는 사용자 및 화면 판독기를 사용하는 사용자가 포함됩니다. 대체 텍스트는 추가 설명 텍스트를 제공하는 대신 이미지를 대체하는 데 사용됩니다.

대체 텍스트를 작성하기 전에 텍스트가 실제로 이미지를 볼 수 없는 사람들에게 정보를 제공하고 맥락에 맞는지 확인하기 위해 신중하게 생각하세요. 장식용 이미지의 경우 "blue bullet" 또는 "spacer.gif"와 같은 관련 없는 대체 텍스트 대신 빈 값(alt="", 따옴표 사이에 공백 없음)을 사용하세요. 무시하지 마십시오. 무시하면 일부 스크린 리더는 이미지 파일 이름을 직접 읽고 Lynx와 같은 텍스트 브라우저는 이미지 파일 이름을 표시하므로 시청자에게는 그다지 유용하지 않습니다.

텍스트가 포함된 이미지에는 대체 텍스트를 설정하는 것이 가장 쉽습니다. 일반적으로 이미지에 포함된 텍스트를 alt 속성 값으로 사용할 수 있습니다.

대체 텍스트의 길이에 대해서는 WCAG 2.0(웹사이트 콘텐츠 가용성 지침 2.0)에서 다음을 참조하세요.

Alt 속성 값의 길이는 영어 100자 미만이어야 합니다. 또는 사용자는 교체를 확인해야 합니다. 텍스트를 가능한 한 짧게 유지하십시오.

'가능한 한 짧게, 필요한 만큼 길게'라고 이해합니다.

툴팁으로 표시하고 싶더라도 텍스트 요소에 alt 속성을 사용하지 마세요. 내가 아는 한, 이 기능은 Windows의 IE 브라우저와 이전 Netscape 4.*(Windows 버전)에서만 작동합니다. 어떤 Mac 브라우저도 이를 도구 설명으로 표시하지 않습니다.

브라우저에서 대체 텍스트를 도구 설명으로 표시하는 경우 Alt 속성을 잘못 사용하는 것이 좋습니다. 어떤 사람들은 의미 없는 대체 텍스트를 이미지를 표시할 수 없는 대체 텍스트가 아닌 추가 설명 정보로 생각하는 경향이 있기 때문에 쓰기 시작합니다. 다른 사람들은 도구 설명이 표시되는 것을 원하지 않아 alt 속성 값을 완전히 무시할 수도 있습니다. 이러한 잘못된 관행은 영상을 볼 수 없는 시청자에게 어려움을 야기합니다.

추가 설명 정보나 필수적이지 않은 정보를 보려면 제목 속성을 사용하세요.

title 속성

title 속성은 해당 속성이 설정된 요소에 대한 제안 정보를 제공합니다.
Source: title 속성

title 속성은 base, basefont, head, html, meta, param, script, title을 제외한 모든 태그에 사용할 수 있습니다. 그러나 그것은 필요하지 않습니다. 어쩌면 이것이 바로 많은 사람들이 언제 사용해야 하는지 이해하지 못하는 이유일 것입니다.

필수적이지 않은 추가 정보를 제공하려면 제목 속성을 사용하세요. 대부분의 시각적 브라우저는 마우스를 특정 요소 위로 가져갈 때 제목 텍스트를 도구 설명으로 표시합니다. 그러나 제목 텍스트를 렌더링하는 방법은 제조업체에 달려 있습니다. 일부 브라우저에서는 상태 표시줄에 제목 텍스트가 표시됩니다. 예를 들어 Safari 브라우저의 초기 버전이 있습니다.

제목 속성을 효과적으로 사용하는 방법은 링크에 설명 텍스트를 추가하는 것입니다. 특히 링크 자체가 링크 목적에 대해 명확하지 않은 경우에는 더욱 그렇습니다. 이렇게 하면 방문자는 링크가 어디로 연결되는지 알 수 있으며 전혀 관심이 없을 수도 있는 페이지를 로드하지 않게 됩니다. 또 다른 잠재적인 응용 분야는 날짜나 기타 필수적이지 않은 정보와 같은 이미지에 대한 추가 설명 정보를 제공하는 것입니다.

title 속성 값은 alt 속성 값보다 길게 설정할 수 있습니다. 그러나 일부 브라우저에서는 너무 긴 텍스트(예: 도구 설명 등)가 잘릴 수 있다는 점에 유의하세요. 예를 들어 Mozilla의 핵심 브라우저는 처음 60자만 표시할 수 있습니다. 이는 Mozilla 버그로 간주되며 주의해야 할 사항입니다.



사용하기 전에 생각해보세요.

제 조언은 대체 텍스트를 필수 요소로 유지하라는 것입니다. 대부분의 응용 프로그램에서는 공백으로 두어야 합니다(alt="")(따옴표 사이에 공백이 없어야 함). 이미지가 보는 사람에게 어떤 정보를 제공하는지, 이미지를 설명하기 위해 어떤 단어를 사용해야 하는지, 이미지를 볼 수 없는 사람에게 어떤 정보를 제공해야 하는지 생각해 보세요. 이미지를 볼 수 없는 사람에게 대체 텍스트를 "사진: CEO가 건물 밖에 서서 회색 양복과 검은 넥타이를 입고 하늘을 바라보고 있습니다"라고 적어주면 정말 도움이 될까요? 그렇게 생각하신다면 글을 쓰세요. 많은 경우 대체 텍스트를 비워두는 것이 더 좋다고 생각합니다.

title 속성은 엄격한 사용법을 제시하기 어렵습니다. 같은 페이지에 같은 링크 텍스트가 있지만 링크된 페이지가 다른 등 설명이 필요 없는 링크에 주로 사용합니다. 때로는 일부 버튼이나 양식 요소에 대해 더 설명적인 텍스트가 제공됩니다.
자세한 설명


이미지에 alt 속성 제한보다 긴 설명이 필요한 경우 몇 가지 옵션이 있습니다.

longdesc 속성을 사용하면 이미지의 텍스트 설명이 포함된 별도의 페이지에 대한 링크를 제공할 수 있습니다. 이는 뷰어를 다른 페이지로 연결하는 것을 의미하며, 이로 인해 이해가 어려울 수 있습니다. 또한, longdesc 속성에 대한 브라우저 지원은 일관성이 없으며 그다지 좋지 않습니다.

longdesc 속성에는 다른 페이지에 대한 링크 대신 현재 문서의 다른 부분(앵커)에 대한 링크가 포함될 수 있습니다. 접근성 각주에서 Andy Clarke는 이를 적용하는 방법을 아주 잘 설명합니다.

설명 링크(D 링크)를 사용하여 longdesc를 보완할 수 있습니다. 설명 링크는 대체 텍스트가 포함된 페이지에 대한 일반 링크입니다. 링크는 이미지 옆에 있으며 모든 브라우저에서 사용할 수 있습니다. 그 효과에 대해서는 다양한 의견이 있으며 저는 개인적으로 이 메모를 좋아하지 않습니다. WCAG 역시 WCAG 2.0용 HTML 기술 작업 초안에서 설명 링크는 "더 이상 사용되지 않습니다".

이미지에 대한 긴 설명이 모든 뷰어에게 유용하다면 다른 페이지에 연결하거나 숨기는 대신 동일한 문서 내에 간단히 표시하는 것이 좋습니다. 그래서 누구나 읽을 수 있습니다. 이는 간단하고 기술 수준이 낮은 접근 방식입니다.

HTMLimg 태그의 alt 속성 및 title 속성 사용에 대한 자세한 소개 및 분석은 PHP 중국어 웹사이트를 참고하세요!