Bilder in Definitionsliste vergrößern
 

Hallo zusammen,

dass Bilder zur barrierefreien Darstellung in eine Definitionsliste gehören, scheint recht breit akzeptiert zu sein.

Per se sind diese Bilder für visuell Fähige nicht vergrößerbar.

Also habe ich mal ein wenig rumgespielt, da ich das gerne mal einsetzen möchte.

Folgendes ist dabei rausgekommen:

Vergrösserte Bilder in Definitionslisten am Beispiel Gustav Schwab

Im FF und IE7 WinXP neueste funktioniert das sehr ordentlich.
Opera bekommt beim Tabben keinen Fokus und bei Klick muss die Maustaste gedrückt bleiben, nicht gut.
Andere Browser habe ich gerade nicht zur Hand.
Hat jemand Vorschläge oder Ergänzungen, zum Beispiel zur Positionierung im Viewport? Wie sieht es in anderen Browsern /Betriebssystemen aus?

Danke einstweilen. Bin für 2 Std off.

Opera kann beim tabben keinen focus bekommen, weil opera die tabtaste nicht kennt (ausser in formularen)... ich glaube man muss im opera mit den pfeiltasten tabben? (weiss ich jetzt aber nicht genau)

Ähm ja :) es ist die Q-Taste wie ich gerade bemerke.
Dann gibts aber nur einen schwarzen Rahmen - nach wie vor also Mausarbeit angesagt.

Nur als kurze Anmerkung:
Eine solche Verwendung von DL skaliert nicht.
Sobald ein Wort aus der Bildunterschrift breiter wird als das Bild, wird es beim Skalieren verdeckt und damit unzugänglich.
Bei einer zweizelligen Tabelle tritt dieser Mangel nicht auf.

Interessante Technik. Prima Anregung, danke.

Mir gefällt es so ganz gut. Eventuell würde die Darstellung noch gewinnen, wenn der Hintergrund während der Darstellung des großen Bildes abgedunkelt dargestellt würde - ähnlich wie bei Lightboxes.

Ob Techniken, die beim Klicken keine neue Seite laden und auch keinen Sprung im Dokument vollziehen, von der breiten Masse als Konzept wirklich verstanden werden, kann ich nicht sagen.
Ich bin skeptisch.

Jakob Nielsen bewertet ja sogar schon Sprunglinks als Verletzung des "mentalen Modells".
Within-Page Links Violate Users' Mental Model

Scheint sonst niemanden zu interessieren, das Thema :shock:
Dabei ist es eine nette Spielerei und vielleicht mehr;)

kennst Du eine andere Verwendung?
Habe im oberen Bild eine Table eingebaut, die rot hinterlegte Schrift skaliert jetzt mit Hintergrund, die andere nicht, da werde ich wohl noch ein paar Klassendefinitionen einfügen müssen.

Nochmal der Link für die Bequemlichkeit:

Vergrösserte Bilder in Definitionslisten am Beispiel Gustav Schwab

Daran hatte ich gestern auch gebastelt- es soll halt ohne Scripting gehen, sonst könnte ich gleich lightbox nehmen.

Siehe das zweite Bild. Es hat eine Border^^ und sieht soweit ganz ordentlich ab 800x600 aus.
Viel genauer kann ich das Bild nicht positionieren, da die einzelne Definition von border-left merkwürdige Effekte hervorruft (Hintergrund scheint durch).
Ich muß aber left definieren, sonst baut sich das Bild in Relation zur dl auf, also eher rechts und kann aus dem Viewport rausfallen.
Habe wirklich viel probiert, aber viel besser scheint es nicht zu gehen, wenn man alle gängigen Auflösungen berücksichtigen will.

Aber vielleicht hast Du oder jemand anders noch eine Idee :)

Weiteres Problem beim IE6: Die Ausweitung durch border sorgt dafür, dass ein Fokusverlust nur ausserhalb der border möglich ist, ein komplettes Verdecken des Bildschirms ist so nicht möglich, es sei denn, der Nutzer klickt nach einigem Suchen auf die Scrollleiste seines IE 6 und vermutlich drunter - was nicht gerade barrierefrei ist :D

IE7, FF und Opera haben damit keine Probleme.

@ Nielsen: Würde gern wissen, was der für ein mentales Konzept hat. Manchmal schiesst er über das Ziel hinaus.
Sprunglinks sind für Nutzer, für welche die normale visuelle Navigation mit Maus gar nicht oder nur schwer zu nutzen ist.
In-Site-Links sind gängig. Ich gebe ihm nur soweit recht, als irgendwie klar sein muss, wo der Link hinführt, das kann sich aus dem Zusammenhang oder durch explizite Nennung ergeben.
Bei Skiplinks ist das klar, alle anderen müssen sorgfältig überdacht werden.

Vielleicht lesen viele interessiert mit, wer weiß.

Aber tröste Dich, ich bin auch so manchesmal davon überzeugt, dass ein von mir als hochspannend eingestuftes Thema doch massenhaft Poster zu Äußerungen inspirieren müsste :)
Zuletzt war es der Thread zu Präsentationen.
Interessierte niemanden.

Bilder vergrößert anzeigen ohne sie neu zu laden hat eine hervoragende Gebrauchstauglichkeit aus meiner Sicht.
"Kurz mal das Bild anschauen und weiter im Text!"


Ich halte eine zweizellige Datentabelle (TH, TD) für besser geeignet als eine DL mit einem Term.

Dumm gelaufen, dass das W3C so essentielle Elemente wie Caption für IMGs vergessen hat.

Ob überhaupt skalierende Lösungen mit DL möglich sind, weiß ich nicht.

Vermutlich nicht.

Ohne javascript: das ist ein absolut edles und verfolgenswertes Ziel, ACK.

Ich bin mit Positionierungen sehr unerfahren.
Das hat auch mit meiner persönlichen Abneigung gegen diese Eigenschaften zu tun.
Ich empfinde solche CSS-Konstrukte als "unrein". Maßangaben für Positionen anzugeben widerspricht in meiner engstirnigen Auffassung dem Ideal der Skalierbarkeit, der Flüssigkeit.

Ich denke auch, dass sie von breiten Nutzergruppen verstanden werden. Nicht nur, aber auch weil sie auf Wikipedia eingesetzt werden.

Ein guter Linktext kann über den Inhalt des Zieles Auskunft geben, aber nicht darüber, ob es sich um einen

1. In-Site-In-Page-Link
2. In-Site-Other-Page-On-Top-Link
3. In-Site-Other-Page-Inside-Link
4. Other-Site-Page-On-Top- Link oder
5. Other-Site-Page-Inside-Link

handelt.
(Das Ganze jetzt bitte mal janz flott mehrmals hintereinander sprechen :))

In der Spezifikation werden dazu eben keine Unterscheidungsmöglichkeiten aufgeführt.

Eine der denkbaren wäre: durchgezogener Unterstrich für Other-Page, gepunktet für In-Page.
Aber gepunktet ist schon belegt. Und die Überlegung ist nichts weiter als eine persönliche Vorliebe von mir ohne jede Relevanz.

Hallo andir,

wenn ich davon noch nie gehört habe, dann spricht das sicher nicht gegen die Richtigkeit deiner Aussage.
Hast du zu dieser Thematik mal den einen oder anderen Link, damit ich mich da einlesen kann?

Und zu der von dir verwendeten Technik:
Wenn es nicht anders geht, dann muss ich halt versuchen, die Technik anhand des source nachzuvollziehen.
Mein erster Versuch scheiterte schon daran, dass diese Technik anscheinend die rechte Maustaste kaputt macht - so etwas kennt man ja üblicherweise nur von Javascript ;)
Leichter wäre es natürlich, wenn diese Technik irgendwo in Form eines Tutorials beschrieben wäre ;)
Hast du da was?

Freu mich schon auf eine Antwort.
fuzzy

Das kann ich hier nicht feststellen.
Was genau meinst Du bitte?

das ist eine frage von semantik, hat aber gar nix mit barrierefreiheit zu tun. bilder könnten genauso gut auch in einem div stecken...

Im Firefox schau ich mir mit einem Rechtsklick z.B. die Eigenschaften des Bildes an.
Wenn ich das hier versuche, dann "poppt" das grosse Bild kurz auf, und verschwindet wieder. Aber anstelle der Eigenschaften des Elements "Bild", also Größe usw., bekomme ich nur zu sehen: "Text Sprache deutsch"

Gruss fuzzy