혼란스러운 대체와 제목

브라우저 판매자는 규칙을 따르지 않고 표준을 왜곡하고 스스로 일을하여 일부 문제를 일으키거나 적어도 혼란을 일으킬 수 있습니다. 한 가지 예는 일부 브라우저가 Windows에 많은 사용자가있는 IE 브라우저와 같이 Alt 속성 (일반적으로 Alt Tags라고 함)을 처리하는 방법입니다.

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

많은 사람들 이이 두 가지 속성에 의해 혼란스러워 보이기 때문에 (최근 웹 표준 그룹 메일 링리스트에서 질문이 더 일반적이되었습니다), 나는 그것들을 사용하는 방법에 대한 나의 생각을 적어 두었습니다.

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

ALT 속성 ( "태그"가 아닌 "속성"에 중점을 둡니다)에는 이미지 및 이미지 핫스팟에 필요한 교체 지침이 포함됩니다. IMG, 영역 및 입력 요소 (애플릿 요소 포함)에서만 사용할 수 있습니다. 입력 요소의 경우 ALT 속성은 제출 버튼의 이미지를 대체하기위한 것입니다. 예 : <입력 유형 = "image"src = "image.gif" />.

Alt 속성을 사용하여 문서에서 이미지를 볼 수없는 시청자에게 텍스트 설명을 제공하십시오. 여기에는 이미지 디스플레이를 지원하지 않는 브라우저를 사용하거나 이미지 디스플레이가 꺼져있는 사용자, 시각 장애인 사용자 및 스크린 리더를 사용하는 사용자가 포함됩니다. 대체 텍스트는 추가 캡션을 제공하지 않고 이미지를 대체하는 데 사용됩니다.

교체 텍스트를 작성하기 전에 신중하게 생각하여 해당 단어가 이미지를보고 상황에서 의미가있는 사람들에게 예시 정보를 제공하도록하십시오. 장식 이미지의 경우 "Blue Bullet"또는 "Spacer.gif"와 같은 관련없는 대체물을 사용하는 대신 빈 값 (인용문 중간에 공간이없는 Alt = "")을 사용하십시오. 그것을 무시하지 마십시오. 무시하면 일부 화면 리더는 이미지 파일의 파일 이름을 직접 읽으며 Lynx와 같은 텍스트 브라우저에는 이미지 파일의 파일 이름이 표시되며 브라우저에는 거의 사용되지 않습니다.

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

교체 텍스트의 길이는 WCAG 2.0 (웹 사이트 콘텐츠 유용성 가이드 2.0)이 무엇을 참조하십시오 :

Alt 속성 값은 100 개의 영어 문자보다 작아야하거나 사용자는 교체 텍스트가 가능한 한 짧지 않도록해야합니다.

나는 그것을 "가능한 한 가능한 한 짧게"라고 이해합니다.

도구 팁으로 표시 되더라도 텍스트 요소에 Alt 속성을 사용하지 마십시오. 내가 아는 한, 그것은 Windows IE 브라우저와 고대 Netscape 4에서만 작동합니다.* (Windows 버전). Mac의 브라우저가 도구 팁으로 표시되지 않습니다.

브라우저가 교체 텍스트를 도구 팁으로 표시하면 Alt 속성을 잘못 사용하는 동작도 권장됩니다. 어떤 사람들은 이미지를 표시 할 수없는 대체품이 아니라 추가 환상 정보라고 생각하는 경향이 있기 때문에 무의미한 대체 텍스트를 작성하기 시작합니다. 다른 사람들은 도구 팁이 나타나기를 원하지 않을 수 있으며 Alt 속성 값을 완전히 무시합니다. 이러한 잘못된 관행은 이미지를 볼 수없는 시청자에게 어려움을 초래했습니다.

추가 지침 및 비 필수 정보는 제목 속성을 사용하십시오.

제목 속성은이 속성을 설정하는 요소에 대한 제안을 제공합니다. 출처 : 제목 속성.

제목 속성은 Base, BaseFont, Head, HTML, Meta, Param, 스크립트 및 제목을 제외한 모든 태그에서 사용할 수 있습니다. 그러나 필요하지 않습니다. 어쩌면 많은 사람들이 언제 사용 해야하는지 이해하지 못하는 이유 일 것입니다.

제목 속성을 사용하여 필수적인 추가 정보를 제공하십시오. 대부분의 비주얼 브라우저는 마우스가 특정 요소에 매달려있을 때 제목 텍스트를 도구 팁으로 표시하지만 제목 텍스트를 렌더링하는 방법을 결정하기 위해 제조업체에 달려 있습니다. 일부 브라우저는 상태 표시 줄에 제목 텍스트를 표시합니다. 예를 들어, Safari 브라우저의 이전 버전입니다.

제목 속성은 링크에 설명 텍스트를 추가하는 것이 좋습니다. 링크 자체가 링크의 목적을 명확하게 표현하지 않을 때 특별합니다. 이를 통해 방문자는 해당 링크가 어디로 가져갈 위치를 알 수 있으며, 완전히 바람직하지 않은 페이지를로드하지 않습니다. 또 다른 잠재적 인 응용 프로그램은 날짜 또는 기타 비 필수 정보와 같은 이미지에 대한 추가 예시 정보를 제공하는 것입니다.

제목 속성 값은 ALT 속성 값보다 길 수 있습니다. 그러나 일부 브라우저는 너무 긴 텍스트 (예 : 툴팁 또는 기타)를 자릅니다. 예를 들어, Mozilla의 코어 브라우저는 처음 60 자만 표시 할 수 있습니다. 이것은 Mozilla 버그로 간주되며주의를 기울여야합니다.

제 조언은 교체 텍스트가 필수적인지 확인하는 것입니다. 대부분의 응용 프로그램에서는 비워 두어야합니다. Alt = ""(두 인용문에는 공간이 없음). 이러한 이미지, 이러한 견해가 제공하는 정보, 설명하기 위해 어떤 텍스트를 사용해야하는지 또는 이미지를 보지 않는 사람들에게 어떤 정보를 제공해야합니까? 대체 텍스트를 "사진 : CEO는 건물 밖에 서서 회색 양복과 검은 넥타이를 착용하고 하늘을 바라 보는 것"으로 이미지를 볼 수없는 사람들에게 도움이됩니까? 그렇게 생각한다면, 당신은 그것을 쓸 수 있습니다. 대부분의 경우 교체 텍스트를 비워 두는 것이 낫다고 생각합니다.

제목 속성의 경우 엄격한 지침을 제공하기가 어렵습니다. 제 사용의 대부분은 동일한 페이지의 동일한 링크 텍스트 및 다른 링크 페이지와 같이 자체 설명 할 수없는 링크에 있습니다. 때로는 일부 버튼이나 양식 요소에 대해 더 많은 캡션 텍스트가 제공됩니다.

이미지에 더 긴 설명이 필요하고 ALT 속성의 한계를 초과하면 몇 가지 옵션이 있습니다.

Longdesc 속성은 이미지의 텍스트 설명이 포함 된 별도의 페이지에 대한 링크를 제공하는 데 사용될 수 있습니다. 이는 시청자를 다른 페이지에 연결하는 것을 의미하므로 이해가 어려워 질 수 있습니다. 또한 Longdesc 속성에 대한 브라우저 지원도 일치하지 않으며별로 좋지 않습니다.

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

설명 링크 (D 링크)를 사용하여 Longdesc를 보충 할 수 있습니다. 설명 링크는 대체 텍스트가 포함 된 페이지에 연결되는 일반 링크입니다. 링크는 이미지 옆에 배치되며 모든 브라우저에서 괜찮습니다. 사람들은 그 효과에 대해 많은 의견을 가지고 있으며, 나는 내 개인적인 의견 에이 초점을 크게 좋아하지 않습니다. WCAG는 또한 WCAG 2.0을위한 작업 초안 HTML 기술에서 설명 링크가 "비 승인"됩니다.

이미지에 대한 긴 설명이 모든 시청자에게 유용한 경우 다른 페이지에 링크하거나 숨기는 대신 동일한 문서에 간단히 표시하는 것을 고려해야합니다. 이런 식으로 모두가 읽을 수 있습니다. 이것은 단순하고 낮은 기술 방법입니다.