반응 형 사이트에 CSS를 사용할 수 있지만 내 사이트에 액세스 할 수 있도록 이미지에 대체 텍스트를 제공하려면 어떻게해야합니까?

Question

페이지 상단에 이미지가있는 사이트가 있습니다. 이 사이트는 완전히 반응합니다.

데스크톱보기의 경우 사이트의 헤더에로드 할 특정 이미지가 있습니다. 모바일보기의 경우 이미지가 다릅니다. 는 CSS에서

, 내가 좋아하는 뭔가를 사용

.headerimage { background:url(/images/header-desktop.png) no-repeat top left; } 

@media only screen and (max-width: 480px) { 
    .headerimage { background:url(/images/header-mobile.png) no-repeat top left; } 
} 

을 그리고 HTML에서 그냥 <div class='headerimage'></div>

내 질문이있다 : 어떻게 태그 (AN IMG에 나는 것 같은) ALT 텍스트를 추가 할 수 있습니다 그래서 내 사이트는 스크린 리더를 위해 완전히 액세스 할 수 있으며, 대체 텍스트 등으로 SEO 혜택을받을 수 있습니까? 분명히 IMG 태그를 사용하는 것으로 전환 할 수는 있지만 처리 할 IMG 태그가 두 개 있으면 응답 성을 유지하기 위해 심각한 해킹이 필요합니다.

Answer 1

Javascript AFAIK를 사용하지 않고는 작업을 수행 할 수 없습니다.

CSS 만 사용하면 코드에서 배경 이미지에 대한 설명을 가장 잘 나타내는 옵션은 DIV 태그의 title 속성을 사용하는 것입니다.

는 여기를 참조하십시오 :

CSS background image alt attribute

CSS or Javascript - display fallback text if background image not loaded

Answer 2

HTML 5는 미디어 쿼리와 일련의 이미지를 지정할 수 있습니다 the picture element을 소개합니다.

<picture> 
<source srcset="/images/header-mobile.png" media="only screen and (max-width: 480px)"> 
<img src="/images/header-desktop.png" alt="Foo"> 
</picture> 

Answer 3

해킹 된 이미지, 해킹 추가.

가짜 요소는 깨진 이미지 용으로 작동합니다. Read here

의사 요소를 사용하여 중단 점에 다른 이미지를 표시합니다.

img::before { 
    content: ""; 
    background-image: url('http://lorempizza.com/200/200'); 
    width: 200px; 
    height: 200px; 
    display: block; 
    position: absolute; 
} 

@media (max-width: 400px) { 
    img::before { 
    background-image: url('http://placehold.it/200X200') 
    } 
} 

Fiddle