dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Anlässlich der gestrigen 6 Fragen von Ralph Segert und meiner Antwort darauf stelle ich mir heute die Frage, wie man solche Frage-Antwort-Sequenzen geeignet in HTML formuliert.

Grundsätzlich handelt es sich bei einer explizit formulierten Frage und der unmittelbar darauf gegebenen Antwort ja um so etwas wie eine semantische Einheit: Die Antwort bezieht sich inhaltlich eindeutig auf die Frage. Um diesen Zusammenhang im Textfluss besser darzustellen, bietet sich eine entsprechend sichtbare Auszeichnung an.

Lösungen?

Meine Lösung, die mir sowohl semantisch sinnvoll als auch gut geeignet zur sichtbaren Auszeichnung erscheint, ist die Verwendung der HTML-Elementgruppe »Definitionsliste« <dl> (Definition List) mit ihren notwendigen Unterelementen <dt> (Definition Term) und <dd> (Definition Description).
(more…)

Björn Seibert befasst sich mit einem merkwürdigen Phänomen, welches in der Diskussion um standardkonformes und barrierefreies Webdesign mitunter zu beobachten ist. Man könnte es mit dem Begriff »Übergeneralisierung« (aus der Linguistik) umschreiben.

Der diskutierte Ansatz will völlig auf den Einsatz von »div«-Elementen verzichten, da sie keinerlei semantische Relevanz hätten und insofern dem Einsatz für Barrierearmut respektive Zugänglichkeit und Usability im Wege stünden.

Die Übergeneralisierung besteht nun einfach darin, einen Aspekt des Anspruches – die semantische Relevanz inhaltlich strukturierender Elemente eines HTML-Dokumentes – auf die gesamte Struktur eines solchen Dokumentes anzuwenden.

Das ist im Grunde aber völlig unangemessen, gerade auch unter Aspekten der Barrierearmut und Zugänglichkeit und Usability!

Denn »div«-Elemente dienen tatsächlich als »Bereichs-Container« der visuellen Struktur eines Dokuments, mithin der Präsentation (presentation) desselben und sind vorrangig zur Aufnahme gestalterischer Maßnahmen mit Hilfe von Cascading Stylesheets (CSS) vorgesehen.

Sie sind, auch wenn der Vergleich etwas holprig erscheint, durchaus mit den Einstellungsmitteln für die Seiteneinteilung bei gedruckten Dokumenten vergleichbar, wie z.B. der Festlegung der Spalteneinteilung, der Seitenränder, der Kopf- und Fußbereiche und anderes mehr.

Gerade die »div«-Elemente sind als vernünftige Errungenschaft in der Entwicklung (und den Standard-Definitionen) von HTML/CSS anzusehen, denn sie sind es, die verhindern sollen, dass semantische Elemente zur Erzeugung der inhaltlichen Struktur eines Dokuments zu präsentationalen Zwecken mißbraucht werden.

Es ist aber andererseits natürlich zu beachten, Komponenten der Darstellung und Gestaltung nicht überzustrapazieren und verschachtelte »DIV-Wüsten« zu erzeugen – und damit quasi auf dem standardkonformen Umweg in alte Unsitten der Art »Wer kann Layouttabellen am tiefsten verschachteln?« zurückzufallen.

Nein, keine Geschenke, nur hier am Layout. Nachdem mich der gesamte Kopfbereich meines Blögchens noch nicht so richtig befriedigte, habe ich wieder einmal leichte Bastelarbeiten vorgenommen.

Das Problem ist dabei grundsätzlich – und wahrscheinlich nicht nur für mich, dass ich im Kopfbereich sowohl das Logo als auch die Titel-Überschrift als »h1« unterbringen möchte. Die ursprüngliche Lösung, letztere rechtsseitig als Text auf die Hintergrundgrafik zu legen, erschien mir nie als wirklich gute Lösung. Denn falls ich dereinst auf die Idee komme, z.B. fotografischen Inhalt anstelle einer uni-farbigen Fläche …

Andere Möglichkeiten unter Nutzung einer von diversen Image-Replacement-Techniken ließ ich eben nach verschiedenen Versuchen fallen, da sie allesamt nicht wirklich problemfrei funktionierende Lösungen darstellen.

Darüber hinaus hätte ich auch schon gerne weiterhin das gesamte Sätzchen als Hauptüberschrift sichtbar, nicht nur das Logo.

Wie auch immer, jetzt gibt es für den Haupttitel eine eigene Textzeile und der Kopfbereich mit dem Logo (als komplette Hintergrundgrafik) ist wirklich nur noch grafisches Logo.

Eine gestalterisch voll befriedigende Lösung ist das jedoch nicht, also werde ich in nächster Zeit schauen, welche grafische Gesamtlösung mir für die drei Kopf-Elemente (Logo, Titel, Top-Navigation) einfällt.