Einige Dinge Über die `alt` – Text

0
66

Ich bin sicher, Sie wissen über alt-text. Es ist das Attribut im image-tag, dass hat die wichtige Aufgabe, zu beschreiben, was das Bild ist für jemanden, der es nicht sehen können aus irgendeinem Grund. Bitte verwenden Sie Sie.

Ich will nicht zu dimish die nutzen Sie bitte diese Nachricht, aber einige interessante alt-text-Dinge, die Sie haben, kommen in meinen Tag-zu-Tag-in letzter Zeit im Zusammenhang.

Wenn Sie nicht

Hidde de Vries schrieb Sie brauchen nicht immer alternative text vor kurzem:

Aber wenn ein Symbol hat eine nächste Wort, zum Beispiel “Log out”, das Symbol an sich ist dekorativ und brauchen nicht, einen alternativen text:

<button type=”button”><img src=”schließen.svg” alt=”” /> Schließen</button>

In diesem Fall lassen wir das alt-Attribut leer ist, da sonst ein screenreader würde verkünden “- Taste – schließen’.

Ich würde denken, in einer perfekten Welt, denn das Symbol ist ganz dekorativ, dass die Anwendung es per CSS wäre ideal, aber der Punkt steht: wenn Sie ein Bild, alt-text schadet mehr als es hilft.

Können wir es kostenlos zu bekommen?

Computer sind pretttttty smart in diesen Tagen. So könnten Sie vielleicht Blick auf unsere Bilder und bieten up-Beschreibungen, ohne uns manuell eintippen.

🔥 Glaube ich, maschinelles lernen, nett zu sein zu den Menschen! In diesem proof-of-concept, ich bin die Erstellung von dynamischen alt-text für Screenreader mit Azure-Computer Vision-API. 💫https://t.co/Y21AHbRT4Y pic..com/KDfPZ4Sue0

— Sarah Drasner (@sarah_edo) November 13, 2017

Sarah demo verwendet eine Computer-Vision-API zu tun.

Was figcaption?

Ich hasse es zu sagen, aber ich bin nicht besonders gut im schreiben alt-text-Beschreibungen für Bilder in blog-posts hier auf CSS-Tricks. Es ist ein problem, das wir beheben müssen mit Prozess-änderungen. Wir tun oft mit <figcaption> wenn Sie zum hinzufügen von text, der in Zusammenhang mit einem Bild. Die Art und Weise, dass der text oft gestaltete sich anfühlt alt-text zu mir. Es beschreibt, was Los ist im Bild.

Ich wurde gefragt, um über diese und Zell Liew erzählte mir, er tut das gleiche:

Ich habe eigentlich die gleiche Frage. Die meisten meiner figcaptions werden verwendet, um das Bild zu beschreiben, sodass der Leser verstehen, was das Bild über.

In meinem Kopf, ich dachte, es würde schlimmer werden, legen Sie die exakte Kopie von dem figcaption in den alt-text, als jemand, der das Lesen alt-text würde dann im wesentlichen die gleichen Lesen Beschreibung zweimal.

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

<Abbildung>
<img src=”screenshot.png” alt=”Screenshot von Chrome die Anzeige einer split-Ansicht. Auf der linken Seite ist eine Seite, die Miniaturansichten Vergleich von pre-und post-Optimierung der Dateigröße. Auf der rechten Seite ist die Chrome developer tools zeigen Farbe Rastern Dauer für die Bilder. Mit einem 6x CPU Verlangsamung, die längste Farbe Raster nahm 0.27 ms, AKA 0.00027 Sekunden.”>
<figcaption aria-hidden=”true”>
Mit einem 6x CPU Verlangsamung, die längste Farbe Raster nahm 0.27 ms, AKA 0.00027 Sekunden.
</figcaption>
</figure>

Diese:

  • Bewahrt Abbildung styling
  • Vermeidet nulling alt, was problematisch sein kann für einige Bild-Leser
  • Hält die Beschreibung der Nähe der Inhalte und kommuniziert Punkt-zu-SR-Nutzer
  • Kommuniziert erhebliche mitnehmen visual Leser ohne doppelte Lektüre für SR-Nutzer
  • Verwendet eine Arie Eigenschaft entworfen, um verwendet werden, außerhalb von Formularen

Ich würde betonen, dass er betrachtet dies nur eine Idee und es wurde auch nicht stark geprüft durch die größere Zugänglichkeit der Gemeinschaft. Wenn jemand von Euch da draußen das Lesen, was denken Sie?

Eric demo verwendet ein Ausführlicher alt-text als das figcaption, aber es scheint, wie das Muster wäre in Ordnung, auch wenn Sie identisch waren.

Kleine Erinnerung: hat alt-text

Aber Sie müssen die Funktion zu aktivieren.