Einige Dinge über `alt` Text

Ich bin sicher, Sie kennen den alt-Text. Es ist das Attribut im Bild-Tag, das die wichtige Aufgabe hat zu beschreiben, wofür dieses Bild für jemanden gedacht ist, der es aus irgendeinem Grund nicht sehen kann. Bitte verwenden Sie sie.

Ich möchte die Botschaft „Bitte benutzen Sie sie“ nicht schmälern, aber in letzter Zeit sind mir ein paar interessante Dinge im Zusammenhang mit Alt-Texten aufgefallen, die damit zusammenhängen.

Wenn Sie nicht

Hidde de Vries schrieb kürzlich You don’t always need alternative text.

Aber wenn ein Symbol ein Wort daneben hat, zum Beispiel „Abmelden“, ist das Symbol selbst dekorativ und benötigt keinen Alternativtext.

<button type="button"><img src="close.svg" alt="" /> Close</button>

In diesem Fall können wir das `alt`-Attribut leer lassen, da ein Screenreader sonst „Button – Schließen Schließen“ ansagen würde.

Ich würde denken, dass es in einer perfekten Welt ideal wäre, wenn das Symbol rein dekorativ ist und über CSS angewendet wird, aber der Punkt bleibt: Wenn Sie ein Bild verwenden müssen, schadet `alt`-Text mehr, als er nützt.

Können wir es umsonst bekommen?

Computer sind heutzutage ziemlich schlau. Vielleicht könnten sie sich unsere Bilder ansehen und Beschreibungen anbieten, ohne dass wir sie manuell eingeben müssen.

🔥 Ich glaube, ich habe maschinelles Lernen benutzt, um nett zu den Leuten zu sein! In diesem Proof of Concept erstelle ich dynamischen Alt-Text für Screenreader mit Azures Computer Vision API. 💫https://#/Y21AHbRT4Y pic.twitter.com/KDfPZ4Sue0

— Sarah Drasner (@sarah_edo) 13. November 2017

Sarahs Demo verwendet eine Computer Vision API, um dies zu tun.

Was ist mit figcaption?

Ich sage ungern, aber ich bin nicht besonders gut darin, Alt-Text-Beschreibungen für Bilder in Blogbeiträgen hier auf CSS-Tricks zu schreiben. Das ist ein Problem, das wir mit Prozessänderungen beheben müssen. Wir verwenden jedoch oft `<figcaption>`, um Text hinzuzufügen, der sich auf ein Bild bezieht. Die Art und Weise, wie dieser Text oft formuliert ist, fühlt sich für mich wie Alt-Text an. Er beschreibt, was im Bild vor sich geht.

Ich habe mich danach umgehört, und Zell Liew sagte mir, dass er dasselbe tut.

Ich habe tatsächlich die gleiche Frage. Die meisten meiner figcaptions werden verwendet, um das Bild zu beschreiben, damit die Leser verstehen, worum es im Bild geht.

In meinen Gedanken habe ich mir überlegt, dass es schlechter wäre, den genauen Text aus der figcaption in den Alt-Text zu kopieren, da jemand, der Alt-Text liest, dann im Grunde dieselbe Beschreibung zweimal lesen würde.

Ich habe auch mit Eric Bailey gesprochen, der eine interessante Idee hatte.

<figure>
  <img src="screenshot.png" alt="Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds.">
  <figcaption aria-hidden="true">
    With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds.
  </figcaption>
</figure>

Das hier

• Bewahrt die Figurenanzeige
• Vermeidet das Leeren von `alt`, was für einige Screenreader problematisch sein kann.
• Hält die Beschreibung nahe am Inhalt und kommuniziert den Punkt an SR-Benutzer.
• Kommuniziert die wichtige Erkenntnis für visuelle Leser, ohne die Lektüre für SR-Benutzer zu duplizieren.
• Verwendet eine ARIA-Eigenschaft, die außerhalb von Formularen verwendet werden soll.

Ich möchte betonen, dass er dies nur als Idee betrachtete und es von der größeren Barrierefreiheits-Community nicht eingehend geprüft wurde. Wenn es welche von Ihnen gibt, die das lesen, was denken Sie?

Erics Demo verwendete einen ausführlicheren Alt-Text als die figcaption, aber es scheint, dass das Muster auch dann in Ordnung wäre, wenn sie identisch wären.

Kleine Erinnerung: Twitter hat Alt-Text

Aber Sie müssen die Funktion aktivieren.