HTML 제목 속성을 올바르게 사용하는 방법 요약

많은 초보 친구들이 title과 alt의 두 가지 속성을 혼동합니다. img 요소의 alt 속성을 대체하거나 사진 제목 등으로 title 속성을 사용하는 경우가 많습니다. 이러한 행위는 금지됩니다. 이해가 안 되시면 다음 글을 참고하세요 휴대폰, 태블릿, 보조 기술을 사용하는 사용자에게는 숨기고 키보드 사용자에게만 표시하려면 title 속성을 사용하세요.
자세히

HTML 제목 속성 자체에 문제가 있습니다. 문제는 그것이 14년 이상 우리와 함께 있었음에도 불구하고 몇 가지 중요한 면에서 충분히 잘 수행되지 않는다는 것입니다. 터치 장치가 등장하면서 이 속성의 역할은 더욱 줄어들었습니다. 브라우저 지원, 스크린 리더 지원 및 작성자의 관심 부족으로 인해 제목 속성의 접근성이 문제가 되었습니다.
다음 상황에서는 지원 부족으로 인해 제목 속성이 중복됩니다.

모바일 브라우저에서 웹 콘텐츠 정보에 액세스하는 사용자의 경우. 일반적으로 제목 속성의 내용은 데스크톱 브라우저에 프롬프트 메시지로 표시됩니다. 내가 아는 한 모바일 브라우저는 도구 설명 표시를 지원하지 않으며 제목 속성의 콘텐츠에 액세스하는 다른 시각적 방법도 없습니다.
마우스를 사용할 수 없는 분들을 위한 정보입니다. 일반적으로 제목 속성의 내용은 데스크톱 브라우저에 프롬프트 메시지로 표시됩니다. 프롬프트 정보의 동작은 10년 이상의 역사를 가지고 있지만 키보드를 사용하여 제목 속성을 표시하는 방법을 구현한 브라우저는 없습니다.
대부분의 HTML 요소에 사용하기 위해 다양한 보조 기술을 사용하는 사람들에게 정보를 제공합니다. 내가 아는 한, 스크린 리더는 제목 속성 정보에 대한 액세스를 지원하지 않습니다.

다음과 같이 제목 속성이 사용자 친화적이지 않습니다

휴대폰 사용자
키보드만 사용하는 사용자
화면 돋보기 사용자
스크린 리더 사용자
미세 모터 기술 장애 사용자
인지 장애가 있는 사용자

유용한 제목 속성의 예:

프레임 또는 iframe 요소 라벨 지정:

프로그램이 필요한 특별한 상황에서 표시되는 라벨을 제공하세요. 눈에 보이는 텍스트 라벨을 직접 사용하는 것은 중복됩니다.
value="search">
데이터 테이블의 라벨 제어.

제목 속성이 쓸모 없거나 거의 사용되지 않는 예:

텍스트가 될 수 없는 링크나 주변 콘텐츠에 추가 정보 추가:
뉴스레터
대신 이러한 정보는 링크 텍스트의 일부이거나 링크 옆에 있어야 합니다.
링크 텍스트와 동일한 정보를 제공하세요:
newsletter
링크 콘텐츠를 다음과 같이 복사하지 않는 것이 좋습니다. 제목 속성. 이는 실제로 아무것도 하지 않는 것과 같습니다.
이미지 제목:
alt="성에는 이제 두 개의 탑과 두 개의 탑이 있습니다. wall.">
아마도 제목 정보가 가장 중요한 정보일 것이며 기본적으로 모든 사용자가 액세스할 수 있어야 합니다. 그렇다면 이 콘텐츠는 이미지 바로 옆에 있어야 합니다.
양식 태그 대신 사용되며 눈에 보이는 텍스트 태그 제거:

화면 판독기 사용자는 양식 요소에 대한 태그에 액세스합니다. 접근성 API 내의 속성 이름에 포함됩니다(텍스트 레이블이 레이블 요소를 사용하는 경우 지원되지 않음). 다른 많은 사용자에게는 그렇지 않습니다. 가능하면 눈에 보이는 텍스트 라벨을 포함하는 것이 좋습니다.
표시되는 라벨 콘텐츠와 동일한 정보를 양식 요소에 제공하세요.
name
일련의 사용자 인지 노이즈를 추가하는 것 외에는 보이는 라벨 텍스트를 복제하는 것이 불가능합니다. 하지 마세요. 눈에 보이는 레이블 텍스트를 반복하는 것은 짜증나는 인지적 소음을 추가하는 것 외에는 아무런 목적도 없는 것 같습니다. 이 사용을 중지하세요.
양식 요소에 대한 추가 지시어 제공:
name 양식 요소를 올바르게 사용하는 데 이 지시문이 중요한 경우 모든 사용자가 읽을 수 있도록 요소 주변에 텍스트 정보를 제공하세요.
약어의 확장:
W3C
abbr 요소의 title 속성은 스크린 리더 소프트웨어에서 지원되지만 다른 사용자 그룹에서는 사용할 수 없기 때문에 여전히 문제가 있습니다. 문서에 약어가 처음 나타날 때 전체 이름을 텍스트 형식으로 제공하거나 전체 이름에 대한 용어집을 제공하는 것이 좋습니다. title 속성을 사용할 수 없다는 것은 한계가 있고 전체 이름을 텍스트 형식으로 제공해야 하기 때문에 사용할 수 없다는 의미는 아닙니다.

HTML 5.1에는 제목 속성 사용에 대한 일반적인 조언이 포함되어 있습니다.

title 속성에 대한 의존은 현재 권장되지 않습니다. 왜냐하면 많은 사용자 에이전트가 사양에서 요구하는 대로 이 속성을 표시할 수 없기 때문입니다(예: 키보드만 사용하는 사용자와 터치 스크린 사용자를 제외하고 프롬프트 정보를 표시하기 위해 마우스 포인터 장치가 필요함).

img 요소의 alt 속성 대신 title 속성을 사용하거나 이미지 제목으로 사용하는 것은 금지됩니다.

이 속성에 대한 접근성 지원이 약하기 때문에 현재 title 속성에 의존하는 것은 금지되어 있습니다. 많은 사용자 에이전트에서 ...

HTML 제목 속성을 올바르게 사용하는 방법에 대한 더 많은 요약 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!