Wie kann ich CSS für eine Responsive-Site verwenden, aber ALT-Text auf Bildern bereitstellen, damit meine Site zugänglich ist?

Ich habe eine Website mit einem Bild oben auf der Seite. Die Website ist vollständig ansprechbar.Wie kann ich CSS für eine Responsive-Site verwenden, aber ALT-Text auf Bildern bereitstellen, damit meine Site zugänglich ist?

Für die Desktop-Ansicht habe ich ein bestimmtes Bild, das ich für den Header auf der Website laden. Für die mobile Ansicht habe ich ein anderes Bild.

Im CSS, verwende ich so etwas wie:

.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; } 
}

Und im HTML <div class='headerimage'></div> es ist nur

Meine Frage ist: Wie kann ich ALT-Text (wie ich würde zu einem IMG) Tag hinzufügen Damit meine Website für Screenreader voll zugänglich ist, bekomme ich die SEO-Vorteile von alt text usw.? Offensichtlich kann ich zur Verwendung eines IMG-Tags wechseln, aber das würde einige ernsthafte Hacks erfordern, um es reaktiv zu halten, sobald ich zwei IMG-Tags habe, um damit umzugehen.

Quelle

2016-11-01 Eric

https://developer.mozilla.org/en/docs/Web/HTML/Element/picture (aber es muss eine Frage sein, die ich dies als Duplikat markieren) – Quentin

Daten-Attribute ..... Oder nur unsichtbarer Text. –

@Paulie_D - Datenattribute tun nichts allein. Unsichtbarer Text ist schrecklich (und ist für Screenreader normalerweise unsichtbar, was der Hauptgrund für alt-Attribute ist). – Quentin

-1

Sie können nicht ohne Javascript AFAIK zurückgreifen.

Wenn Sie nur CSS verwenden, besteht die beste Option für eine Beschreibung des Hintergrundbilds in Ihrem Code darin, das Titelattribut im DIV-Tag zu verwenden.

Siehe hier:

CSS background image alt attribute

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

Quelle

2016-11-01 17:00:13 caml

HTML 5 führt the picture element, die Ihnen eine Reihe von Bildern mit Medienanfragen angeben können.

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

Quelle

2016-11-01 17:00:31 Quentin

Element derzeit nur nativ von der neuesten Chrome, Opera & Chrome für Android (mit Unterstützung in Firefox in der Entwicklung) ohne Gewährleistung, dass es in Zukunft von anderen Browsern in Zukunft übernommen werden – rJ7

@ rJ7 - Das ist falsch (und widerspricht den Informationen in dem von mir bereitgestellten Link), es wird von allen in Entwicklung befindlichen Browsern mit Ausnahme von Opera Mini unterstützt (welches das '' Element als Fallback verwendet). http: // caniuse.com/# feat = Bild – Quentin

danke Kumpel, ich wusste gerade jetzt über dieses Bildelement, während der Suche nach diesem Ich fand diese Cons – rJ7

-1

Fügen Sie ein gebrochenes Bild, ein Hack.

Pseudoelemente funktionieren für beschädigte Bilder. Read here

Verwenden Sie die Pseudoelemente, um andere Bilder auf Haltepunkten anzuzeigen.

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

Quelle

2016-11-01 17:03:36

Würde gerne Grund für Downvote hören .. –

Wie kann ich CSS für eine Responsive-Site verwenden, aber ALT-Text auf Bildern bereitstellen, damit meine Site zugänglich ist?

Antwort

Verwandte Themen