Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Dynamische Textersetzung vs. Screen Reader

Dienstag, 10. November 2009

Das Design von Schriften bereitet bei der Gestaltung von Webseiten immer wieder Kopfschmerzen. Nur eine Handvoll Fonts sind auf allen Systemen verfügbar, und aufwendige grafische Effekte sind nahezu unmöglich, wenn man sich an CSS und HTML Standards halten will.

So die Einleitung eines Artikels, der eine inzwischen mehrere Jahre alte Technik beschreibt. Eine Technik, die hier immer noch eingesetzt wird, um die Überschriften im Style Leonardo zu generieren.

Nun mag ja in einigen Jahren @font-face embedding allgemein verfügbar sein. Bis es so weit ist halte ich die Dynatext Technik noch immer für eine der besten:
Das fallback, d. h. die Funktion ohne Javascript, ist perfekt.
Und die Barrierefreiheit ebenso.
Wirklich?
Mal in einem Screen Reader testen:


Download des Hörbeispiels (mp3 | 76 kB)

Was sagt der Screen Reader? (im Hörbeispiel ist es der NVDA)

Webdesign nach Maß - Grafik - von - Grafik - webdesign weisshart

Zugegeben. Das zweimalige Ansagen einer Grafik ist nicht schön. Aber akzeptabel. Und die Technik damit barrierefrei: Es geht keine Information verloren; und die Navigation mit dem Screen Reader funktioniert weiterhin (in diesem Fall das Anspringen von Überschriften).
Die Belästigung für Screen Reader Nutzer durch das unschöne Ansagen der Grafiken hält sich in Grenzen, da diese Technik der dynamischenTextersetzung aus Performance Gründen ohnehin nur für kürzere Textpassagen, z. B. Überschriften, einsetzbar ist.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE