Wie mache ich Hintergrundbild zugänglich?

Question

Wenn Sie einen Inline-Code <img> verwenden, können Sie das Attribut alt= und andere aria-* Attribute verwenden, um das Bild zugänglich zu machen.

Aber wenn Sie eine background-image: url(...) verwenden, gibt es irgendeine Art von Richtlinien, wie Sie diesen Container zugänglich und freundlich für Screenreader machen können? Gibt es bestimmte Attribute, die Sie dem Container hinzufügen würden?

Answer 1

Vermeiden Sie Hintergrundbilder, die alles andere als Dekoration sind. Vermeiden Sie daher Text in Hintergrundbildern oder andere Bedeutung in den Bildern.

Bild Sprites

Notes on accessible CSS image sprites:

• Fügen Sie alternativen Text innerhalb des Elements, dass die CSS-Hintergrundbild angebracht ist.
• Wenn Bilder aktiviert sind und der Windows-Modus für hohe Kontraste nicht aktiviert ist, verwenden Sie Javascript, um ein Stylesheet hinzuzufügen, das die Textalternative optisch verbirgt, aber für die unterstützende Technologie noch verfügbar ist.
• Verwenden Sie JavaScript, um zu erkennen, wenn Bilder deaktiviert sind, und entfernen Sie den visuell verborgenen CSS-Anzeigestatus der Textalternative.
• Verwenden Sie JavaScript, um zu erkennen, wenn der Windows-Modus für hohen Kontrast aktiviert ist, und entfernen Sie den visuell verborgenen CSS-Anzeigezustand der Textalternative.

Windows High Contrast-Modus

Fun Tatsache, gibt es eine Windows High Contrast Mode media query

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */} 
@media screen and (-ms-high-contrast: black-on-white) { 
    div { background-image: url('image-bw.png'); } 
} 
@media screen and (-ms-high-contrast: white-on-black) { 
    div { background-image: url('image-wb.png'); } 
} 

Off-Screen-Technik

Verwenden Sie diese, wenn Sie Informationen benötigen enthalten dass Sie dem Bildschirmleser angekündigt werden möchten Benutzer. Setzen Sie den Inhalt, den Sie in den Behälter mit dem Hintergrundbild mögen, und dann diese Klasse gilt:

.visually-hidden { 
position: absolute !important; 
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
clip: rect(1px, 1px, 1px, 1px); 
padding:0 !important; 
border:0 !important; 
height: 1px !important; 
width: 1px !important; 
overflow: hidden; 
} 

Dieser Benutzer nicht auf IE hilft (oder ältere Versionen des Edge), die mit Windows High Contrast-Modus und keine Bildschirmlese , so verweise ich dich zurück zum vorherigen Abschnitt.

Emoji

Yep. Emoji. Consider this technique für Nicht-Text-Inhalt, der mit Textinhalt verknüpft ist (wie Emoji oder Icon-Schriften).

Answer 2

Hintergrundbilder sind für dekorative Zwecke verwendet werden, sie das ist nicht Teil nicht Text Alternative

From WCAG2.0

Wenn ein Bild verwendet wird, für die Dekoration, Abstand oder andere Zwecke benötigt von dem bedeutungsvollen Inhalt auf der Seite hat das Bild keine Bedeutung und sollte von Hilfstechnologien ignoriert werden.

Answer 3

Wenn Sie machen das Bild einen Hintergrund, um background-size zu nutzen, das Bild proportional zu skalieren zu passen oder zu füllen Behälter ist, können Sie verwenden beide eine img und background-image wie ich hier beschrieben: How to add alt text to background images? Making background images accessible.

Wie andere darauf hingewiesen haben, sollten Sie, wenn der Inhalt des Bildes für das Dokument wichtig ist, unbedingt ein img-Tag mit einer alt Beschreibung verwenden. Aber es gibt keinen Grund, dass Sie background-image nicht gleichzeitig dekorativ verwenden können.