Bilder

Barrierefreie Bilder mögen auf den ersten Blick wie ein einfaches Thema wirken – Sie fügen etwas „Alt-Text“ auf ein Bild an und schon sind Sie fertig. Aber das Thema ist differenzierter als manche Leute denken. In diesem Abschnitt beschäftigen wir uns mit folgenden Themen:

• So aktualisieren Sie den Code, um Images zugänglich zu machen.
• Welche Informationen mit Nutzern geteilt werden sollen und wo.
• Zusätzliche Möglichkeiten zur Verbesserung Ihrer Bilder für Menschen mit Behinderungen.

Zweck und Kontext des Bildes

Bevor Sie eine Codezeile schreiben, müssen Sie sich zunächst überlegen, und wie es verwendet wird. Stellen Sie sich Fragen zum Zweck und Kontext des Bildes können Ihnen helfen zu entscheiden, wie Sie das Informationen für eine Person, die assistive Technologie (AT) z. B. Screenreader.

Sie können sich folgende Fragen stellen:

• Ist das Bild unerlässlich, um den Kontext der Funktion oder Seite zu verstehen?
• Welche Art von Informationen soll das Bild vermitteln?
• Ist das Bild einfach oder komplex?
• Weckt das Bild Emotionen oder fordert den Nutzer zum Handeln auf?
• Oder ist das Bild nur ein visueller Aspekt? ohne echten Zweck?

Ein visuelles Flussdiagramm, z. B. Entscheidungsbaum für Bilder können Sie besser entscheiden, zu welcher Kategorie Ihr Bild gehört.

Versuchen Sie, die Bilder auf Ihrer Website oder in Ihrer Webanwendung mithilfe einer Browsererweiterung auszublenden oder andere Methoden. Fragen Sie sich dann: „Habe ich verstanden, welche Inhalte übrig bleiben?“ Wenn die Antwort „Ja“ lautet, handelt es sich höchstwahrscheinlich um ein dekoratives Bild. Wenn nicht, wird das Bild in gewisser Weise und für den jeweiligen Kontext informativ ist. Sobald Sie den Zweck des Bildes bestimmen, können Sie die genaueste Codierung dafür.

Dekorative Bilder

Ein dekoratives Bild ist ein visuelles Element, das keinen zusätzlichen Kontext oder zusätzliche Informationen bietet, um den Kontext besser zu verstehen. Dekorative Bilder sind eine Ergänzung und kann eher Stil als Substanz bereitstellen.

Wenn Sie sich für ein dekoratives Bild entscheiden, muss es programmatisch ausgeblendet werden von ATs. Wenn Sie ein Bild so programmieren, dass es verborgen bleibt, signalisiert es dem AT, dass das Bild wird nicht benötigt, um den Inhalt, den Kontext oder die Aktion der Seite zu verstehen. Es gibt es viele Möglichkeiten, Bilder auszublenden, z. B. eine Leer-/NULL-Textalternative, Anwenden von ARIA oder das Bild als CSS-Hintergrund hinzufügen. Im Folgenden finden Sie einige Beispiele für ein dekoratives Bild der Nutzenden.

Leer oder null alt

Ein leeres alternatives Textattribut unterscheidet sich von einer fehlenden Alternative. text an. Wenn das alternative Textattribut fehlt, lautet das AT möglicherweise wie folgt: den Dateinamen oder den umgebenden Inhalt aus, um den Nutzenden weitere Informationen über das Bild.

Rolle auf presentation oder none festgelegt

Eine Rolle, die auf presentation oder none festgelegt ist entfernt die Semantik eines Elements aus der Sichtbarkeit für die Barrierefreiheit Baum. aria-hidden= "true" wird das gesamte Element und alle untergeordneten Elemente aus dem Accessibility API verwenden.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

Sei bei der Verwendung von aria-hidden vorsichtig, da dadurch Elemente ausgeblendet werden können, die die Sie nicht verstecken möchten.

Bilder in CSS

Wenn Sie mit CSS ein Hintergrundbild hinzufügen, erkennt ein Screenreader nicht, Bilddatei. Vergewissern Sie sich, dass das Bild ausgeblendet werden soll, bevor Sie diese Methode anwenden.

Informative Bilder

Ein informatives Bild ist ein Bild, das ein einfaches Konzept, eine Idee oder eine Emotion vermittelt. Zu den Informationstypen gehören Fotos von Objekten aus der realen Welt, wichtige Symbole, einfache Zeichnungen und Bilder von Text.

Wenn Ihr Bild informativ ist, sollten Sie programmatischen alternativen Text einfügen, der den Zweck des Bildes beschreibt. Alternative Bildbeschreibungen – oft als „Alt-Text“ abgekürzt – bieten AT-Nutzern mehr Kontext zu einem Bild und helfen ihnen, die Botschaft oder den Zweck eines Bildes besser zu verstehen.

Einfache alternative Beschreibungen mit <img>-Elemente wird erreicht, indem das Attribut alt unabhängig vom Dateityp verwendet wird. verweist auf, z. B. .jpg, .png, .svg und andere.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

Wenn du <svg>-Elemente inline verwendest, musst du auf die Barrierefreiheit achten.

Da SVGs semantisch codiert sind, werden sie von AT standardmäßig übersprungen. Wenn Sie ein dekoratives Bild haben, ist das kein Problem – die AT ignoriert wie beabsichtigt. Wenn Sie jedoch ein informatives Bild haben, ist eine ARIA-role="img" muss dem Muster hinzugefügt werden, damit die AT sie als Bild erkennt.

Außerdem wird das Attribut alt nicht für <svg>-Elemente verwendet. müssen verschiedene Codierungsmethoden stattdessen verwendet, um alternative Beschreibungen zu Ihren informativen Bildern hinzuzufügen.

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

Funktionale Bilder

Ein funktionales Bild ist mit einer Aktion verbunden sind. Ein Beispiel für ein funktionales Bild ist ein Logo, zur Startseite, einer Lupe, die als Suchschaltfläche dient, oder einem Social-Media-Profil über das Sie zu einer anderen Website oder App gelangen.

Wie bei informativen Bildern müssen auch funktionale Bilder eine Alternative eine Beschreibung, um alle Nutzenden über ihren Zweck zu informieren. Im Gegensatz zu einem informativen Bild muss jedes funktionale Bild die Aktion des Bildes beschreiben, nicht das visuelle Aspekte zu berücksichtigen.

Im Logobeispiel ist das Bild sowohl informativ als auch umsetzbar, da es sowohl ein Bild, das Informationen vermittelt und sich als Link verhält. In solchen Fällen können Sie für jedes Element alternative Beschreibungen hinzufügen. Anforderung.

Eine Möglichkeit, alternative Beschreibungen zu Bildern hinzuzufügen, sind Text. Bei dieser Methode wird der Text von Screenreadern vorgelesen, Sie befindet sich im DOM, wird aber mithilfe von benutzerdefiniertem CSS visuell verborgen.

Im Code-Snippet sehen Sie, dass „Zur Startseite navigieren“ ist der und der Alternativtext für das Bild lautet „Lovely Ladybugs for your Rasen.“ Wenn Sie sich den Logocode mit einem Screenreader anhören, hören Sie sowohl den und die Handlung in einem Bild.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

Komplexe Bilder

Ein komplexes Bild ist häufig erfordert mehr Erklärung als ein dekoratives, informatives oder Funktionsbild. Es erfordert sowohl eine kurze als auch eine lange Alternative. Beschreibung, um die vollständige Botschaft zu vermitteln. Komplexe Bilder umfassen Infografiken, Karten, Grafiken/Diagramme und komplexe Illustrationen. Wie bei den anderen gibt es verschiedene Methoden, um alternative Bilder Beschreibungen zu komplexen Bildern hinzufügen.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

Eine Möglichkeit, einem Bild zusätzliche Erklärung hinzuzufügen, besteht darin, auf eine Ressource zu verlinken. oder einen Sprunglink zu einer längeren Erklärung weiter unten auf der Seite einfügen. Diese Methode ist eine gute Wahl, nicht nur für AT-Nutzer, sondern auch Beeinträchtigungen, z. B. kognitive Beeinträchtigungen, Lernschwächen und Lesen Beeinträchtigungen, die von diesem zusätzlichen Bild profitieren könnten. Informationen auf dem Bildschirm und nicht im Code verborgen.

Sie können auch das Attribut aria-describedby an das Element <img>-Element. Sie können das Bild programmatisch mit einer ID verknüpfen, die ein längere Beschreibung. Bei dieser Methode wird eine starke Assoziation zwischen dem Bild und die vollständige Beschreibung. Die ausführliche Beschreibung kann auf der oder visuell verborgen ist, sollten Sie jedoch erwägen, sie sichtbar zu lassen, um auch mehr Leute.

Eine weitere Möglichkeit, kurze alternative Beschreibungen mit längeren Beschreibungen zu gruppieren, sind die HTML5-Elemente <figure> und <figcaption>. Diese Elemente verhalten sich ähnlich wie aria-describedby insofern, als sie Elemente semantisch gruppieren und so eine stärkere Assoziation zwischen dem Bild und seiner Beschreibung ergeben. Durch das Hinzufügen von ARIA role="group" wird die Abwärtskompatibilität mit älteren Webbrowsern gewährleistet, die die native Semantik des <figure>-Elements nicht unterstützen.

Best Practices für alternativen Text

Natürlich reicht es nicht aus, Alternativtext einzufügen. Der Text sollte auch sinnvoll sind. Zeigt Ihr Bild zum Beispiel einen Schwarm von Marienkäfer, die die und der alternative Text lautet „Käfer“, würde die die vollständige Botschaft und Absicht des Bildes vermitteln? Definitiv nicht.

Alternative Beschreibungen müssen so viele relevante visuelle Informationen wie möglich und sich kurzfassen. Es gibt zwar keine Begrenzung für die Anzahl der Zeichen, Screenreader lesen kann, wird empfohlen, den alternativen Text zu begrenzen, Maximal 150 Zeichen, um eine Müdigkeit der Leser zu vermeiden. Wenn Sie weitere hinzufügen möchten, Kontext hinzufügen, können Sie eines der komplexen Bildmuster verwenden, oder eine weitere Beschreibung des Bildes im Haupttext.

Zusätzlicher alternativer Text am besten Best Practices:

• Vermeiden Sie Wörter wie „Bild von“. oder "Foto von" in der Beschreibung, da die erkennt der Screenreader diese Dateitypen für Sie.
• Achten Sie bei der Benennung Ihrer Bilder auf einheitliche und präzise Namen. Bild Namen sind ein Fallback, wenn der alternative Text fehlt oder ignoriert wird.
• Verwenden Sie keine nicht alphanumerischen Zeichen (z. B. #, 9 und &) und Bindestriche. zwischen Wörtern statt Unterstrichen in Bildnamen oder alternativen Texten verwenden.
• Verwenden Sie nach Möglichkeit korrekte Zeichensetzung. Andernfalls werden die Bildbeschreibungen klingt wie ein langer, endloser Satz.
• Schreiben Sie alternativen Text wie ein Mensch und nicht wie ein Roboter. Überflüssige Keywords niemandem – Menschen, die Screenreader verwenden, sind verärgert und Suchmaschinen-Algorithmen bestrafen Sie.

Wissen testen

Testen Sie Ihr Wissen über ARIA und HTML