nicht angemeldet
Alternativtexte für transparente Grafiken?
Hallo.
Da mir weder die gängigen Suchmaschinen, noch das hiesige Archiv Auskunft erteilen konnten, hier meine Problemstellung:
Ausgangslage ist eine Bildergalerie mit Thumbnails, die auch ohne Zuhilfenahme von Javascript mit dem Nutzer interagieren können sollen. Dazu setze ich die eigentlichen Thumbnails per CSS in den Hintergrund, so dass "a:hover {background-image:...}" für die skriptunabhängige Reaktion sorgen kann. Damit man allerdings das Hintergrundbild auch vollständig sieht, definiere ich ein transparentes Bild gleicher Größe für den Vordergrund.
Nun meine Frage: Soll die kurze Bildbeschreibung im alt-Attribut stehen oder soll dieses besser leer bleiben (alt="") und die Beschreibung innnerhalb der name-, title- oder longdesc-Attribute angegeben werden. Zu berücksichtigen ist, dass es sich immer um das gleiche 1x1-Pixel-PNG handelt ("Gib mir ein einzelnes Ping, Wassili!"), aber unterschiedlich aufgezogen unter natürlich unterschiedlich verlinkt.
MfG, at
-
Hallo.
hallo
Nun meine Frage: Soll die kurze Bildbeschreibung im alt-Attribut stehen oder soll dieses besser leer bleiben (alt="") und die Beschreibung innnerhalb der name-, title- oder longdesc-Attribute angegeben werden.
es sind die attribute src und alt erforderlich ... hier die w3.org erklärung für alt:
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.Zu berücksichtigen ist, dass es sich immer um das gleiche 1x1-Pixel-PNG handelt ("Gib mir ein einzelnes Ping, Wassili!"), aber unterschiedlich aufgezogen unter natürlich unterschiedlich verlinkt.
ich würde es halt leer lassen, weil das bild eh durchsichtig ist ...
MfG, at
cu
ulli-
Hallo.
es sind die attribute src und alt erforderlich ... hier die w3.org erklärung für alt:
Weiß ich doch :-)
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.
Soll dieser Text aber das Bild beschreiben? Nicht zwangsläufig, oder?
ich würde es halt leer lassen, weil das bild eh durchsichtig ist .
Und wohin mit der Beschreibung? Aber danke schon einmal für deine Einschätzung.
MfG, at
-
-
Hallo,
Du musst ja nicht dem Bild selbst das title-Attribut verpassen. Es kann sich ja auch auf andere Elemente beziehen, etwa auf td. Logisch falsch wäre es m. E. dem leeren img-Element ein alt-Attribut zu verpassen, das das Hintergrundbild beschreibt.
Warum setzt Du die Bilder in den Hintergrund? Andersrum sparst Du Dir das ganze Hickhack. Sehr sauber ist Deine Lösung ja nicht. Auch ohne JavaScript gibt es sicher genügend andere Interaktionsmöglichkeiten, wenn Du das Bild direkt einbindest.
Heiner
-
Hallo.
Du musst ja nicht dem Bild selbst das title-Attribut verpassen. Es kann sich ja auch auf andere Elemente beziehen, etwa auf td. Logisch falsch wäre es m. E. dem leeren img-Element ein alt-Attribut zu verpassen, das das Hintergrundbild beschreibt.
Mein <td> ist ein <li>, aber danke für deine Einschätzung.
Warum setzt Du die Bilder in den Hintergrund? Andersrum sparst Du Dir das ganze Hickhack. Sehr sauber ist Deine Lösung ja nicht. Auch ohne JavaScript gibt es sicher genügend andere Interaktionsmöglichkeiten, wenn Du das Bild direkt einbindest.
Sicher. Nennt du mir einige?
Sauber ist mein Ansatz schon. Er validiert und funktioniert in allen mir bekannten Browsern, die CSS unterstützen. Wird kein CSS unterstützt erscheint ohnehin ein beschreibender Textlink, den das CSS bislang versteckt hatte.
Und wenn ich die Bilder nicht in den Hintergrund setze, kann ich sie nicht mittels CSS austauschen. Ein solcher Austausch ist übrigens notwendig, da die Interaktion auf diese Weise erfolgen soll, und nicht durch Umrandung etc.
MfG, at-
Hallo at,
Wird kein CSS unterstützt erscheint ohnehin ein beschreibender Textlink, den das CSS bislang versteckt hatte.
Dieses alles entscheidende Detail hättest du vielleicht vorher erwähnen sollen. In dem Fall kannst bzw. solltest du natürlich einen leeren Alternativtext angeben, denn die Grafik ist ja irrelevant, wenn schon ein Textlink danebensteht. Aber was machst du, wenn CSS aktiviert ist, Bilder aber nicht? Der Textlink bleibt unsichtbar und die Hintergrundgrafik auch.
Lässt es sich nicht so lösen?
ul,li {margin:0; padding:0;}
li a {display:block;}
li a span {display:none;}
li {/* Beispielhaft: */ display:block; float:left; border:1px solid black; margin-right:Xpx;}
#bild01 {width:Xpx; height:Xpx; background-image:url(bild01.png);}
#bild01:hover {background-image:url(bild01t.png);}
#bild02 {...}
#bild02:hover {...}
...<ul>
<li><a id="bild01" href="bild01-gross.png"><span>bildtitel</span></a></li>
<li><a id="bild02" href="bild02-gross.png"><span>bildtitel</span></a></li>
...
</ul>Das ist die bekannte Methode, mit CSS Bilder bzw. Bildlinks einzufügen, ohne img- und object-Elemente, natürlich mit allen vor- und Nachteilen... JAWS gibt brav die Liste samt Links aus.
Und wenn ich die Bilder nicht in den Hintergrund setze, kann ich sie nicht mittels CSS austauschen. Ein solcher Austausch ist übrigens notwendig, da die Interaktion auf diese Weise erfolgen soll, und nicht durch Umrandung etc.
Wieso ist der Austausch notwendig und wieso gerade diese Interaktion lohnenswert und benutzbar? Du musst damit rechnen, dass die Interaktion letztlich nicht funktioniert, weil beispielsweise zur Navigation die Tastatur benutzt wird. Die Ausgangsgrafik sollte also nicht etwa unkenntlich, ausgegraut oder ähnlich unscheinbar gemacht sein und der Standard-Thumbnail nicht als :hover-Hintergrund versteckt sein...
Grüße,
Mathias-
Hallo.
Wird kein CSS unterstützt erscheint ohnehin ein beschreibender Textlink, den das CSS bislang versteckt hatte.
Dieses alles entscheidende Detail hättest du vielleicht vorher erwähnen sollen. In dem Fall kannst bzw. solltest du natürlich einen leeren Alternativtext angeben, denn die Grafik ist ja irrelevant, wenn schon ein Textlink danebensteht. Aber was machst du, wenn CSS aktiviert ist, Bilder aber nicht? Der Textlink bleibt unsichtbar und die Hintergrundgrafik auch.
Sorry, dass ich es nicht erwähnt hatte. Asche auf mein Haupt ...
Dein ja auch bereits von anderen hier favorisierter Ansatz des leeren alt-Attributs ist damit -- bisher -- basisdemokratisch gewählt, danke :-)
Aber zu deiner Gegenfrage bezüglich abgeschalteter Grafik bei eingeschaltetem CSS: Die Textlinks sind eh nur da, weil es so nett aussieht, wenn sie beim Anzeigemodus in Opera die Grafiken vollständig ersetzen. Denn wer die Bildausgabe beim Durchsehen einer Bildergalerie unterdrückt, hat ein Problem, welches ich nicht durch Coden lösen kann ;-)Lässt es sich nicht so lösen?
ul,li {margin:0; padding:0;}
li a {display:block;}
li a span {display:none;}
li {/* Beispielhaft: */ display:block; float:left; border:1px solid black; margin-right:Xpx;}
#bild01 {width:Xpx; height:Xpx; background-image:url(bild01.png);}
#bild01:hover {background-image:url(bild01t.png);}
#bild02 {...}
#bild02:hover {...}
...<ul>
<li><a id="bild01" href="bild01-gross.png"><span>bildtitel</span></a></li>
<li><a id="bild02" href="bild02-gross.png"><span>bildtitel</span></a></li>
...
</ul>Das sieht meiner Lösung erstaunlich ähnlich, nur dass ich eben noch ein transparentes "Bild" darübergelegt habe. Danke für die Vereinfachung :-)
Das ist die bekannte Methode, mit CSS Bilder bzw. Bildlinks einzufügen, ohne img- und object-Elemente, natürlich mit allen vor- und Nachteilen... JAWS gibt brav die Liste samt Links aus.
Ich hatte mir die Lösung selbst zusammengesammelt. Und Nachteile hat wohl jede Lösung, aber deine jetzt auch mir "bekannte" ist mir schon sehr sympathisch.
Und wenn ich die Bilder nicht in den Hintergrund setze, kann ich sie nicht mittels CSS austauschen. Ein solcher Austausch ist übrigens notwendig, da die Interaktion auf diese Weise erfolgen soll, und nicht durch Umrandung etc.
Wieso ist der Austausch notwendig und wieso gerade diese Interaktion lohnenswert und benutzbar? Du musst damit rechnen, dass die Interaktion letztlich nicht funktioniert, weil beispielsweise zur Navigation die Tastatur benutzt wird. Die Ausgangsgrafik sollte also nicht etwa unkenntlich, ausgegraut oder ähnlich unscheinbar gemacht sein und der Standard-Thumbnail nicht als :hover-Hintergrund versteckt sein...
Danke für den Hinweis, aber ich bin eigentlich kein Programmierer, der Photoshop nur für dessen Filtereffekte liebt. Ich bin Gestalter Schwerpunkt Unternehmensdarstellung und Schriftgestaltung, was zumindest ein Stück weit dafür bürgen sollte, dass ich auch an dieser Stelle weiß, wie das Ergebnis aussehen und zu handhaben sein sollte.
Für gestalterische Fragen würde ich sicher nicht dieses Forum ansprechen -- ohne hiermit jemandem, und insbesondere nicht dir, zu nahe treten zu wollen. http://www.kommdesign.de ist für Fragen der Ergonomie sicher der bessere Ansprechpartner.
Aber nix für ungut. Ich danke dir noch einmal ganz herzlich für deine freundliche und weitreichende Auskunft.
MfG, at-
Hallo, at,
Aber zu deiner Gegenfrage bezüglich abgeschalteter Grafik bei eingeschaltetem CSS: Die Textlinks sind eh nur da, weil es so nett aussieht, wenn sie beim Anzeigemodus in Opera die Grafiken vollständig ersetzen. Denn wer die Bildausgabe beim Durchsehen einer Bildergalerie unterdrückt, hat ein Problem, welches ich nicht durch Coden lösen kann ;-)
Da du den Themenbereich Barrierefreiheit gewählt hattest, ging ich davon aus, du wollest die Bildergalerie möglichst zugänglich gestalten, was meiner Auffassung nach in der Regel heißt, die Inhalte möglichst transformierbar bereitzustellen. Das bedeutet im konkreten Fall, die Galerie auch ohne Grafiken zumindest ansatzweise durch beschreibende Texte und ähnliches lesbar zu machen. Ausgehend davon sind durchaus Szenarien denkbar, bei welchen die Grafiken für den Benutzer trotz primär visueller Wahrnehmung der Webseite irrelevant sind, die Texte aber nicht, somit also auch das Ausschalten der Grafiken nützlich wäre, um die Alternativinhalte lesen zu können. (»Weil es so nett aussieht« ist natürlich nicht der einzige Zweck, den das Einfügen von Textlinks haben kann...)
Und wenn ich die Bilder nicht in den Hintergrund setze, kann ich sie nicht mittels CSS austauschen. Ein solcher Austausch ist übrigens notwendig, da die Interaktion auf diese Weise erfolgen soll, und nicht durch Umrandung etc.
Wieso ist der Austausch notwendig und wieso gerade diese Interaktion lohnenswert und benutzbar? Du musst damit rechnen, dass die Interaktion letztlich nicht funktioniert, weil beispielsweise zur Navigation die Tastatur benutzt wird. Die Ausgangsgrafik sollte also nicht etwa unkenntlich, ausgegraut oder ähnlich unscheinbar gemacht sein und der Standard-Thumbnail nicht als :hover-Hintergrund versteckt sein...
Danke für den Hinweis, aber ich bin eigentlich kein Programmierer, der Photoshop nur für dessen Filtereffekte liebt. Ich bin Gestalter Schwerpunkt Unternehmensdarstellung und Schriftgestaltung, was zumindest ein Stück weit dafür bürgen sollte, dass ich auch an dieser Stelle weiß, wie das Ergebnis aussehen und zu handhaben sein sollte.
Es ist ja nett, dass du deine Profession von Zeit zu Zeit betonst (mittlerweile weiß ich es, danke! ;)), aber was soll mir das sagen? Ich wollte dir, ausgehend vom von dir gewählten Themenbereich sowie unabhängig davon, ob die fraglichen Galerie tatsächlich diesbezüglich problematisch ist, dazu raten, auf Tastaturbenutzung bei der Bildergalerie Rücksicht zu nehmen, *falls* du sie barrierefrei gestalten willst. Interpretiere da doch bitte kein Misstrauen in deine Fähigkeiten hinein; wenn du dir dessen sowieso bewusst bist und ich dir nichts Neues sage, ist das schön.
Für gestalterische Fragen würde ich sicher nicht dieses Forum ansprechen
Ich denke, dass ich in keinem Wort »gestalterische« Fragen im Sinne von »Ästhetik der grafischen Gestaltung« angesprochen habe noch hatte ich dies vor, es ging mir lediglich darum, das Problem der Benutzbarkeit bzw. Zugänglichkeit von Bildergalerien zu beschreiben, deren Bilder für den Benutzer erst hinreichend erkennbar sind, wenn sie mit der Maus überfahren werden. Es war ein genereller Hinweis ohne konkreten Anlass, weil ich die betreffende Galerie nicht kenne.
http://www.kommdesign.de ist für Fragen der Ergonomie sicher der bessere Ansprechpartner.
Zugänglichkeit betrachte ich durchaus als ein Teil der Ergonomie und ich behaupte auch, dass in diesem Forum in diese Richtung Kompetenzen versammelt sind.
Grüße,
Mathias-
Hallo.
Da du den Themenbereich Barrierefreiheit gewählt hattest, ging ich davon aus, du wollest die Bildergalerie möglichst zugänglich gestalten, was meiner Auffassung nach in der Regel heißt, die Inhalte möglichst transformierbar bereitzustellen. Das bedeutet im konkreten Fall, die Galerie auch ohne Grafiken zumindest ansatzweise durch beschreibende Texte und ähnliches lesbar zu machen. Ausgehend davon sind durchaus Szenarien denkbar, bei welchen die Grafiken für den Benutzer trotz primär visueller Wahrnehmung der Webseite irrelevant sind, die Texte aber nicht, somit also auch das Ausschalten der Grafiken nützlich wäre, um die Alternativinhalte lesen zu können. (»Weil es so nett aussieht« ist natürlich nicht der einzige Zweck, den das Einfügen von Textlinks haben kann...)
Ursprünglich hatte ich ja auch nacht dem alt-Attribut gefragt, was ja durchaus im Zusammenhang mit Barrierefreihiet steht und einen zusätzlichen Textlink tatsächlich ganz in die Nähe von »Weil es so nett aussieht« rückt. Dass du mit einer bessere Möglichkeit ohne <img>-Tag im die Ecke kommen würdest, konnte ich ja nicht ahnen, als ich gefragt hatte ;-)
Danke nochmal.Es ist ja nett, dass du deine Profession von Zeit zu Zeit betonst (mittlerweile weiß ich es, danke! ;)), aber was soll mir das sagen? Ich wollte dir, ausgehend vom von dir gewählten Themenbereich sowie unabhängig davon, ob die fraglichen Galerie tatsächlich diesbezüglich problematisch ist, dazu raten, auf Tastaturbenutzung bei der Bildergalerie Rücksicht zu nehmen, *falls* du sie barrierefrei gestalten willst. Interpretiere da doch bitte kein Misstrauen in deine Fähigkeiten hinein; wenn du dir dessen sowieso bewusst bist und ich dir nichts Neues sage, ist das schön.
Ich verwende jetzt schon eine ganze Weile darauf, ein altes <frame>/<table>-Layout in ein <div>+CSS-Layout zu verwandeln. Du kannst mir glauben, dass ich diese Mühe für eine ja bereits funktionierende Seite nur in Kauf nehme, *weil* ich sie berrierefrei gestalten will :-)
Aber wann ich meine "Profession" betont oder auch nur genannt hätte, wäre mir jetzt wirklich nicht bewusst. Ich wollte sicher weder dich, noch andere damit belästigen, sondern nur anklingen lassen, dass mir die Möglichkeiten, Thumbnails zu gestalten, nicht fremd sind.Ich denke, dass ich in keinem Wort »gestalterische« Fragen im Sinne von »Ästhetik der grafischen Gestaltung« angesprochen habe noch hatte ich dies vor, es ging mir lediglich darum, das Problem der Benutzbarkeit bzw. Zugänglichkeit von Bildergalerien zu beschreiben, deren Bilder für den Benutzer erst hinreichend erkennbar sind, wenn sie mit der Maus überfahren werden. Es war ein genereller Hinweis ohne konkreten Anlass, weil ich die betreffende Galerie nicht kenne.
Dann hatte ich dich tatsächlich missverstanden, entschuldige.
Zugänglichkeit betrachte ich durchaus als ein Teil der Ergonomie und ich behaupte auch, dass in diesem Forum in diese Richtung Kompetenzen versammelt sind.
Das wollte ich auch nie bezweifeln, aber mit speziellen Fragen spezielle Foren anzusprechen, hat sich bei mir bewährt. ... Hmm, dabei hatte ich doch versucht, es so wenig abwertend wie möglich klingen zu lassen ... :´-(
Ich hoffe, ich habe damit alles klargestellt, und danke dir nachmal für deine kontruktive Kritik :-)
MfG, at
-
-
-
-
-