Mein Arbeitgeber veranstaltet jedes Jahr einen Schreibwettbewerb. Jedes Jahr veröffentlichen wir die drei besten Ergebnisse in jeder Kategorie auf unserer Website. Keine große Sache. In diesem Jahr wurde eine Kategorie für einen Graphic Novel hinzugefügt.
Welche Standards und Best Practices gibt es, um dies auf unserer Website zu veröffentlichen? Ich gehe davon aus, dass ein PDF für die Barrierefreiheit schrecklich wäre. Mein Bauchgefühl ist es, es einfach zu scannen und JPGs zu erstellen. Wäre es am besten, den Text in Absätze zu transkribieren oder ihn einfach als Alternativtext zu belassen?
Jede Hilfe wäre dankbar.
UPDATE: Ich denke, meine endgültige Lösung wird Teile der folgenden Antworten enthalten.
- Optionen zum Anzeigen und Herunterladen
- Beim Herunterladen wird ein PDF für Personen gestartet, die nach Druckqualität suchen
- In der Ansicht wird ein neues Fenster / eine neue Registerkarte angezeigt, deren Kopfzeile nur auf das Unternehmensbranding reduziert ist.
- Die Ansicht enthält ein JPG für die gesamte Seite der aktuellen Seite und wechselt zwischen dem Navigieren hin und her.
- Die Ansicht enthält auch eine absatzbasierte Erläuterung der Szene (n) auf der Seite im Klartext. Dieser Text wird vor Browsern mit CSS ausgeblendet.
- Das Anzeigen von Bildern enthält Alternativtext, der nur definiert, was das Bild ist (IE-Titel und Seite).
Ich glaube, dass dies alle Grundlagen abdecken wird, während es immer noch relativ schmerzfrei ist, etwas zu posten.
quelle
Antworten:
Ich habe vor einiger Zeit einige wirklich verrückte Graphic Novel +
canvas
Experimente von Google gesehen. Der gesamte Text war einfacher Text (gute Zugänglichkeit), aber alle Bilder waren deutlich zu sehen. Ich kann es scheinbar nicht finden, aber 20 Dinge, die ich gelernt habe, zeigen, was ich meine.Ich würde sagen, das ist übertrieben für das, was Sie tun möchten, also würde ich Folgendes tun:
Und ich würde das Div als solches stylen:
Auf diese Weise haben Sie das Bild gut sichtbar, damit Sie Personen sehen können, und den einfachen Text, den Bildschirmleser vorlesen können. Man könnte auch eine Transkription des Comics in das
alt
Tag einfügen, aber auf meine Weise können Sie der Transkription mehr semantische Bedeutung verleihen.Sie können auch Javascript hinzufügen, um das Symbol umzuschalten
text-indent
und es sichtbar zu machen, wenn schwer sichtbare Personen es sehen möchten.quelle
Sie sollten sich " Never Mind The Bullets " ansehen , das mit HTML5 und Canvas erstellt wurde. Ich bin mir nicht sicher, wie zugänglich es ist, aber Sie werden vielleicht feststellen, dass es Ihnen einige Ideen gibt. Beachten Sie jedoch, dass der HTML5-Ansatz IE8 und darunter ausschließt (IE9 ist in Ordnung). Abhängig von Ihrem Publikum könnte dies ein Nichtstarter sein.
quelle
HTML hat ein longdesc- Attribut, das auf die URL einer 'langen Beschreibung' verweist. Warum nicht das anstelle vieler Alt-Tags verwenden?
quelle
Oof, das ist eine schwierige Frage. Es ist wirklich schwer, so etwas wie einen Graphic Novel mit guter Zugänglichkeit zu präsentieren. Bilder sind viel besser als PDF, da haben Sie Recht. Außerdem würde ich nicht empfehlen, die gesamte Beschreibung jedes Bereichs als Alternativtext zu verwenden, geschweige denn die gesamte Seite. Ich denke, der beste Weg wäre, Absätze mit Transkripten hinzuzufügen und das Alt als Indikator für das Bild zu verwenden (
alt="graphic novel x, page y"
).Vielleicht wäre es eine Idee, es vorlesen zu lassen und es auch als Audiodatei bereitzustellen?
quelle
Warum nicht neue HTML5-Elemente wählen?
In Bezug auf die Barrierefreiheit können Sie sich auf viele kleine Skripte (wie das von Remy Sharp, das unter http://whatwg.org im Abschnitt mit Beispielen verfügbar ist ) oder Bibliotheken ( modernizr ) verlassen.
Jetzt meine Lösung: Scannen Sie alles nach JPEG , fügen Sie mit figure element mit figcaption alle Bilder als img-Tags hinzu, um sie zugänglich zu halten, und verwenden Sie natürlich Alternativtext . Lesen Sie den HTML5-Abschnitt über die Verwendung des alt-Attributs . Es gibt einige schöne Beispiele dafür, wie dies für die Barrierefreiheit hilfreich sein kann.
BEARBEITEN
Für diejenigen, die nach einer wirklich sehr gut zugänglichen Ebene suchen, lassen Sie uns alle neuen Ressourcen fallen, auf die wir zählen können, wie HTML5-neue Elemente, CSS @ font-face, zurückblendender Text zum Ausblenden ... Kommen wir zu rohem POSH (Plain Old Semantic HTML). .
Ich würde mich für die folgende extreme Rohlösung entscheiden: Erstellen Sie JPEGs und verwenden Sie das alt-Attribut, um alles so gut zu beschreiben, wie es sein muss, genauso wie im HTML5-Handbuch, aber erweitert, dh sehr, sehr beschreibenden Texten (gibt es) keine Begrenzung der Alt-Attributgröße).
quelle
figcaption
. Wissen Sie auch, wie viele Screenreader HTML5-Elemente noch unterstützen?Beachten Sie ein Detail: JPGs beim Rendern von Text können schrecklich sein. Sie müssen Ihre Grafiksoftware so einstellen, dass sie in sehr hoher Qualität exportiert . Wenn ja, ist eine gute Route. Das Laden von PDFs stürzt in vielen Browsern / Computern ab. Aber manchmal ist es die einzige Option, es hängt vom Inhalt, der Zielgruppe ab ... Das Problem, das ich mit HTML 5 sehe, scheint noch nicht vollständig gelöst zu sein ... Sie können sich auch für eine erweiterte Flash-Lösung entscheiden (ich habe gerade ein PDF beantwortet Flash Flipbook Frage hier)
Wenn Sie sich für JPG entscheiden, würde ich irfanview.com empfehlen (ermöglicht auch das Erstellen kleiner JPGs in Ks). Dort finden Sie ein kostenloses Dienstprogramm, das sich hervorragend als Desktop-Bildbetrachter eignet, aber auch als Stapelkonverter mit Stapeloperationen und Filtern. Dies könnte für die JPG-Route von wesentlicher Bedeutung sein.
Bearbeiten: Sie sprechen über die Option "Als Text belassen". Wenn Sie sich darauf verlassen können, dass ein Programmierer hilft, suchen Sie nach einer Lösung, um die Textdaten und Bilder für die Ausgabe von formatiertem HTML zu verarbeiten, und das ist alles. Ich denke, es gibt einige kostenlose Dienstprogramme wie dieses, die HTML exportieren. Das würde das Problem mit dem JPG-Text beseitigen (aber selbst wenn Sie sich für die gesamte JPG-Route entscheiden, könnte das Laden eines großen JPG weniger dauern als das Aufblähen eines PDFs oder einer anderen Lösung und wäre weniger abstoßend ...)
quelle
Kennen Sie das DjVu-Format?
Wenn nicht, kann dieser Link für Sie nützlich sein. Auch hier ist die offizielle Website , die auch eine große Ressource ist.
quelle
Das ist eine Frage, die zum Nachdenken anregt, und Ihre Antworten sind sehr unterschiedlich. Die Auswahl der besten Antwort ist ziemlich subjektiv, aber die Diskussion und die Unterschiede zwischen den Antworten sind für alle nützlich.
Davon abgesehen ist hier eine Idee ...
Hier ist meine Interpretation der Anforderungen:
Angesichts dieser Dinge denke ich, dass der beste Ansatz darin besteht, dem Benutzer zwei "Frames" Material zu präsentieren (Sie können iFrames verwenden, wenn Sie dies wünschen, dies ist jedoch nicht erforderlich). Ich schlage nicht die Verwendung von HTML-Frames vor.
Der Benutzer blättert durch die Zellen, indem er möglicherweise auf ein nach rechts zeigendes Dreieck klickt, sodass er eine Zelle mit einem nach links zeigenden Dreieck zurückgehen kann.
Ich würde auch zwei weitere Miniaturansichten vorschlagen: eine noch kleinere Ansicht des Bildes der nächsten Seite (mit mehr Zellen) und eine ebenso kleine Ansicht des Bildes der vorherigen Seite. Auf diese Weise kann der Benutzer zu den tatsächlichen Seiten des Buches navigieren und nicht nur Zelle für Zelle klicken.
Ich denke, dass es sich lohnt, darüber nachzudenken, den Rest Ihrer Site-Elemente zu verbergen. Sie können dies zu einer Option machen, auf die der Benutzer klicken kann (z. B. zum Ausblenden des Textes), oder Sie können einfach die typische Benutzeroberfläche der Site beim Öffnen des Buches ausblenden, um den Benutzer in die umfassendste Erfahrung des Graphic Novels online einzutauchen. Sie können auch ein Umschalten der Site-Benutzeroberfläche anbieten, indem Sie ein Site-Logo / eine Site-Schaltfläche [Rest der Site: SHOW | AUSBLENDEN].
Deshalb schlage ich diesen Ansatz vor:
alt
Text ein.quelle