HTML IMG 태그 : 제목 속성 대 ALT 속성?

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

문제

나는 탐색했다 아마존 그리고 나는 검색 할 때 "1TB"Stars 등급 이미지 위로 마우스 커서를 호버링하면 IE를 사용하는 경우에만 점수 만 볼 수 있습니다. 다른 브라우저를 사용하는 경우 점수가 표시되지 않습니다.

3.8 등급과 4.2 등급은 모두 4 개의별로 나타납니다. 물론 3.8 개의 별 대 4.2 개의 별 (76% 대 84% 점수)이 차이를 만들 수 있습니다!

표준 표시 방법이기 때문입니다 alt 텍스트는 사용자가 그래픽을 끄거나 브라우저가 "읽기"(예 : 시각 장애가있는 사용자를위한 브라우저)시기에만 해당됩니다. 그러나 즉, 호버에 그것을 보여줍니다.

그래서 아마존이 사용자의 브라우저에 관계없이 보여 주려면 title 외에도 사용해야합니다 alt. 동의 하시겠습니까?

도움이 되었습니까?

해결책

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

즉, 상품을 탐색하기 위해 "저장소"로가는 몇 명의 "서퍼"가 실제로 이미지를 끄거나 이미지를 지원하지 않는 브라우저를 사용하고 있는지에 대한 몇 가지 통계를보고 싶습니다. 인구의 90%가 28K 모뎀을 사용하여 인터 웹에 연결하는 시대는 루소가 끝났다고 생각합니다.

다른 팁

그들은 다른 것들에 사용됩니다. 그만큼 alt 속성이 사용됩니다 대신에 이미지의. 이미지를 표시 할 수 없거나 화면 리더에서 (나는 믿습니다).

그만큼 title 속성이 표시됩니다 ~을 따라 이미지를 사용하여 일반적으로 호버 툴팁입니다.

하나는 "대신"을 사용해서는 안됩니다. 각각을 사용해야합니다 제대로, 그들이 설계된 일을하기 위해.

대체 그리고 제목 이미 언급했듯이 다른 것들을위한 것입니다. 동안 제목 속성은 툴팁을 제공합니다. 대체 이미지를 표시 할 수없는 경우 표시 할 텍스트를 지정하기 때문에 중요한 속성입니다. (그리고 Firefox와 같은 일부 브라우저에서는이 텍스트도 볼 수 있습니다. 동안 이미지로드)

내가 생각해야 할 또 다른 요점은 대체 속성입니다 필수의 XHTML 문서로 검증하는 반면 제목 속성은 그대로 "추가 옵션"일뿐입니다.

그것들은 다른 목적을 수행하기 때문에 둘 다 하나만 사용되어서는 안됩니다.

"Alt"는 이미 여러분이 말한 것에 대한 것이므로 이미지를 표시 할 수없는 경우 이미지가 무엇인지 알 수 있습니다 (어떤 이유로 든) 시각 장애가있는 사람들이 이미지에 대한 이미지를 이해할 수 있습니다.

"제목"속성은 이미지의 제목이있는 툴팁을 표시하는 올바른 것입니다.

내 의견으로는 Alt 텍스트가 이미지가 표시되지 않는 경우 그림에서 항상 볼 수있는 것을 설명해야합니다.

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

w3.org

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

다른 사람들이 지적했듯이 제목은 툴팁을위한 것입니다 (좋은), Alt는 접근성을위한 것입니다. 둘 다 사용하는 데 아무런 문제가 없지만 Alt는 항상 거기에 있어야합니다.

아니요, 생각합니다 alt 해당 속성의 목적은 이미지를 볼 수없는 경우 "대체"텍스트를 제공하는 것이기 때문에 (이미지가 누락되었는지 또는 브라우저 자체가 표시 할 수 없는지 여부).

ASP.NET MVC의 MVCFutures는 두 가지를 모두하기로 결정했습니다. 실제로 'Alt'를 제공하면 동일한 값을 가진 '제목'을 자동으로 생성합니다.

손에 소스 코드가 없지만 빠른 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 제목 속성 사용에 대한 일반적인 조언이 포함되어 있습니다.

많은 사용자 에이전트 가이 사양에 따라 필요한대로 액세스 가능한 방식으로 속성을 노출시키지 않기 때문에 제목 속성에 의존하지 않습니다 (예 : 마우스와 같은 포인팅 장치가 툴팁을 APEAR로 유발하여 키보드 전용 사용자를 제외하고 제외해야합니다. 최신 전화 나 태블릿이있는 사람과 같은 터치 전용 사용자).

원천: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

접근성과 다른 스크린 리더와 관련하여 :

  • Jaws 10-11 : 기본적으로 꺼졌습니다
  • 창 눈 7.02 : 기본적으로 켜졌습니다
  • NVDA : 지원되지 않음 (지원 옵션 없음)
  • VoiceOver : 지원되지 않음 (지원 옵션 없음)

따라서 AS 데니스 부 드레로 적절하게 넣으십시오 : 분명히 권장되는 연습이 아닙니다.

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

alt 속성

그만큼 alt 속성은 일련의 태그 (즉,)에 정의됩니다. img, area 그리고 선택적으로 input 그리고 applet) 객체와 동등한 텍스트를 제공 할 수 있습니다.

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

  • 요즘 웹 브라우저는 매우 다양한 용량을 가진 매우 다양한 플랫폼으로 제공됩니다. 일부는 제한된 유형의 이미지 세트만으로 이미지를 표시 할 수 없습니다. 일부는 이미지를로드하지 않도록 구성 할 수 있습니다. 코드가 이미지에 ALT 속성이 설정된 경우이 브라우저의 대부분은 이미지 대신에 제공 한 설명을 표시합니다.
  • 방문자 중 일부는 이미지를 볼 수 없습니다. 맹인, 색 맹인, 낮은 계급이라면 이미지를 볼 수 없습니다. Alt 속성은 귀하의 페이지에 무엇이 있는지에 대한 좋은 아이디어를 갖기 위해 의존 할 수있는 사람들에게 큰 도움이됩니다.
  • 검색 엔진 봇은 위의 두 범주에 속합니다. 웹 사이트를 인덱싱하고 자격이있는 경우 ALT 속성을 사용하여 페이지의 중요한 섹션을 놓치지 않도록하십시오.

제목 속성

이 기술의 목적은 사용자가 도움말 정보를 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 개의 열 헤더가 있습니다 : 질문, 동의, 미정, 동의하지 않습니다. 각 행에는 세 열의 답변 선택에 해당하는 각 셀에 질문과 라디오 버튼이 포함되어 있습니다. 모든 라디오 버튼의 제목 속성은 답변 선택 (열 헤더)과 hyphen 또는 콜론이 분리기로 질문의 텍스트 (행 헤드러)를 연결하는 것입니다.

IMG 요소

허용 된 속성에 언급되었습니다 MDN.

  • alt
  • crossorigin
  • decoding
  • height
  • importance (실험 API)
  • intrinsicsize (실험 API)
  • ismap
  • referrerpolicy (실험 API)
  • src
  • srcset
  • width
  • usemap

보시다시피 title 속성은 내부에 허용되지 않습니다 img 요소. 나는 사용할 것이다 alt 속성 및 필요한 경우 CSS를 사용합니다 (예 : 의사 클래스 :hover) 대신에 title 기인하다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top