HTML img 태그 : 제목 속성 대 alt 속성?

HTML img 태그 : 제목 속성 대 alt 속성?

---

나는 아마존 을 탐색 하고 있었는데 " 1TB "를 검색 할 때 별 등급 이미지 위에 마우스 커서를 올려 놓으면 IE를 사용하는 경우에만 점수가 표시 된다는 것을 알았습니다 . 다른 브라우저를 사용하는 경우 점수가 표시되지 않습니다.

평점 3.8과 평점 4.2는 모두 별 4 개로 표시됩니다. 물론 별 3.8 대 4.2 별 (76 % 대 84 % 점수)은 차이를 만들 수 있습니다!

그 이유는 alt텍스트 를 표시하는 표준 방식은 사용자가 그래픽을 끄거나 브라우저가 "읽을 때"(예 : 시각 장애가있는 사용자를위한 브라우저)하는 것입니다. 그러나 IE는 마우스 오버시 표시합니다.

아마존에 관계없이 사용자의 브라우저를 표시하는 경우, 내가 생각하는 그래서, 다음 title에 추가로 사용되어야한다 alt. 동의 하시겠습니까?

---

나는 둘 다 갈 것입니다. 제목은 모든 브라우저에서 멋진 툴팁을 표시하고 alt는 이미지가없는 브라우저에서 탐색 할 때 설명을 제공합니다.

즉, 얼마나 많은 "서퍼"가 상품을 탐색하기 위해 "상점"에 가는지 실제로 이미지가 꺼져 있거나 이미지를 지원하지 않는 브라우저를 사용하고 있는지에 대한 통계를보고 싶습니다. 인구의 90 %가 28k 모뎀을 사용하여 InterWeb에 연결하는 시대는 끝났다고 생각합니다.

---

그들은 다른 것들에 사용됩니다. alt속성을 사용 하는 대신 이미지. 이미지를 볼 수 없거나 스크린 리더에서 (나는 믿는다).

title특성 나타낸다 따라 통상적 호버 툴팁 같이 이미지.

하나는 다른 것 대신 "대신"사용해서는 안됩니다. 각각은 그들이하도록 설계된 일을하기 위해 적절하게 사용되어야합니다 .

---

이미 언급했듯이 alt 와 title 은 서로 다른 것입니다. title 속성은 툴팁을 제공 하지만 alt 는 이미지를 표시 할 수없는 경우 표시 할 텍스트를 지정하기 때문에 중요한 속성이기도합니다. (Firefox와 같은 일부 브라우저에서는 이미지가로드 되는 동안 이 텍스트도 표시 됩니다.)

내가 말해야 할 또 다른 요점은 alt 속성은 XHTML 문서로 유효성을 검사하는 데 필요 하지만 title 속성은 "추가 옵션"에 불과하다는 것입니다.

---

그 이유는 서로 다른 용도로 사용되며 둘 다 다른 용도로만 사용되지 않아야하기 때문입니다.

"alt"는 여러분이 이미 말한 것이므로 이미지를 표시 할 수없는 경우 (어떤 이유로 든) 이미지가 무엇인지 알 수 있으며 시각 장애인이 이미지의 내용을 이해할 수 있습니다.

"title"속성은 이미지 제목과 함께 툴팁을 표시하는 올바른 속성입니다.

---

제 생각에는 이미지가 표시되지 않는 경우 대체 텍스트가 항상 그림에서 보이는 것을 설명해야합니다.

alt = text [CS] 이미지, 양식 또는 애플릿을 표시 할 수없는 사용자 에이전트의 경우이 속성은 대체 텍스트를 지정합니다. 대체 텍스트의 언어는 lang 속성으로 지정됩니다.

w3.org

---

엄격한 XHTML 준수를 위해서는 alt가 필요하다고 생각합니다.

다른 사람들이 언급했듯이 제목은 도구 설명 (있으면 좋습니다)이고 alt는 접근성을위한 것입니다. 둘 다 사용하는 데 아무런 문제가 없지만 alt는 항상 있어야합니다.

---

아니요, alt해당 속성의 목적은 이미지를 볼 수없는 경우 (이미지가 누락되었거나 브라우저 자체가 표시 할 수없는 경우) "대체"텍스트를 제공하는 것이므로 더 좋습니다.

---

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

접근성 및 다양한 화면 판독기의 경우 :

• Jaws 10-11 : 기본적으로 꺼져 있음
• Window-Eyes 7.02 : 기본적으로 켜져 있음
• NVDA : 지원되지 않음 (지원 옵션 없음)
• VoiceOver : 지원되지 않음 (지원 옵션 없음)

따라서 Denis Boudreau가 적절하게 말했듯이 : 분명히 권장되는 관행이 아닙니다 .

---

ALT 속성은 화면 판독기를 사용하는 시각 장애인을위한 것입니다. 모든 이미지 태그에서 ALT가 누락 된 경우 이미지의 전체 URL을 읽습니다. 이미지가 사이트 디자인의 일부인 경우에도 여전히 ALT가 있어야하지만 사이트의 모든 부분에 대해 URL을 읽을 필요가 없도록 비워 둘 수 있습니다.

---

ALT 속성

이 alt속성은 태그 세트 (즉 img, area및 선택적으로 for inputand applet)에 정의되어 객체에 해당하는 텍스트를 제공 할 수 있습니다.

동등한 텍스트는 다음과 같은 일반적인 상황에서 웹 사이트와 방문자에게 다음과 같은 이점을 제공합니다.

• nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
• some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
• search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.

Title Attribute

The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.

Example 1: A pulldown menu that limits the scope of a search
A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Example 2: Input fields for a phone number
A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

<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> 

Example 3: A Search Function A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Example 4: A data table of form controls
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.

Img Element

Allowed attributes mentioned at MDN.

• alt
• crossorigin
• decoding
• height
• importance (experimental api)
• intrinsicsize (experimental api)
• ismap
• referrerpolicy (experimental api)
• src
• srcset
• width
• usemap

As you can see title attribute is not allowed inside img element. I would use alt attribute and if requires I would use CSS (Example: pseudo class :hover) instead of title attribute.

참고URL : https://stackoverflow.com/questions/872389/html-img-tag-title-attribute-vs-alt-attribute