stefanjann

Hallo,

ich will hier nicht groß Werbung machen für meine Band-Homepage, aber das Problem lässt sich am Einfachsten anhand der Homepage beschreiben. Daher hier erst mal die URL: www.taktfoll.de

Ich beschäftige mich seit einiger Zeit mit Barierefreiheit und mit dem BITV-Test. Um alles was ich bei dem Thema gelernt habe auch auszuprobieren teste ich das an meiner eigenen Seite um es dann später auch auf die Kunden loszulassen.

Ich hab beim BITV-Selbsttest gelesen, dass man die Schriftgröße und auch die Abstände am Besten mit em angibt, damit Leute die Schriftgröße im Browser vergrößern könnnen und trotzdem noch ein schönes Layout bekommen. Ich habe das bei meiner Seite umgetzt und wenn ich im Internet Explorer die Seite aufmache und die Schriftgröße auf "Sehr groß" setzte ist die Seite gut bis sehr gut lesbar. (Ein paar Stellen gibt es noch, aber ich arbeite noch daran...)

Zum Problem
Meine Band hier hat z.B. drei Formationen. Um auf der Homepage kenntlich zu machen, welche Formation gerade aufgerufen ist wechsle ich zum einen die Hintergrundfarbe und zum anderen verwende ich die Logos im kleinen als Schrifttext. Wenn man auf die Homepage schaut sieht man was ich meine. Hier noch kurz ein Beispiel:

Wobei das "Taktfoll" das Logo von Taktfoll ist und das "Taktfoll unplugged" folglich das Logo von Taktfoll unplugged. Jeweils mit einem Link darauf auf die Übersichtsseite dieser Formation.

Diese Schriftgrafiken wachsen logischerweise bei Schriftgröße "sehr groß" nicht mit.

Ich habe im Internet versucht ne "sinnvolle" Meinung zum Thema zu bekommen. Leider findet man nur schwarz-weiß-Meinungen:
- Laß die Logos weg und mach Text
- Ignoriere es, weil die Grafiken ja ein alt-Attribut haben, wen es stört, der soll die Grafiken durch alt-Atrribute ersetzen lassen.

Beide Meinungen sind jetzt nicht der "Renner".
Was kann ich tun. Wenn ich die Grafiken rausnehme, wird die Navigation viel schwerer, weil schwer erkennbar ist, um welche Formation es sich gerade handelt. Ich will aber schon so barrierefrei wie möglich sein.

Meine Idee war es evtl. mit JavaScript nach dem Wort "Taktfoll" zu suchen und das durch das passende Bild zu ersetzen. Damit wären Vorlesebrowser doch schon mal abgesichert. Und so ein Javascript könnte man auch deaktivierbar machen. Ist das ne sinnvolle Idee?

Gibt es eine Möglichkeit abzufragen ob der Kunde die Schrift auf "sehr groß" gestellt hat? Dann könnte man per JavaScript evtl. die Bilder durch größere austauschen....

Gibt es noch andere sinnvolle Ideen um so was sinnvoll zu lösen?
Ich hoffe hier auf ein paar gute Ansätze, denn das Problem gibt es sicherlich bei einigen Leuten.

Danke,
Stefan

__________________
SELECT * benutze ich nur um den Post kurz zu halten.

Mister Ad

nikosch

So wird das üblicherweise bei Überschriften gemacht, die vom Standard abweichende Schriftarten nutzen wollen und so über ein Span ein Hintergrundbild zugewiesen bekommen. Alternativ würde ich es so machen:

Im Fließtext: Formation mit geeignetem Inline-Tag umschließen (bspw. em). Im Tag ein weiteres <span>, darin der Text. Über CSS dieses span ausblenden und das em mit background-image versehen. Die Problematik ist dabei die nötige width Angabe, vgl. dazu Deinen anderen Thread.

Übrigens finde ich die Bilder als nicht beeinträchtigter Nutzer nicht sehr lesefreundlich.

__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--

Manko10

Das Problem ist halt, dass sich Hintergrundgrafiken in CSS 2 nicht skalieren lassen.
Du musst abschätzen, welchen Mehrwert die Grafiken wirklich bringen. Oft ist es wirklich klüger, stattdessen ein <em>-Tag zu verwenden. Dieses kann man dann formatieren, wie man will (<em> = leicht hervorgehobener Text).
Die JavaScript-Lösung ist auch möglich. Dann solltest du aber den Grafik-Teil komplett mit JavaScript erledigen (User ohne JavaScript bekommen den Text angezeigt). Also alle Elemente mit der Klasse class="logo" o.ä. durch eine Grafik, die zur aktuellen Body-Schriftgröße passt, einfügen. Wie und ob du einen Schriftgrößenwechsel abfragen kannst, weiß ich jetzt aus dem Kopf aber nicht.

__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

nikosch

Was soll der Quatsch mit der Umfrage? "Hab ihr das auch?"


[MOD: Umfrage entfernt]

__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--

stefanjann

Naja, Quatsch wollte ich nicht machen, dafür nehme ich Foren zu ernst. Ich wollte eher wissen, ob das Problem jetzt nur eines von mir ist, oder ob andere Leute sich mit der Thematik auch beschäftigen oder das Ähnlich machen.
Aber wenn ihr das als Quatsch anseht, dann löscht die Umfrage raus.

__________________
SELECT * benutze ich nur um den Post kurz zu halten.

agrajag

Das span-element kann man sich evtl. auch sparen. Einfach dem <em> ein Hintergrundbild verpassen und den Text mit text-indent ins Nirvana verschieben

Ich finde im übrigen auch, dass eine stinknormale Grafik mit einem alt-Attribut reicht. Ok, die Grafik skaliert dann nicht mit, wenn die Schriftgröße vom Nutzer geändert wird - aber damit könnte ich leben. (In Opera und Firefox zoomt inzwischen sowieso standard-mäßig die ganze Seite statt nur der Text).
Du kannst ja auch mal Versuchen die Größe der Grafik einfach auch in "em" auszuzeichnen.


Manchmal hilft eine gesunde Portion Pragmatismus gegenüber Idealismus

__________________
Today you...Tomorrow me.

Manko10

Wenn die Grafik mit em-Werten (oder ex) eine Breite und eine Höhe zugewiesen bekommt, skaliert auch diese im Textzoom. Das Problem, dass nicht skaliert werden kann, ist nur bei BG-Grafiken gegeben.
Eine stinknormale Grafik würde ich aber nicht einsetzen. Die Semantik eines Bildes ist eigentlich die eines jeden anderen eingebetteten Objektes auch: es stellt eine Ergänzung dar, ist aber nicht Teil eines anderen Objektes (hier der Fließtext).

__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

nikosch

Sinnvollerweise die Höhe. Ich finde Grafiken nicht so toll. In Höhe des Fließtextes wird man sie kaum lesen können, mit einer größeren Höhe wird der Zeilenfluß gestört. Grafiken werden nach Kopieren von Fließtext nicht mehr als Inhalte da stehen. Sicher wird ein Screenreader an Stelle der Grafik nicht den Begriff vorlesen sondern "Bild, Titel soundso" oder ähnliches. Etc. pp. Mit Barrierefreiheit hat das imho nicht mehr viel zu tun. Schon gar nicht, wenn die Grafik nicht größenskaliert, was für Seheingeschränkte bedeutend ist. Skalierende Grafiken haben auf der Kehrseite nur eine Größe, in der sie wirklich gut aussehen.

Fällt mir gerade ein: background-images sind auch für den Druck problematisch.

__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--

agrajag

Ich finde Grafiken als Ersatz für Text auch nicht unbedingt schön. Aber ich finde sie auch nicht schlimm.
Zumindest im Firefox kannst du ein Bild mit alt-Attribut markieren, kopieren und den Text in Notepad einfügen....


Es ist sicher nicht die optimale Lösung. Aber eine optimale Lösung ist nur mit unverhältnismäßigem Aufwand erreichbar - wenn es überhaupt eine gibt.

__________________
Today you...Tomorrow me.

nikosch

Und da sollte das KISS Prinzip wirken. Zumal ich die Problematik nicht nachvollziehen kann. Die Formation kann man sowohl mit Tags auszeichen und stilistisch abheben, als auch den Mitteln, die die deutsche Rechtschreibung bietet - An- und Abführungsstriche.

__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--