Ein Beispiel ist Hacker News. Text ist dort klein und grau auf grau – und dadurch schon bei geringer Unschärfe unlesbar:

Bei unterschiedlichem Kontrast können Inhalte sogar als Dekoration missverstanden werden. Auf Stop! Talking. übersah ich die Seitenleiste – bis foxitalic sie mir zeigte:

Ist mangelnder Kontrast Absicht, erfolgt die Benachteiligung Nicht-Normalsichtiger bewusst. Ich halte es für falsch, Leute mit körperlichen Beeinträchtigungen von Inhalten auszuschließen, um körperlich Privilegierten ansprechendes Design zu bieten.

Entwickler und Betreiber von Webseiten sollten Richtlinien für barrierefreie Webinhalte folgen, in denen minimaler Kontrast vorgeschrieben ist. Dabei helfen können die Webanwendung AChecker (Quellcode) und die Firefox-Erweiterung WCAG Contrast checker (Bildschirmfoto).

Im Zweifel gilt: Normale Schriftgröße, schwarz auf weiß.

Dabei geht es optisch durchaus besser: heise online etwa umklammert Textänderungen und stellt längeren Hinzufügungen die Anmerkung „Update:“ voran – bei mehreren Überarbeitungen sogar durchnummeriert. Ein Beispiel hierfür ist die Berichterstattung zum datenschutzschonendenfreundlichen Facebook-Button.

Heise online erledigt dies serverseitig und gibt entsprechend verändertes HTML zurück. Machbar ist die Dekoration jedoch auch ohne zusätzliche Programmlogik — unter Nutzung der CSS-Pseudo-Elemente ::before und ::after sowie des content-Attributs. Mit diesen ist es nämlich möglich, dem Seitenlayout vollkommen neue Elemente hinzuzufügen.

Befinden sich etwa innerhalb eines <article>-Elements mehrere Absätze (<p>), fügt die CSS-Anweisung article > ins > p:first-child::before { content: "Nachtrag: " } vor dem ersten Absatz jeder eingefügten Textstelle einen entsprechender Hinweis ein. Auf ähnliche Weise lassen sich Änderungen innerhalb von Absätzen und mehrere Absätze umfassende Einfügungen mit (halben) eckige Klammern umgeben.

Die noch fehlende Nummerierung der Änderungen erfolgt mit CSS-Zählern; Peter Kröner hat das schon einmal erklärt. Am Ende steht eine wesentlich hübscheres und nützlicheres Dekoration für Änderungen in HTML-Dokumenten.

Hier ist die Demo.

Ebenfalls interessant ist diese Javascript-Technik zum dynamischen Anzeigen von Textänderungen.

Im Jahr 2011 gründet IT-Sicherheitsexperte Felix von Leitner, genannt Fefe, das Blog Fefesbook, nachdem er sich erfolglos an einigen anderen Internetprojekten versucht hatte. Fefesbook (dt. Fefes Buch) ist eine Website zum Erstellen und Verbreiten von Rants und Verschwörungstheorien. Die Plattform ist im April 2011 erstmals zugänglich und wurde nach eigenen Angaben in C gehackt, mit dietlibc, libowfat, unter gatling laufend und mit einem tinyldap-Backend.

J.K. Rowling schreibt sieben Bücher darueber, Stephen Spielberg verfilmt die Story schließlich. Prognostiziertes IMDb-Rating: 9.3/10

• Der zu dekorierende Text wird mittels generiertem Inhalt in einem Pseudo-Element dupliziert. Einfacher und semantisch sauberer wäre die Verwendung des CSS3-Attributes text-shadow.
• Die Glyphen sind nicht nur horizontal, sondern auch vertikal gegeneinander versetzt — man müsste den Kopf also stets schräg halten, um den gewünschten Effekt zu erzielen.
• Die verwendeten Farben sind Rot und Blau. Für Anaglyphendarstellungen werden heutzutage aber Rot und Cyan verwendet.

Nachdem fish mir eine Anaglyphenbrille überließ, habe ich mich heute morgen daran gemacht, ein eigenes stylesheet ohne diese Missstände zu erstellen. Umgesetzt habe ich das Ganze natürlich für unseren Lieblings-CSS-Sandkasten (screenshot) …

Um den 3D-Effekt zu verstärken, wird der :hover-Status mittels CSS Transitions animiert; in aktuellen WebKit- und Gecko-Browsern (Chrome, Safari, Firefox ab Version 4.0) sollten diese problemlos funktionieren. Der Quellcode findet sich auf GitHub.

Der neue Button Nils Dagsson Moskopp CC-BY

Das Plugin fügt in der HTML-Editoransicht einen Button mit der Aufschrift „CC Figure“ hinzu. Klickt man auf diesen, öffnet sich ein neues Fenster bzw. Tab, in das man die Metadaten (z.B. Titel, Alternativtext, Autor) einer Bild-, Audio-, oder Video-Datei einträgt. Hat man alle Felder ausgefüllt, kann das Markup eingefügt werden; so einfach ist das.

So einfach ist das. Nils Dagsson Moskopp CC-BY

Das so generierte (X)HTML kann natürlich per CSS dekoriert werden — mitgeliefert sind drei verschiedene Stylesheets. Auf eines bin ich besonders stolz; es formatiert die Lizenznotizen im Stil des Blogs Spreeblick. Zudem lässt sich im Admin-Interface (Screenshot) der verwendete Metadaten-Standard umstellen — zur Auswahl stehen Microdata-Markup und RDFa.

Mein Dank geht an folgende Personen (gelistet in der zeitlichen Reihenfolge, in der sie zum Gelingen beitrugen):

• Matthias wetterfrosch Mehldau für einen Blogpost zum Thema „Markup für Creative-Commons-Inhalte“
• Julia zeitrafferin Seeliger für einen verwandten Artikel nach dem Motto „man könnte doch mal“, das inspirierende Moment für mich.
• Johnny Häusler für einen Screenshot des Spreeblick-Plugin-Interfaces
• Ian Hickson, ohne den es das Microdata-Markup wohl nicht gäbe
• Michelle Thorne für das Vermitteln eines Metadaten-Experten
• Nathan Yergler, ebenjenen. Ich habe nicht auf seinen Rat gehört.

Ja, ich weiß, dass die ausschließliche Nutzung der deutschen Sprache nicht besonders förderlich für die Reichweite dieses Plugins ist. Ich hatte nunmal weder Zeit noch Lust, es zu übersetzen. Aber wenn jemand möchte … nur zu ! Und was die konfuse Qualität des Codes angeht: Er funktioniert soweit.

Wer darauf nicht warten will, klicke bitte hier.

(USER WURDE FÜR DIESEN POST GEBANNT.)

Die hier vorgestellte Vorgehensweise ist aufgrund von Änderungen an der HTML5-Spezifikation nicht mehr aktuell; u.A. wurde <legend> als Kindelement von <figure> entfernt und die Mikrodatasyntax geändert. Bevor ihr also Ähnliches versucht, schaut auch die aktuellen Abschnitte zu den entsprechenden Markup-Techniken an.

In den letzten Tagen bastelte ich eine verbesserte Version des CC-HTML-5-Markup-Generators. Kurz gesagt handelt es sich hier um ein Webanwendung, die das Präsentieren von CC-Inhalten vereinfacht. Hierzu wird aus Eingaben etwa zu Urheber und Lizenz passendes (X)HTML generiert. Dieses kann dann einfach auf einer Webseite, etwa dem eigenen Blog eingefügt und mit ein bisschen CSS ansprechend präsentiert werden; ein Beispiel findet sich im vorigen Blogeintrag.

Nachdem der zugehörige URL bereits in der schnelllebigen Twitterwelt verbreitet wird, halte ich es für eine gute Idee, das Markup zu erklären. Denn während einige der verwendeten Elemente und Attribute sicherlich bekannt sind, stellt der Kern des Konstrukts ein Novum dar und wird erst durch die neuen Features von (X)HTML 5 ermöglicht. Zukunftsmusik ist es damit allerdings nicht: Das Markup wird in allen einigermaßen aktuellen Browsern korrekt geparst.

Wer sich für die technischen Details nicht interessiert, kann an dieser Stelle aufhören zu lesen und sich sofort passendes Markup generieren lassen. Für alle anderen geht es gleich weiter, direkt nach dem Klick.

Fangen wird mit dem Offensichtlichen an: Das generierte (X)HTML-Fragment besteht aus einem <figure>-Element, welches als Kindelemente multimedialen Inhalt — Bild, Ton oder Video — und ein <legend>-Element enthält. <figure> ist ein mit HTML 5 neu eingeführtes Element zum Gruppieren von Inhalten, die die mit <legend> beschriftet werden. Hierbei ist es egal, ob die Beschriftung an erster oder letzter Stelle steht; genauer erklärt ist das Ganze natürlich in der Spezifikation.

Was innerhalb des <legend>-Elements statt findet, sieht zunächst reichlich konventionell aus: Kindelemente sind ein <span>, ein Link und ein <small>, die jeweils Titel, Autor, und Lizenzinformationen zum mit <legend> beschrifteten Werk angeben; in Letzterem wird der Name der Lizenz angeben und auf diese verlinkt. Wichtig und neu sind hier vor allem zwei Punkte: Einmal die Verwendung von <small>, das laut Spezifikation für rechtliche Informationen verwendet werden sollte, zweitens die Nutzung der Microdata-Annotationsmöglichkeiten von HTML 5, welche es einem Parser ermöglichen, die Semantik der präsentierten Informationen aufzuschlüsseln — die Vorteile maschinenlesbaren Markups müssen wohl kaum mehr erläutert werden in einer Welt, in der man bei Flickr, Google und Yahoo nach CC-lizenzierten Bildern suchen kann.

Abstrakt betrachtet funktionieren Microdata-Annotationen ähnlich wie das von Creative Commons genutzte RDFa: Objekten können maschinenlesbare Name-Wert-Paare zugewiesen werden, etwa „Dieses Bild hat den Titel ‚Sauerkraut‘.“. HTML5 stellt hierzu die beiden Attribute item und itemprop und ein vordefiniertes Vokabular für Urheber- und Lizenzinformationen bereit. Das beschriebene Objekt ist hier das mit itemprop="about" gekennzeichnete erste Kindelement der eingangs beschriebenen <figure>-Gruppierung, die ihrerseits mit item="work" die Kategorie der Metadaten konkretisiert.

Dass das so generierte Markup sich auf verschiedene Weisen dekorieren lässt, ist einfach zu zeigen: Der Wetter-Stil (Stylesheet) demonstriert, wie anhand der verlinkten Lizenz unterschiedliche Icons präsentiert werden können. Einfacher gehalten ist der Spreeblick-Stil (Stylesheet), der in der unteren linken Bildecke ein simples CC-Icon darstellt, bei dessen Überfahren mit der Maus der Urheber des Werkes angezeigt wird.

CC-Bildunterschrift nach einer Idee von Matthias „Wetter“ Mehldau

CC-Notiz wie auf Spreeblick.com

Apropos Spreeblick — deren Markup sieht im direkten Vergleich eher arm aus: Nicht nur, dass vor Allem generische Elemente wie <div> und <span> verwendet werden — CSS wird hier genutzt, um Inhalte zu präsentieren. Und während ersteres durch die mangelnden Möglichkeiten von HTML 4 bedingt und somit verzeihlich ist, zeigt letzteres, dass der verantwortliche Webfrickler die Philosophie hinter der HTML und CSS zu Grunde liegenden Trennung von Inhalt und Präsentation ganz offensichtlich kaum verstanden hat. Schade eigentlich, semantisch ist derartiges Markup so nämlich garantiert nicht.

Dieser Artikel ist obsolet. Neue und bessere Informationen gibt es in einem aktuelleren Beitrag auf diesem Blog.

Basierend auf der bereits erwähnten Anregung von wetter, einer Mail auf der WHATWG-Mailingliste und einigen Stunden Arbeit, präsentiert Die Welt ist gar nicht so, Deutschlands flauschigstes Weblog, nun eine Möglichkeit, einzelne Inhalte auf Webseiten mit Creative-Commons-Lizenzen auszuzeichnen. Und das funktioniert so:

In HTML5 / XHTML5 ist eine Kombination der Elemente <figure> und <legend> vorgesehen, um Inhalten eine Beschriftung zuzuordnen. Zudem ist die Semantik des <small>-Elementes derart umdefiniert worden, dass es guten Gewissens für Urheberrechtshinweise genutzt werden kann. Das daraus abgeleitete Gerüst zur Anheftung einer Creative-Commons-Lizenz an bestimmte Inhalte (hier: ein Bild) hat also in etwa folgende Struktur:

<figure> <img src="http://images.example.org/lavalampe.png"> <legend> <span class="title"> Shaky und seine Lavalampe </span> <a href="http://example.org/quelle"> Bernd Lieferts </a> <small> <a href="http://creativecommons.org/licenses/by/3.0/de/"> <abbr title="Creative Commons Namensnennung"> CC-BY </abbr> </a> </small> </legend> </figure>

Mit ein bisschen CSS sieht das Ganze eigentlich ganz nett aus (Beweis). Alle, die zu faul zum selber Tippen sind, können sich per Javascript entsprechendes Markup generieren lassen — wobei sie natürlich entsprechende Stylesheets in der Hinterhand halten sollten (schaut doch einfach mal, wie Max Winde das bei Spreeblick gelöst hat).

Doch obwohl aktuelle Blog- bzw. Content-Management-Systeme das Einfügen entsprechender Tags recht einfach machen, scheint sich zumindest in Bezug auf das <ins>-Element ein anderer präsentationaler Ansatz etabliert zu haben. Oft werden Updates nämlich einfach in einem neuen Absatz eingefügt, der mit entsprechendem, oft fett formatierten, Präfix präsentiert vorkommt. (Beispiele: Heise, Netzpolitik, Spreeblick).

Ich vermute, dass dieses unsemantische Markup hauptsächlich verwendet wird, um Änderungen deutlicher kenntlich zu machen – ganz nebenbei bemerkt sehen unterstrichene Absätze auch nicht gerade gut aus. Es liegt also nahe, zu versuchen, beide Lösungen mittels CSS zu vereinen.

Wichtig ist hierbei die, Sonderstellung der beiden Elemente <del> und <ins> zu beachten: Kommen diese innerhalb von Block-Elementen vor, fungieren sie als Inline-Elemente, andererseits können sie als Block-Elemente selber Block-Elemente enthalten. Inline-Änderungsmarkierungen bestehen meistens nur aus wenigen Wörtern, deswegen kann bei ihnen auf eine prominente Auszeichnung verzichtet werden.

Zunächst entledigt man sich also des Standard-Stils für das <ins>-Element, um ihn gleich danach für Elemente, die innerhalb eines Absatzes vorkommen, wieder einzuführen: ins {text-decoration:none;} p ins {text-decoration:underline;}

Nun erhält das erste (Selektor :first-child) unmittelbare (Selektor >) Kindelement eines <ins>-Elements das Update-Präfix. Für inline (d.h. innerhalb eines Absatzes) vorkommende Elemente wird diese Regel dann aufgehoben: ins > :first-child:before {content:"Update: ";font-weight:bold;} p ins > :first-child:before {content:none;}

Die hier vorgestellte, semantisch saubere Lösung setze ich übrigens auch auf diesem Blog ein. Verbesserungsvorschläge in den Kommentaren sind natürlich immer erwünscht.

Die Opera University Tour wird in den nächsten Tagen noch in München, Lübeck und Hannover Halt machen; ich kann jedem am Web Interessierten empfehlen, die Chance zu nutzen. Seid ihr jedoch in einer anderen Stadt oder habt keine Zeit, ist das auch nicht schlimm – der mitreisende Praktikant versicherte mir nämlich, dass eine Videoaufnahme des Vortrags bald auf dem zugehörigen Blog erscheinen würde.