statt Grafik Alternativtexte anzeigen

[Feuervogel]

Hallo,

ich möchte einen alternativen Stylesheet anbieten, bei dem statt der Grafiken nur die Alternativtexte angezeigt werden. Die Grafiken sind aber vorhanden. Wie kann man so etwas programmieren?

Gruß Feuervogel

[Steel]

Hi!

Ich weiss grad nicht genau, was Du moechtest. Sehe ich das richtig, du moechtest eine Seite, bei der zwar die Grafiken geladen werden, aber trotzdem wird nur der Alternativtext angezeigt?

Auch wenn ich mir noch nicht ganz im klaren bin, warum du sowas moechtest, kann ich dir wohl schonmal sagen, dass das nicht mit CSS funktioniert. CSS ist nicht fuer Inhalte da und kann diese auch nicht manipulieren. Nur das Aussehen.

Es gibt dabei eine einzige Ausnahme (die mir spontan einfaellt): Hintergrundgrafiken. Damit kann man rumspielen und das ein oder andere machen. Ich weiss nicht ob Dir das was hilft.

Vielleicht hast Du ein genaueres Beispiel, was du moechtest?

[Der Martin]

Hallo Steel,

Ich weiss grad nicht genau, was Du moechtest. Sehe ich das richtig, du moechtest eine Seite, bei der zwar die Grafiken geladen werden, aber trotzdem wird nur der Alternativtext angezeigt?

so ungefähr. So wie ich es verstehe, möchte der OP eine Version der Seite anbieten, bei der die Alternativtexte anstatt der Bilder angezeigt werden, *obwohl* die Grafiken verfügbar wären (ob sie geladen und dann vielleicht ignoriert werden, ist wahrscheinlich egal).

Auch wenn ich mir noch nicht ganz im klaren bin, warum du sowas moechtest, ...

Das ist mir auch nicht klar.

So long,
 Martin

[Feuervogel]

Hallo allen,

ich möchte einfach, dass eine Seite barrierefrei als nur Textversion angezeigt wird. So als ob man sie mit einem Textbrowser ansieht.

Dabei werden alle Grafiken, Hintergrund und auch normale Grafiken ausgeblendet. Und trotzdem soll für die Grafiken der Alternativtext angezeigt werden, der beschreibt, was man hier sehen würde, wenn man einen grafikfähigen Browser hätte.

Meine Seite wird von vielen Behinderten besucht und soll auch in der Textversion alle Informationen enthalten!

Der Feuervogel

[Christoph Schnauß]

hallo,

ich möchte einfach, dass eine Seite barrierefrei als nur Textversion angezeigt wird. So als ob man sie mit einem Textbrowser ansieht.

Dann müßtest du alle grafikbasierten Browser ausschließen, was du allein mit HTML-Mitteln nicht tun kannst.

Meine Seite wird von vielen Behinderten besucht und soll auch in der Textversion alle Informationen enthalten!

Sofern deine "behinderten Besucher" sowieso einen Textbrowser (oder einen Screenreader) benutzen, kriegen sie eh keine Grafiken zu "sehen". Aber die "alt"-Texte. Genau das ist ja der Grund, weshalb Grafik-tags _ohne_ alt-Attribut eine Seite invalide machen.

Dumme Nachfrage: hast du denn je selber mal versucht, dir deine Adresse (die wir leider bisher nicht kennen) in einem solchen Textbrowser anzuschauen?

Grüße aus Berlin

Christoph S.

[dr.colossos]

Hi,

meine "Idee" ...

<script>
for(var i = 0; i < document.images.length; i++)
     document.images[i].src = './ganzwoanders/nirvana/michtgibtsgarnicht.gif';
</script>

Mir wird beim tippen schon schlecht, aber was solls ...

Viel Erfolg!

[Feuervogel]

Hallo,

das ist doch mal ein konkreter Vorschlag. Danke. Und wie kann ich das Script mit dem CSS-Wechsel aktivieren?

Der Feuervogel

[Steel]

Hi,

was hat den das mit CSS zu tun?

[Feuervogel]

Da muss man schon oben anfangen zu lesen: Es geht darum, beim Umschalten auf eine Nur-Text-Version von CSS (alternatives Stylesheet) die Grafiken verschwinden zu lassen, aber die Alternativtexte der Grafiken anzuzeigen.

[Christoph Schnauß]

hallo Feuervogel,

Es geht darum, beim Umschalten auf eine Nur-Text-Version von CSS (alternatives Stylesheet) die Grafiken verschwinden zu lassen, aber die Alternativtexte der Grafiken anzuzeigen.

Da muß man schon _die Beiträge_ in diesem Thread richtig lesen: ein solches "Umschalten" ist leider nicht möglich. Nicht mit CSS. Die eventuell möglichen Alternativen wurden dir bereits benannt. Verbeiße dich jetzt bitte nicht in die Idee, daß das, was unmöglich ist, doch irgendwie erreicht werden könnte.

Es gibt kein "Umschalten auf eine Nur-Text-Version". Das geht nur serverseitig, wie ich es bereits angegeben habe.

Grüße aus Berlin

Christoph S.

[Feuervogel]

Vielen Dank allen,
mit den Grafiken wird es also nicht funktionieren.

Es gibt kein "Umschalten auf eine Nur-Text-Version". Das geht nur serverseitig

Das ist aber so falsch. Die Seite enthält aktuell ein alternatives Stylesheet als Nur-Text-Version (Grafiken voll ausgeblendet), welches mit einfachem Javascript umschaltet werden kann und dann statt der Grafik einen normal nicht sichtbaren Erklärungstext anzeigt.

***im Header***
  <link rel="stylesheet" type="text/css" href="format.css" title="Standard">
  <link rel="alternate stylesheet" type="text/css" href="nurtext.css" title="nur_Text">
***

***im Body***
diese Seite als <a href="javascript:change()">Textversion</a> anzeigen
<script>
<!--
  function change() {
  var i, a, neu='nur_Text';
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
   if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
     a.disabled = true; if(a.getAttribute("title") == neu) a.disabled = false; } } }
//-->
</script>
<font class="hide">Dieser Text ist normal nicht zu sehen, er erscheint erst in der Nur-Text-Version</font>
***

***in der format.css**
.hide { display: none; }
***

***in der nurtext.css**
img   { display:none; }
***

Wenn ich jetzt auf "Textversion klicke, erscheint der Zusatztext und die Grafiken sind nicht mehr zu sehen.

Meine Frage war eben nur, ob ich letztere Anweisung img{display:none;} so verändern könnte, dass die Alternativtexte doch sichtbar sind.

Aber wenn es nicht geht, belasse ich es so, wie es jetzt funktioniert.

Danke und gute Nacht!

[dr.colossos]

Hi,

das ist doch mal ein konkreter Vorschlag. Danke. Und wie kann ich das Script mit dem CSS-Wechsel aktivieren?

Bin mir nicht sicher ob das auf mein Post bezogen war, da meins nix mit CSS zu tun hat, aber ich antwort einfach mal.

Dies in den <HEAD> deiner HTML-Datei einbinden.

<script language="javascript" type="text/javascript">
function remove_images()
{
     for(var i = 0; i < document.images.length; i++)
         document.images[i].src = './ganzwoanders/nirvana/michtgibtsgarnicht.gif';
}
</script>

Zum Aufruf: Neben besseren Loesungen gibts diese leichte ...

<body onload="remove_images()" ... >

Oder einfach auf eine Schaltflaeche legen, und bei Klick ausfuehren.

{<div|<span|<a/}>Bilder ausblenden{</div|</span|</a}>

Viel Erfolg!

[Gunnar Bittersmann]

@@Christoph Schnauß:

Sofern deine "behinderten Besucher" sowieso einen Textbrowser (oder einen Screenreader) benutzen, kriegen sie eh keine Grafiken zu "sehen". Aber die "alt"-Texte. Genau das ist ja der Grund, weshalb Grafik-tags _ohne_ alt-Attribut eine Seite invalide machen.

Nein, das ist nicht der Grund. Was hat Barrierefreiheit (die sich auf Menschen bezieht) mit Validität (die sich auf Technik bezieht) zu tun?

Nicht valide ist HTML-Quelltext mit 'img'-Elementen ohne 'alt'-Attribute genau deswegen, weil es in der HTML-Spec (in maschinenlesbarer Form in der DTD festgehalten) so festgelegt wurde, das ebendieses Attribut bei ebendiesem Elementtyp Pflicht ist.

Und warum wurde das so festgelegt? Wegen Barrierefreiheit? Wohl kaum! Das WWW und HTML stammen aus einer Zeit, wo man sich darüber noch keine Gedanken machte. Allerdings haben noch viele an einem Terminal gesessen, das 80 × 24 Zeichen auf dem Bildschirm darstellen konnte, aber keinerlei Grafik (von ASCII-Art mal abgesehen).

Und es stellt sich die Frage, ob diese Festlegung sinnvoll ist. Es ist ja nicht bei allen Grafiken ein Alternativtext erforderlich, bspw. wenn die Grafik schon eine Beschriftung hat, der keine textuellen Informationen mehr hinzuzufügen wären. Wegen der HTML-Spec muss man dann <img src="foo" alt=""> schreiben; sinnvoll?

Live long and prosper,
Gunnar

[Steel]

Aha!

Ein lobliches Unterfangen, aber wenn Deine Seite sonst in Ordnung ist, musst Du soetwas fuer gewoehnlich nicht tun. Oder ist sie Grafisch so ueberladen? Wenn Natuerlich jeder Link eine Grafik ist, kann man das nicht barrierfrei nennen.

Solange Deine Seite aber z.B. semantisch korrekt, frei skalierbar ist, Grafiken mit alt Tags versehen sind und auch ansonsten Informationenen nicht in Grafiken stecken, dann sollte es keine Probleme geben. Normalerweise haben entsprechend behinderte Menschen Tools die ihnen die Alt Tags praesentieren. (Screenreader)

Die Grafiken verschwinden lassen und nur den Text praesentieren geht so nicht. Was du machen koenntest, waere, den wichtigeren Bildern eine kleine Box mitzugeben in der eventuell Erklaerungen stehen. (z.B. 'Das Verschwinden von Piraten eine Folge des waermeren Klimas' unter der Kurve die Klima und Piratenaufkommen der letzten 200 Jahre zeigt.)

Gerne kannst Du mit Javascript spielen und Grafiken durch Textboxen ersetzen. Aber das ist schon wieder nicht wirklich barrierefrei.

[Christoph Schnauß]

hallo Steel,

Gerne kannst Du mit Javascript spielen und Grafiken durch Textboxen ersetzen

Nein. Textbrowser verzichten nicht nur auf Grafiken. Sie verstehen darüber hinaus (meistens) kein CSS und auch kein Javascript.

Grüße aus Berlin

Christoph S.

[Steel]

Hey,

Das meinte ich mit 'nicht barrierefrei'.

*an den nicht vorhanden Hut tipp und weiterreit*

[Længlich]

Maayong adlaw!

Auch wenn ich mir noch nicht ganz im klaren bin, warum du sowas moechtest, kann ich dir wohl schonmal sagen, dass das nicht mit CSS funktioniert. CSS ist nicht fuer Inhalte da und kann diese auch nicht manipulieren. Nur das Aussehen.

Die Diskussion über den Sinn der Aktion mal außen vor lassend muß ich Dir an dieser Stelle widersprechen: Das Vorhaben ist IMHO mit CSS machbar.
Man kann das Pseudoelement :after hernehmen, diesem den passenden Content zuweisen und das Bild unsichtbar machen. Konkret ungefähr so (ungetestet):

img:after {  
    content:attr(alt);  
}

Das kann zwar der IE6 nicht, aber vermutlich ist es für die Funktionalität der Seite nicht kritisch, wenn in diesem nun ein Feature fehlt. Dafür zeigt der den alt-Text ja auch beim Hovern an. ;-)

Viele Grüße vom Længlich

[Længlich]

Ran annim!

Konkret ungefähr so (ungetestet):

img:after {

content:attr(alt);
}

  
Okay, [doch nicht](https://forum.selfhtml.org/?t=166414&m=1085421). Daß das bei leeren Elementen nicht klappt, hatte ich vergessen. Ich hätte die Forumsansicht nochmal aktualisieren und alle Postings lesen sollen... :-/  
  
Viele Grüße vom Længlich

[Christoph Schnauß]

hallo,

ich möchte einen alternativen Stylesheet anbieten

Was heißt "alternativ", was ist die "Normalität", an deren Stelle diese Alternative treten soll? Wie differenzierst du zwischen den beiden Darstellungsweisen?

bei dem statt der Grafiken nur die Alternativtexte angezeigt werden. Die Grafiken sind aber vorhanden. Wie kann man so etwas programmieren?

Gar nicht. Und allein mit CSS - das ja keine Programmiersprache ist - erst recht nicht. Was du aber machen kannst: biete deinem Besucher an, deine Seite auch ohne Grafiken anzuschauen. In der "grafikfreien" Alternativvariante stehen dann eben anstelle der Grafiken kleine Texte.

Die einzige und sehr brutale andere Möglichkeit, die du hast, würde darin bestehen, daß du dem "alternativen" Besucher deiner Seite vorschreibst, welchen Browser er zu benutzen hat. Textbrowser stellen ja keine Grafiken dar, die "alt"-Texte dagegen schon.

Grüße aus Berlin

Christoph S.

[ChrisB]

Hi,

ich möchte einen alternativen Stylesheet anbieten, bei dem statt der Grafiken nur die Alternativtexte angezeigt werden. Die Grafiken sind aber vorhanden. Wie kann man so etwas programmieren?

Mit CSS kann man natuerlich gar nicht "programmieren".

Die Bilder auszublenden, und den Inhalt des alt-Attributes als dynamisch generierten Content per :before/:after anzeigen zu lassen, sollte aber moeglich sein (einen faehigen Browser vorausgesetzt).

MfG ChrisB

[Christoph Schnauß]

hallo,

Die Bilder auszublenden, und den Inhalt des alt-Attributes als dynamisch generierten Content per :before/:after anzeigen zu lassen, sollte aber moeglich sein (einen faehigen Browser vorausgesetzt).

Nein. Da "alt" ein Attribut von <img> ist, würde es auch mit ausgeblendet, sobald du <img src="" alt="Alternativtext" style="display:none;" /> angibst.

Mit :before/:after läßt sich tatsächlich allerhand anfangen (natürlich nicht im IE6). Allerdings kann man damit das "alt"-Attribut nicht ersetzen.

Grüße aus Berlin

Christoph S.

[Gunnar Bittersmann]

@@ChrisB:

Wie kann man so etwas programmieren?

Mit CSS kann man natuerlich gar nicht "programmieren".

Mit XSLT aber. Und solch ein Stylesheet wäre hier vonnöten (Quelltext in XHTML vorausgesetzt), denn ...

Die Bilder auszublenden, und den Inhalt des alt-Attributes als dynamisch generierten Content per :before/:after anzeigen zu lassen, sollte aber moeglich sein (einen faehigen Browser vorausgesetzt).

... img:before {content: attr(alt)} geht nicht wegen ist nicht. 'img' hat als Inhaltsmodell EMPTY und kann damit auch keinen generierten Inhalt haben.

Dummerweise bietet Firefox bei

<?xml-stylesheet type="text/css" href="mit_bildern.css" title="mit Bildern" ?>  
<?xml-stylesheet type="text/xsl" href="ohne_bilder.xsl" title="ohne Bilder" alternate="yes" ?>

das XSLT-Stylesheet "ohne Bilder" nicht als Alternative im Menü an.

@Feuervogel:
Warum willst du das als alternatives Stylesheet haben? Reicht es dir zum Testen nicht, in deinem Browser die Anzeige von Grafiken auszuschalten?

Live long and prosper,
Gunnar