Ich habe also versucht, meine Website so zugänglich wie möglich zu machen (für Nicht-JavaScript-Benutzer, Webcrawler, Screenreader usw.), und ich habe einen großen Haken.
Die Seite, die ich entwickle, ist sehr bildhart. (Ich zeichne dumme Sachen in meiner Freizeit und die Seite ist eine Art "Schaufenster".) Jede Seite der Seite hat ein einzelnes Bild (oder mehrere, wenn Kontext benötigt wird oder das Bild ist mehrere Panels), die normalerweise begleitet wird durch eine einzige Beschriftung darunter. Als ich zu dem Punkt kam, an dem ich die Optionen für die Barrierefreiheit hinzufügen musste, war ich mir nicht sicher, was ich tun sollte. Nehmen wir zum Beispiel an, ich hätte ein Bild von einem Mann, der einen Apfel isst, und der Witz war, dass da ein Wurm drin ist. Das erste, was ich getan habe, war einen lächerlich beschreibenden Alternativtext hinzuzufügen, da dies die einzige Möglichkeit war, ein "Äquivalent" für Screenreader bereitzustellen.
%Vor%Das schien zunächst okay zu sein, aber dann ging es wirklich schnell schief, als ich plötzlich den Bedarf an Text für bis zu 300 Zeichen (!!!) für die aufwändigeren Witze und Bilder sah. Nicht nur das, aber alt text ist sowieso nicht für Beschreibungen .
Also habe ich diese Probleme:
longdesc scheint für dieses Talent besser geeignet zu sein, aber longdesc wird von keinem Browser unterstützt (zumindest nach W3Schools), obwohl es scheint in der HTML5-Spezifikation zu sein . <figcaption> scheint der richtige Weg zu sein, aber es endet mit der Anzeige von Text unter dem fraglichen Bild, was definitiv nicht sehr ansprechend für meine Seite ist, besonders wenn ich zusätzliche Untertitel und Kontext in <p> tags oder so etwas hinzufügen möchte . Was soll ich tun? Was würde ich und wo? Ich bin total ratlos, und ehrlich gesagt bin ich mir nicht sicher, ob es eine gute Idee ist, eine Site zu erstellen, die ausschließlich auf Bildern basiert, die für Leute zugänglich sind, die nicht gut sehen können.
Das alt -Attribut ist für alternativen Text, d. h. textlichen Ersatz für ein Bild, so in dem Beispiel ist es angemessen, wenn es vernünftig die gleiche Geschichte wie das Bild erzählt. In Wirklichkeit können die meisten Bilder keine Texte haben, die voll "Alternativen" oder "Ersatz" sind; Es ist normalerweise eine Frage der Erfassung einiger der wichtigsten Nachrichten, wenn möglich.
Ein alt Text kann beliebig lang sein. Die Aussage, dass alt Texte keine Beschreibungen sein sollten, bedeutet nicht, dass sie nicht detailliert werden können, wenn sie benötigt werden. Der Punkt ist, dass es zu viele Beschreibungen gibt, die etwas über ein Bild aussagen, ohne seine Botschaft zu vermitteln (wie "große rote Kugel" oder "Ein Mann in einem Kanu").
Das longdesc -Attribut wird von einigen Programmen unterstützt, ist jedoch sehr umstritten und nicht Teil von W3C HTML5 CR, sondern wird als eigenständige "Erweiterung" entwickelt.
Das figcaption -Element ist für Untertitel, die zusammen mit einem Bild angezeigt werden. Das Problem des alternativen Textes wird überhaupt nicht behandelt. Es soll dem Benutzer präsentiert werden, ob er das Bild sieht oder nicht.
Wenn Sie komplexen alternativen Text bereitstellen möchten (wobei "komplex" bedeuten könnte: Listen, Tabellen, Audio / Video usw.), könnten Sie entweder ein img -Element mit einem longdesc -Attribut oder ein% verwenden co_de% element anstelle von object .
img In HTML 4.01 longdesc ist Teil der Spezifikation. In HTML5 wurde es entfernt und wird nun als HTML5-Erweiterung entwickelt (, aber es ist derzeit nur ein Working Draft von 2013 Update : es wurde eine W3C Empfehlung ).
Problem: Sie müssten den Inhalt entweder auf derselben Seite einfügen, aber dann sollten Sie ihn nicht visuell ausblenden (da nicht nur Benutzer von Bildschirmleseprogrammen auf diesen Inhalt zugreifen möchten). Oder Sie müssten separate Seiten für den Inhalt hinzufügen (aber dann beziehen Suchmaschinen diesen Inhalt nicht auf das Bild, d. H. Sie verpassen Rangpotenzial).
longdesc Das object element kann für jede Art von Medien verwendet werden. Sein Inhalt ist der Fallback-Inhalt, mit dem Sie Markup für den alternativen Text verwenden können.
Hier ist eine Diskussion über Alternativtext, der sich auf Ihre Situation beziehen könnte:
Obwohl ich @Jukka zustimme, ist der lange Alternativtext kein Problem für sich. Es stimmt, dass "alt text nicht für Beschreibungen" ist, sondern nur, weil alt text für gleichwertigen Inhalt ist. Wenn der äquivalente Inhalt zu einem bestimmten Bild ist eine Beschreibung davon, dann ist das in Ordnung.
Es ist nur so, dass für viele Bilder, die im Web verwendet werden, das nicht stimmt. Der beste Alternativtext für das Stack Overflow-Logo oben auf dieser Seite wäre beispielsweise nicht
Das Stack Overflow-Logo: ein abstrakter In-Tray, der mit Papier überfüllt ist, gefolgt von dem Wort "stack", und in Fettdruck das Wort "overflow"
Es wäre einfach "Stack Overflow", da dies eine äquivalente Erfahrung für eine sehbehinderte Person bietet (d. h. sie teilt ihnen mit, auf welcher Website sie sich befindet).
Aber wenn Ihre Bilder Cartoons sind, schätze ich, dass das Schreiben von altem Text für sie ein bisschen so ist wie das Erstellen von Audiodeskriptionen für Filme. Sie müssen aussagekräftiger sein, wenn Sie eine gleichwertige Erfahrung bereitstellen möchten. Es ist sicherlich eine Herausforderung, vor allem, wenn Sie keine Erfahrung haben, oder sehbehinderte Benutzer mit ihm zu diskutieren.
Joe Clark beschrieb in seinem Buch "Building Accessible Websites" die Beschreibung von Bildern:
Und sogar Alt-Text für Comic-Strips, obwohl sein Beispiel für dialoglastige Streifen ist, und ich bin mir nicht sicher, welche Art von Erfahrung es in den heutigen Screenreadern bietet:
Ich denke, das Hinzufügen von beschreibendem Text in <figcaption> ist eine gute Idee. Es gibt natürlich das Problem mit der Browserunterstützung, das sollte mit CSS angesprochen werden können:
figcaption { display: block; }
Sie können diesen Text dann standardmäßig in figcaption { display: none; } ausblenden und einen Link einfügen, der die Seite mit den Bildunterschriften aktualisiert, die in einem alternativen Stil angezeigt werden - figcaption { display: block; }
Diese Option beseitigt dann die Notwendigkeit von JavaScript-Lösungen und gibt nur diejenigen, die sie speziell anfordern, mit Bildunterschriften.
Du könntest das vielleicht mit ein bisschen PHP einrichten:
%Vor% HTML-Link - <a href="example.php?CaptionDisplay=true">Show captions</a>
Das ist völlig über meinem Kopf :) Lassen Sie mich wissen, wenn ich etwas besser erklären kann.
Tags und Links html image seo accessibility alt