나는 아마존 을 탐색 하고 있었는데 " 1TB "를 검색 할 때 별 등급 이미지 위에 마우스 커서를 올려 놓으면 IE를 사용하는 경우에만 점수가 표시 된다는 것을 알았습니다 . 다른 브라우저를 사용하는 경우 점수가 표시되지 않습니다.
평점 3.8과 평점 4.2는 모두 별 4 개로 표시됩니다. 물론 별 3.8 대 4.2 별 (76 % 대 84 % 점수)은 차이를 만들 수 있습니다!
그 이유는 alt텍스트 를 표시하는 표준 방식은 사용자가 그래픽을 끄거나 브라우저가 "읽을 때"(예 : 시각 장애가있는 사용자를위한 브라우저)하는 것입니다. 그러나 IE는 마우스 오버시 표시합니다.
아마존에 관계없이 사용자의 브라우저를 표시하는 경우, 내가 생각하는 그래서, 다음 title에 추가로 사용되어야한다 alt. 동의 하시겠습니까?
답변:
나는 둘 다 갈 것입니다. 제목은 모든 브라우저에서 멋진 툴팁을 표시하고 alt는 이미지가없는 브라우저에서 탐색 할 때 설명을 제공합니다.
즉, 얼마나 많은 "서퍼"가 상품을 탐색하기 위해 "상점"에 가는지 실제로 이미지가 꺼져 있거나 이미지를 지원하지 않는 브라우저를 사용하고 있는지에 대한 통계를보고 싶습니다. 인구의 90 %가 28k 모뎀을 사용하여 InterWeb에 연결하는 시대는 끝났다고 생각합니다.
그들은 다른 것들에 사용됩니다. alt속성을 사용 하는 대신 이미지. 이미지가 화면 판독기에 표시되지 않는 경우.
title특성 나타낸다 따라 통상적 호버 툴팁 같이 이미지.
하나는 다른 것 대신 "대신"사용해서는 안됩니다. 각각은 그들이하도록 설계된 일을하기 위해 적절하게 사용되어야합니다 .
<img>태그 - 대신 CSS 스타일 사업부를 사용한다)
ALT 속성은 화면 판독기를 사용하는 시각 장애인을위한 것입니다. 모든 이미지 태그에서 ALT가 누락 된 경우 이미지의 전체 URL을 읽습니다. 이미지가 사이트 디자인의 일부인 경우에도 여전히 ALT가 있어야하지만 사이트의 모든 부분에 대해 URL을 읽을 필요가 없도록 비워 둘 수 있습니다.
이 alt속성은 태그 세트 (즉 img, area및 선택적으로 for inputand applet)에 정의되어 객체에 해당하는 텍스트를 제공 할 수 있습니다.
동등한 텍스트는 다음과 같은 일반적인 상황에서 웹 사이트와 방문자에게 다음과 같은 이점을 제공합니다.
이 기술의 목적은 사용자가 title속성에 도움말 정보를 제공하여 양식에 데이터를 입력 할 때 상황에 맞는 도움말을 제공하는 것입니다. 도움말에는 형식 정보 또는 입력 예가 포함될 수 있습니다.
예 1 : 검색
범위를 제한하는 풀다운 메뉴 검색 양식은 풀다운 메뉴를 사용하여 검색 범위를 제한합니다. 풀다운 메뉴는 검색어를 입력하는 데 사용되는 텍스트 필드 바로 옆에 있습니다. 검색 필드와 풀다운 메뉴 사이의 관계는 시각적 디자인을 볼 수있는 사용자에게 명확하며, 여기에는 가시적 인 레이블을위한 공간이 없습니다. title속성은 식별하는 데 사용되는 select메뉴. 이 title속성은 화면 판독기로 말하거나 화면 돋보기를 사용하는 사람들을위한 도구 설명으로 표시 할 수 있습니다.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select> 예 2 : 전화 번호 입력 필드
웹 페이지에는 미국에서 전화 번호를 입력하기위한 컨트롤이 포함되어 있으며 지역 번호, 교환 및 마지막 4 자리에 대한 필드가 3 개 있습니다.
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 예 3 : 검색 기능
웹 페이지에는 사용자가 검색어를 입력 할 수있는 텍스트 필드와 검색을 수행하기위한 "검색"버튼이 있습니다. 이 title속성은 양식 컨트롤을 식별하는 데 사용되며 버튼은 텍스트 필드 바로 뒤에 위치하므로 텍스트 필드가 검색어를 입력해야하는 위치임을 사용자에게 명확하게 알 수 있습니다.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>예 4 : 양식 컨트롤
의 데이터 테이블 양식 컨트롤 의 데이터 테이블은 각 컨트롤을 해당 셀의 열 및 행 머리글과 연결해야합니다. 제목 (또는 오프 스크린 레이블)이 없으면 비 시각적 사용자가 양식을 탭하는 동안 보조 기술을 사용하여 해당 행 / 열 헤더 값을 일시 중지하고 조사하기가 어렵습니다.
예를 들어, 설문 조사 양식의 첫 번째 행에는 질문, 동의, 미정, 동의 안 함 등 4 개의 열 머리글이 있습니다. 다음 각 행에는 세 열의 답변 선택에 해당하는 각 셀에 질문과 라디오 버튼이 있습니다. 모든 라디오 버튼의 제목 속성은 답변 선택 (열 머리글)과 질문 텍스트 (행 머리글)를 구분 기호로 하이픈 또는 콜론으로 연결 한 것입니다.
MDN에 언급 된 허용 된 속성 .
altcrossorigindecodingheightimportance (실험용 API)intrinsicsize (실험용 API)ismapreferrerpolicy (실험용 API)srcsrcsetwidthusemap보시다시피 title속성은 img요소 내부에서 허용되지 않습니다 . alt속성 을 사용 하고 필요한 경우 속성 :hover대신 CSS (예 : pseudo class )를 사용 title합니다.
ASP.NET MVC 용 MVCFutures는 두 가지를 모두 수행하기로 결정했습니다. 실제로 'alt'를 제공하면 동일한 값을 가진 'title'이 자동으로 생성됩니다.
소스 코드는 없지만 빠른 Google 검색을 통해 테스트 사례가 나타났습니다!
[TestMethod]
public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
}img 요소에 제목 속성을 사용하면 안됩니다. 그 이유는 매우 간단합니다.
캡션 정보는 기본적으로 모든 사용자가 사용할 수 있어야하는 중요한 정보 일 것입니다. 그렇다면이 콘텐츠를 이미지 옆에 텍스트로 표시하십시오.
출처 : http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/
HTML 5.1 에는 title 속성 사용에 대한 일반적인 조언이 포함되어 있습니다.
현재 많은 사용자 에이전트가이 사양에서 요구하는 액세스 가능한 방식으로 속성을 노출하지 않기 때문에 title 속성에 의존하는 것은 권장되지 않습니다 (예 : 마우스와 같은 포인팅 장치가 도구 설명을 표시하도록 요구합니다. 터치 전용 사용자 (예 : 최신 휴대 전화 또는 태블릿 사용자).
출처 : http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute
접근성 및 다양한 화면 판독기의 경우 :
따라서 Denis Boudreau가 적절하게 말했듯이 : 분명히 권장되는 관행이 아닙니다 .