Archiv der Kategorie: Allgemein

Barrierefreiheit für den Hausgebrauch: ein Inhaltsverzeichnis V.01

Wozu ein Inhaltsverzeichnis?

Aber ich darf doch mal bitten, ein ordentliches Kochbuch braucht ein Inhaltsverzeichnis, in dem alle Rezepte alphabetisch aufgelistet zu finden sind! Wo man fix etwas nachschlagen kann wenn man ein bestimmtes Rezept sucht, wie zum Beispiel Lasagne unter Buchstabe L. Oder wo man auch mehrere Rezepte unter einem Begriff wie K wie Kartoffel… -suppe, -knödel, usw.findet.

Das brauchte ich auch für mein Inselfisch-Kochbuch, und hab logo schnell mal was programmiert. Meine Rezepte sind natürlich als Beiträge abgelegt, also ein beherzter Griff in die Tabelle wp_posts, und alle mit dem post_type „post“ und davon natürlich nur die veröffentlichten Beiträge, also post_status „publish“ rausgeholt. Alphabetisch sortiert nach Titel, von A wie Apfelkücherl bis Z wie Zwetschgenknödel, das war jetzt echt nicht weiter schwierig.

Das SQL-Statement

Das war wie gesagt ganz simpel:

SELECT * from wp_posts where post_status = ‚publish‘ and post_type = ‚post‘ order by post_title

Schon alles, mehr brauchen wir nicht.

Die foreach-Schleife

Die Ausgabe geht dann wieder mit einer foreach-Schleife, die sah am Anfang einfach so aus:

foreach ( $alleposts as $einpost ) 
{ 
 
  $url = get_permalink($einpost->ID);
  echo "<a href='".$url."'>", $einpost->post_title, '</a></br>';
}

Das mit dem get_permalink hatten wir schon, das holt uns die komplette URL zur ID des aktuellen Datensatzes. Daraus hab ich mit dem <a href…> und dem Beitragstitel flugs den Link zum Rezept gebastelt, und fertig war mein alphabetisches Inhaltsverzeichnis! Ich benamste es in IVZ kompakt, machte ein Plugin draus und fand es ganz toll.

ivz_B

ivz_B

Tscha, und dann kamen die netten Herren von der Pfennigparade und fanden das IVZkompakt prinzipiell eine gute Idee, aber sie hatten einige Verbesserungsvorschläge. Stellen sie sich einfach vor, sie müßten sich eine unstrukturierte (wenn auch alphabetische) Liste von über 200 Rezepten am Stück vorlesen lassen, dann können sie sich denken daß das nicht im Sinne der Barrierefreiheit ist. Also mußte eine Untergliederung nach Buchstaben her, und entsprechend Zwischenüberschriften. Als „nice to have“ wurde noch gewünscht, zu jedem Buchstaben auch die Anzahl der vorhandenen Rezepte sehen zu können, damit man selbst entscheiden konnte ob man da jetzt durch alle durchgehen oder lieber zum nächsten Buchstaben springen wollte.

Der Wunsch der netten Jungs war mir Befehl, ich habe das IVZ komplett umgestrickt, aber dafür gibts einen neuen Beitrag.

 

Kommt auf den Wunschzettel: eine eigene Bildertabelle für WordPress

Der Attachment-Kuddelmuddel in der wp_posts

Wie wir gesehen haben, war es ein ganz schöner Aufwand, alle relevanten Informationen für die Ausgabe aller Bilder zusammenzutragen. Ich habe an anderer Stelle schon angemeckert, daß es aus aus Sicht eines alten Datenbankers nicht OK ist, so unterschiedliche Entitäten wie Posts und Attachments in der selben Tabelle, nämlich der wp_posts, zu verwalten. Ich laß jetzt mal die anderen Attachment-Typen (ZIP, Wav, Doc…) weg und werfe nur einen gezielten Blick auf die Bilder. Das ist auch semantisch sinnvoll, weil Bilder eine ganz spezielle Art von MIME-Types darstellen. Korrekterweise muß man sagen, daß wir hier von Inline-Bildern sprechen, die vom Browser im Dokument innerhalb des Textflusses direkt dargestellt werden. Externe Bilder wären dann die, die erst geladen werden wenn man auf einen Link oder ein Vorschaubild klickt, aber ich schweife ein bißchen ab. Wer mehr wissen will: ein interessanter Artikel zu dem Thema ist hier bei der Uni Passau zu finden.

Begnügen wir uns mit den ganz normalen Bildern auf Seiten und in Beiträgen, und ich geh mal lieber direkt ran an meine Wunschtabelle.

Die neue Bilder-Tabelle: ein Vorschlag

Wie könnte das jetzt aussehen, wenn man die Bilder aus der wp_posts auslagert und eine eigene Tabelle für sie anlegt? Ganz einfach so:

neue_bildertabelle

neue_bildertabelle

Feldliste der neuen Tabelle

Ich geh mal die Felder der Reihe nach durch:

  1. bild_id: AutoIncrement, die eindeutige Identifikationsnummer des Datensatzes.
  2. beitrag_ix: der Fremdschlüssel für die ID des zugehörigen Beitrags, das „ix“ steht für „id extern“
  3. bild_url: der vollständige Pfad zur Bilddatei
  4. bild_titel: selbsterklärend
  5. bild_beschriftung: selbsterklärend
  6. bild_alt_text: selbsterklärend
  7. bild_beschreibung: selbsterklärend

Wo sind denn all die anderen Felder geblieben?

Brauchen wir nicht mehr.

  • Der post_type attachment ist überflüssig, weil wir hier in der neuen Tabelle nur noch Attachments verwalten.
  • Der post_mime_type image/ ist überflüssig, weil wir nur noch Bilder verwalten.
  • Es ist sogar überflüssig, nach MIME-Type jpeg oder andere Bildformate zu unterscheiden, weil im img src-Tag auch png, gif, ico usw, zulässig sind, genaueres zu den zulässigen Bildtypen steht im Codex.
  • Der post_status ist überflüssig, aber der hat uns ohnehin für die Bildausgabe nicht die Bohne interessiert.
  • die Verknüpfung auf die wp_postmeta ist überflüssig, weil wir hier für den alt-Text das eigene Feld bild_alt_text haben

Alles klar soweit?

Das neue SQL Statement

Wie lautet also das neue SQL für die Ausgabe aller Bilder? Gehen wir mal davon aus, daß die Tabelle schlicht wp_bilder heissen soll. Dann schreibt sich das so:

Select * from wp_bilder;

Das wars.

Und das möchte ich jetzt erstmal etwas einwirken und sacken lassen.

Barrierefreiheit für den Hausgebrauch: Strukturierung

Ich stehe beim großen Thema Barrierefreiheit zugegeben erst am Anfang, da gibt es noch viel zu lernen. Aber ich hatte tatkräftige Hilfe von der Stiftung Pfennigparade, die erfahrenen Programmierer dort haben mir viele wertvolle Tipps gegeben, so daß ich mein Inselfisch-Kochbuch zumindest barrierearm und auch für Menschen mit Handicap gut zugänglich gestalten konnte. Das war für mich ein großer persönlicher Erfolg, und ich freue mich über stetig wachsende Besucherzahlen. Es war aber auch ein Haufen Arbeit, und ich möchte hier einige Tipps geben, die es anderen WordPress-Entwicklern und auch privaten Anwendern vielleicht leichter machen, barrierearme Webseiten zu erstellen.

Von Anfang an gut strukturieren: HTML Bascis

Die allermeiste Heidenarbeit war es, die Beiträge in meinem Kochbuch im nachhinein durchzustrukturieren und sinnvoll zu formatieren. Ich habe über 200 Rezepte manuell anfassen müssen, weil ich sie im Lauf der Jahre einfach so als Fließtexte erfasst hatte und keine vernünftige Dokumentstruktur drin hatte. Dabei ist es eigentlich ganz einfach: längere Textpassagen sind mit Zwischenüberschriften zu untergliedern, und diese sind in HTML ganz schlicht als h1, h2, h3… h6 auszuzeichnen. Wobei ich mehr als h3 noch nie gebraucht habe, für die meisten Zwecke reichen zwei Überschriften-Ebenen vollkommen aus. Der Fließtext dazwischen wird sinnvollerweise als Absatz (<p>) formatiert. Für Aufzählungen nimmt man ein <ul>, für nummerierte Listen ein <ol>. Reinstes HTML-Basic! All diese Strukturierungselemente stehen im visuellen Editor einwandfrei zur Verfügung, nur benutzen muß man sie auch!

Anwendungsbeispiel Kochrezept

Ich zeige zuerst einmal, wie man es nicht macht. Dieser Rezepttext wurde einfach so heruntergeschrieben und mag jedem einigermassen erfahrenen Hobbykoch etwas sagen, aber er ist grottenschlecht im Sinne der Barrierefreiheit weil gar nicht strukturiert. Das geht schon damit los, daß die eigentliche Überschrift mit im Fließtext klemmt und nur fett hervorgehoben wurde. Auch der Rest des Rezepts ist schlicht gar nicht strukturiert, das wird einfach so heruntergeplaudert und man kann schlecht erkennen, wo es jetzt um die Zutaten und wo es um die Zubereitung geht, und was da sonst noch stehen mag.

Das unstrukturierte Rezept


Curry-Bananen-Dip zum Fondue, oder auch zu Gegrilltem. Man braucht dafür eine richtig reife Banane, am Besten schon ein paar Tage vorher kaufen und reifen lassen, bis sie schön weich ist und cremig wird. Banane mit Limettensaft mit einer Gabel fein zermusen, Salz und soviel Currypulver darangeben daß es deutlich scharf, aber noch angenehm schmeckt. Sofort servieren, oder den Dip mit zusätzlich etwas Limettensaft beträufeln, er verfärbt sich sonst braun. Nach einem guten, würzigen aber nicht penetranten Currypulver muß man ein wenig suchen, die aus dem Supermarkt sind meistens nicht so überragend. Wenn man kein anderes kriegt, eher weniger Currypulver verwenden und die nötige Schärfe mit ein paar Tropfen Tabasco oder etwas Sambal Oelek herbeizaubern.


Da muß Struktur rein! Ein Kochrezept besteht ja bei mir meistens aus 4 Komponenten:

  1. einer Einleitung, in der ich ein paar nette Worte über Herkunft und Besonderheiten des Rezeptes erzähle,
  2. einer Zutatenliste,
  3. der eigentlichen Zubereitung
  4. und dann noch ein oder mehrere Tipps zum Rezept.

Ja dunnerlittchen, da sind mir vielleicht die Schuppen aus den Haaren gefallen, als mir der nette Herr Programmierer von der Pfennigparade erklärte, daß das als Strukturierung vollständig ausreichte, ich müßte es nur auch in HTML umsetzen!

Und das geht so: Zwischenüberschriften rein und mit Überschrift 2 formatieren, Überschrift 1 ist schon vergeben, die hat in WordPress der Beitragstitel. Zutaten und Zubereitung klar trennen, die Tipps einzeln ans Ende setzen. Das sieht dann so aus:

Das gut strukturierte Rezept:


Curry-Bananen-Dip

Einleitung

Zum Fondue, oder auch zu Gegrilltem. Man braucht dafür eine richtig reife Banane, am Besten schon ein paar Tage vorher kaufen und reifen lassen, bis sie schön weich ist und cremig wird.

Zutaten

1 reife Banane, Saft 1 Limette, wenig Salz, 1-2 Teel. gutes Currypulver.

Zubereitung

Banane mit dem Limettensaft mit einer Gabel fein zermusen, Salz und soviel Currypulver darangeben daß es deutlich scharf, aber noch angenehm schmeckt. Sofort servieren, oder den Dip mit zusätzlich etwas Limettensaft beträufeln, er verfärbt sich sonst braun.

Tipp:

Nach einem guten, würzigen aber nicht penetranten Currypulver muß man ein wenig suchen, die aus dem Supermarkt sind meistens nicht so überragend. Wenn man kein anderes kriegt, eher weniger Currypulver verwenden und die nötige Schärfe mit ein paar Tropfen Tabasco oder etwas Sambal Oelek herbeizaubern.


Fazit

Da staunste, was? Die Strukturierung im Sinne der Barrierefreieheit hat das Rezept wesentlich übersichtlicher gemacht und auch für „normale“ Besucher besser zu lesen. Das ist übrigens ein angenehmer Nebeneffekt bei der Gestaltung im Sinne der Accessibility, wie das auf neudeutsch heißt: es tut der Lesbarkeit und der Verständlichkeit der meisten Texte gut, wenn man auf eine saubere Strukturierung achtet.

Aber trotzdem, 200 Rezepte nachträglich strukturieren, das mach ich nicht nochmal, das war eine Mordsarbeit. Jetzt schau ich halt, daß ich die Rezepte gleich von Anfang an richtig strukturiere und formatiere, und gut ists.

Bilder: jetzt tragen wir mal alle Informationen zusammen

… oder wir versuchen es wenigstens. Das Gezeter mit dem nachträglich geänderten alt-Text lassen wir jetzt mal hinter uns, und gehen davon aus daß beim Bilder-hochladen die relevanten Informationen richtig eingegeben wurden, sonst wird das hier nix.

Wie ich im letzten Artikel schon angerissen habe, steckt ein Teil der Informationen zu in WordPress hochgeladenen Bildern in der Tabelle wp_posts, ein anderer Teil in der Tabelle wp_post_meta. Verknüpft werden die beiden Tabellen über die ID des Bild-Datensatzes aus der wp_posts, aber bevor ich darauf näher eingehe, noch ein kurzer Blick auf:

Bildinformationen in der Tabelle post_meta

In dieser Tabelle werden zu jedem hochgeladenen Bild drei (mindestens, es gibt Sonderfälle aber die lassen wir hier mal weg) Datensätze angelegt, die sich durch den jeweiligen meta_key identifizieren lassen. Hinter dem Metakey _wp_attached_file steckt der relative Pfad zur Bilddatei – relativ zum Pfad des Images-Verzeichnis der jeweilige WordPress-Installation. Unter _wp_attachment_image_alt findet man wie gesagt den Alternativtext, und dann gibt es noch _wp_attachment_metadata, da blicke ich ehrlich gesagt noch nicht so ganz durch was was bedeutet. Man erkennt jedenfalls die Informationen aus der JPEG-Datei (aperture, credit, camera, orientation etc.), und dann gibt es da noch Größenangaben für Thumbnails und Medium-Bilder, die müßten eigentlich dem entsprechen, was im Dashboard unter Einstellungen/Medien zu finden ist.

Aber das führt jetzt ein bißchen zu weit, wir nehmen nur den alt-Text mit und gehen zurück in die Tabelle wp_posts.

Bildinformationen in der Tabelle WP Posts

Jetzt gehen wir erst nochmal in die Mediathek zurück und schauen uns da an, was man zu einem neu hochgeladenen Bild alles eingeben kann. (Die Anhang-Seite ignorieren wir erstmal)

mediathek_felder

mediathek_felder

Wo findet man was in den Tabellen wieder?

  1. URL, die sollte man tunlichst in Ruhe lassen – im Feld guid
  2. Titel, der müßte eigentlich dem HTML-title entsprechen und wird mit dem Dateinamen (ohne Endung) des Bildes vorbelegt – im Feld post_title
  3. Beschriftung, das sollte die sein, die im Artikel unter dem Bild auftaucht – im Feld post_excerpt
  4. Alternativtext – ja gottseidank, den erkennen wir wenigstens wieder! Der steckt in der wp_postmeta im Feld meta_value
  5. Beschreibung, die wird, glaube ich irgendwo gelesen zu haben, abhängig vom Theme angezeigt oder auch nicht. Könnte etwas mit der caption beim figure-element zu tun haben, aber wie gesagt, das weiß ich nicht so genau. Jedenfalls im Feld post_content zu finden.

Ich hoffe, ich hab alles, denn jetzt gehts ans SQL, im nächsten Beitrag.

Noch ’ne Runde über Attachments, speziell Bilder

Ich hab ja eigentlich wieder ein bißchen Spaß auf der Datenbank versprochen, aber ich fürchte, jetzt wirds erstmal eher weniger lustig. Wir waren ja bei unseren Attachments vom Typ image/jpeg stehengeblieben, und haben schon gesehen, daß die in der wp_posts gespeichert werden. Jetzt gehts aber mal ein bißchen ans Eingemachte: welche Informationen zum Bild stehen wo und in welcher Tabelle?

Nur mal so zur Erinnerung: Bildattribute in HTML

Das absolute Minimum, was zum Einfügen eines Bildes gebraucht wird, sieht so aus:

<img src="bild01.jpg" alt = "Erstes Bild">

bild01.jpg ist die URL, die angibt auf welchem Pfad das Bild tatsächlich liegt, und alt ist der Alternativtext, der so wichtig für die Screenreader ist und auch angezeigt wird, wenn das Bild noch nicht vollständig geladen ist. Es gibt auch noch mehr Bildattribute, den Titel und Größenangaben usw., aber wir lassens hier mal gut sein, kann ja auch jeder selber googlen, hier bei Wiki zum Beispiel

Bildattribute in WordPress

Wenn man sich so einen Datensatz von einem JPEG-Attachment in der wp_posts im phpmyadmin mal näher anschaut, kommt man zuerst mal durcheinander. Da steht etwas(oder auch nichts) in post_title, etwas in post_content, und guxtu: bei post_excerpt und post_name kann auch noch was drinstehen. Was ist hier was? Wenigstens kann man klar und deutlich sehen, daß in guid die URL des Bildes drinsteht, das ist doch immerhin schon was. Aber ansonsten gibts hier Kraut und Rüben, und falls sie den Alternativtext vermissen sollten (so sie einen eingegeben haben), der ist hier nicht zu finden. Der steckt nämlich in einer anderen Tabelle, in der wp_postmeta hat er sich verschämt versteckt! Da gibt es doch tatsächlich  einen Datensatz mit einem Fremdschlüssel, der die ID unseres Bild-Datensatzes aus der wp_posts enthält. Da wo im Feld meta_key das Schlüsselwort _wp_attachment_image_alt steht, da steckt daneben im Feld meta_value der alt-Text. Gut, nicht?

Warum gibt es keine eigene Tabelle für Attachments?

Ja, Dunnerlittchen! Wieso hat man denn nicht für die Attachments eine eigene Tabelle angelegt, mit anständigen Feldnamen für alt-Text, Titel usw., mit einer einzigen sauberen Verknüpfung über die ID des Beitrags, zu dem die Bilder gehören? Stattdessen werden hier die eigentlich für Posts gedachten Felder post_title, post_content und post_excerpt hergewürgt, und das alt-Attribut ganz woanders versteckt. Da soll doch der …. Blitz dreinschlagen, um es mal ganz gemäßigt auszudrücken. Das kommt davon, wenn man Äpfel und Birnen (Posts und Attachments) in ein und dieselbe Tabelle stopft, obwohl es doch krass unterschiedliche Entitäten sind.

Wenn sie übrigens beim Bilder hochladen vergessen haben,  alt-Texte anzugeben, wird der jeweilige Dateiname dafür verwendet. Das ist gängige Praxis, aber nicht schön, weil der Screenreader dann eben -zig mal DSC01648 oder sowas vorliest, und das bringt natürlich überhaupt nichts.

Und wenn ich jetzt einfach alle alt-Texte korrigiere?

Gemach, gemach, so einfach ist das nicht. Wenn sie jetzt im visuellen Editor hingehen und das jeweilige Bild bearbeiten, können sie zwar einen neuen, besseren alt-Text eingeben, aber der wird mitnichten in der Datenbank im Feld meta_value gespeichert! Der landet nur im img-src-Tag im post_content, und die Datenbank kriegt nichts mit davon. Wenn sie das Pferd jetzt andersherum aufzäumen und in der Mediathek das richtige Bild raussuchen, hier auf Bearbeiten gehen und da einen neuen alt-Text eingeben, landet der zwar in der Tabelle wp_postmeta (beim Metakey _wp_attachment_image_alt) aber nicht im Beitrag. Man müßte erst das betreffende Bild aus dem Beitrag löschen und aus der Mediathek wieder neu hereinnehmen, dann dürfte wieder das Datenbankfeld für den alt-Text herangezogen werden.

Hab ich sie jetzt komplett durcheinandergebracht? Jetzt wissen sie warum ich mir für WordPress eine „saubere“ separate Attachment-Tabelle wünsche!

Hab ich doch glatt vergessen: Tach auch, ich bin dein Präfix!

Ich bin von wohlmeinenden Kritikern darauf hingewiesen worden, daß ein Statement wie :

SELECT * from wp_posts

ein bißchen nach Schlamperei riecht. Schließlich kann man bei der WordPress-Installation ein x-beliebiges Datenbankpräfix angeben, und dann heißt die Tabelle eben nicht wp_posts, sondern womöglich 783287xyzposts, und mein SQL fällt auf die Nase.

Was ist ein Datenbankpräfix?

Das stammt noch aus den Zeiten, als MySQL Datenbanken beim Provider rar und teuer waren, und man notgedrungen mehrere WordPress-Installationen in eine einzige MySQL-Datenbank stecken mußte. Das Datenbankpräfix muß innerhalb einer Datenbank eindeutig sein, denn es dient dazu dem System mitzuteilen, welche Tabellen zu welchem Blog gehören. Das hat früher oft ganz schön Verwirrung gestiftet und machte auch das Datenbank-Backup eines Blogs nicht gerade übersichtlicher. Aber ich denke, heutzutage wo bei jedem Webspace zwanzig und mehr MySQL-Datenbanken dabei sind, ist das kein Thema mehr. Ich bevorzuge es, für jeden Blog eine eigene Datenbank zu nehmen (Pscht, das mit dem Multisite-Blog habe ich jetzt nicht gehört!) und als Präfix den Default wp_ zu belassen.

Wenn man jetzt Code schreiben möchte, der auf jeder normalen WordPress-Installation läuft, muß man natürlich den richtigen und kompletten Tabellennamen, der sich immer aus dem Prefix und dem WordPress-Basistabellenamen zusammensetzt, angeben. Dafür gibt es die Systemvariable prefix. Im Code sieht das dann korrekt so aus:

SELECT * from $wpdb->prefix.posts

Ich bleibe aber trotzdem bei meiner vereinfachten Schreibweise mit dem wp_posts, weil ich finde daß es leichter zu lesen ist, und für mich weniger Arbeit zum Tippen 😉

Fußnote

Ich habe schon oft gelesen, daß es aus Sicherheitsgründen dringend anzuraten ist, ein möglichst kryptisches Datenbankpräfix zu wählen, von wegen Hackerangriffe und so. Weiß ich nicht was ich davon halten soll, schließlich kann der böse Hacker den Dreh mit dem $wpdb->prefix auch kennen, und damit ist es nix mit dem Schutz. Aber das nur mal so als Nachgedanke..

Mea culpa: warum dieser Blog alles andere als barrierefrei ist

Barrierefreiheit im Internet ist ein Thema, das mich in letzter Zeit sehr viel beschäftigt hat. Ich bin durch die Initiative „Bayern barrierefrei“ des Freistaats auf das Thema aufmerksam geworden, und halte es für immens wichtig. Auch Menschen mit Handicap haben ein Grundrecht auf Informationsfreiheit! Da ist Umdenken nötig, denn die meisten Webdesigner vergessen vor lauter SEO-Zirkus und Multimedia-Geblinker, daß es auch Benutzer gibt, die z.B. auf einen Screenreader oder eine Braillezeile angeweisen sind.

Mein Pilotprojekt

Ich habe in den letzten Monaten als Pilotprojekt mein Inselfisch-Kochbuch barrierearm gestaltet, und ich kann ihnen sagen: es war eine Heidenarbeit! Wenn ich dabei nicht so tatkräftige Unterstützung von der Stiftung Pfennigparade bekommen hätte, ich hätt’s aufgeben müssen. Dabei ist das mit der Barrierefreiheit, genauer gesagt: mit der Barrierearmut  eigentlich gar nicht so schwer zu realisieren, es gibt einige nicht schwer zu begreifende Grundregeln. Wenn man die von Anfang an beachtet und z.B. seine Beiträge vernünftig durchformatiert und anständig gliedert, und auf aussagekräftige Alt-Texte bei den Bildern achtet, ist schon viel gewonnen. Wenn man das  im Nachhinein korrigieren will, dann artet es in Arbeit aus. Ich habe über 200 Rezepte und -zig Bilder manuell durchgeforstet und überarbeitet. Es gibt  leider keine Plugins, die einem die logische Gliederung von Texten abnehmen könnten, und wird sie wohl auch nie geben, da muß man schon selber ran. Ich versuche mir jetzt anzugewöhnen, von Anfang an strukturiert zu schreiben, weil ich die Ochsentour mit der manuellen Überarbeitung nicht nochmal durchziehen möchte, einmal hat gereicht.

Böse Sünde: Codeschnipsel als Screenshots

Das geht natürlich im Sinne der Barrierefreiheit überhaupt nicht. Screenshots sind ja auch nur Bilder, wenn da was zu Lesen steht, damit kann kein Screenreader etwas anfangen! Ich habe  in diesem Artikel schon mal kurz darüber gemault, daß es einem WordPress so gnadenlos schwer macht, Programmcode vernünftig in einem Artikel darzustellen. Ich habe jetzt die Screenshots als Notlösung genommen, bin aber noch auf der Suche nach einer besseren Lösung. Vielleicht wäre es hilfreich, den relevanten Programmcode zu einem Artikel als Textdatei mit dranzuhängen, das wär schon mal besser als nix. Ich denke da an die vielen IT-Bücher, wo man die Codebeispiele  als CD mitgeliefert bekommt… mhm, könnte gehen, wenn ich es mir recht überlege. Ich werde mal mit meinem Kontakt bei der Stiftung Pfennigparade darüber sprechen, da muß es einen vernünftigen Kompromiss geben, so daß ich ungehindert flüssig schreiben kann und trotzdem eine nach Möglichkeit barrierearme Seite dabei herauskommt.

Nachtrag:  Habe nachgeforscht, leider scheint es wirklich keine andere Möglichkeit zu geben, als den visuellen Editor NICHT zu benutzen. Keine schöne Lösung… na ja, vielleicht finde ich noch ein Plugin, das den Programmcode nicht verhackstückt. Die Hoffnung stirbt zuletzt 😉

Und was hat das alles mit WordPress zu tun?

Mehr als sie denken. Letztendlich ist ja WordPress unser Werkzeug der Wahl zum Erstellen von Webseiten, und dazu gehört ein bißchen mehr als nur schicke Layouts und tolle Animationseffekte. Ausserdem verführt WordPress beim Hochladen von Bildern zur Schlamperei bei der Beschriftung. Von älteren Webdesignern (z.B. der gute alte NVU) wurde man noch gezwungen, beim Bilder einfügen zumindest einen Alt-Text einzugeben. Bei WordPress kann man da locker drüberklicken, die meisten Leute tun es auch weil ihnen nicht klar ist was ein „Alternativtext“ ist und wozu der gut sein soll.

Jetzt noch die gute Nachricht: es ist gar nicht so schwer, mit WordPress barrierearme Webseiten zu gestalten, wenn man es von Anfang an richtig macht. Die meisten modernen Themes sind gut strukturiert und mit <h1>, <h2>, <li> usw. sauber durchgegliedert, und sie sind auch mit der Tastatur bedienbar. Es gibt sogar spezielle Themes, die von Anfang an auf Barrierefreiheit zugeschnitten sind, aber da muß ich noch ein bißchen forschen, dann erzähle ich mehr darüber, ein andermal. Es wird wieder Zeit für ein bißchen Spaß auf der Datenbank!

 

 

 

Kleiner Exkurs über Attachments

Was genau ist ein Attachment?

Wie ich schon mal kurz angesprochen habe, werden in der Tabelle wp_posts nicht nur die Beiträge und Seiten verwaltet, sondern auch noch andere Objekte, zum Beispiel hochgeladene Bilder. Das ist aber noch lange nicht alles, man kann ja auch ZIP-Dateien hochladen, oder PDFs, oder Word-Dokumente oder oder oder…. Alle diese Dateitypen werden unter dem Begriff „Attachments“ zusammengefaßt, zu deutsch „Anhänge“. Eine komplette Liste der gestatteten Dateitypen gibt natürlich der Codex her, das kann man sich hier in diesem Artikel genauer zu Gemüte führen. Die genaue Spezifikation der hochgeladenen Dateien steckt in der wp_posts im Feld post_mime_type. Was ein MIME Type oder auch Internet Media Type genau ist, kann man hier bei Wiki sehr schön nachlesen. Ich sag mal sehr vereinfachend: MIME Types sind die Dateitypen, die im Internet hin und hergeschickt werden können, und von denen ihr Browser und ihr E-Mail-Programm wissen, was sie damit anfangen sollen.

Die gängigsten Bild-Typen

Uns reicht mal fürs erste, die in WordPress gängigsten MIME Types anzuschauen, und das dürften mit großem Abstand vor allen anderen JPEG-Bilder sein, in den allermeisten Fällen Fotos aus der Digicam. Eher seltener kommen noch PNG-Dateien vor, und ganz vereinzelt schwirren auch noch ein paar animierte GIFs durch die Gegend. Im Feld post_mime-type steht bei Bildern immer ein image/xyz, wobei xyz der Bildtyp ist. Bei unseren JPEGs heißt es dann ganz logisch image/jpeg. Wir können also anhand des Post Types „attachment“ und anhand des MIME Types „image/jpeg“ gezielt alle JPEG-Bilder in unserem kleinen PHP Skript herausfischen, und das werden wir jetzt auch machen. Falls sie auch noch andere Bildtypen hochgeladen haben sollten, fischen sie mit „image%“, dann haben sie alle Bilder, nicht nur die JPEGs. Wir können uns natürlich auch alle vorhandenen Bilder in der Mediathek anschauen, aber wo bleibt da der sportliche Ehrgeiz? 🙂 Aber das hat jetzt mit Attachments im Allgemeinen nicht mehr viel zu tun, deswegen gibts dafür einen neuen Beitrag. Aber erst muß ich noch was loswerden, deswegen gibt es jetzt noch einen Exkurs im Exkurs:

Über Bildformate

Ich meine jetzt nicht Dateiformate, sondern physikalische Formate, die man normalerweise in cm x cm mißt. Bei Fotos sind das schlicht Hoch- und Querformate, je nachdem wie herum sie die Kamera beim Knipsen gehalten haben. Bei gemalten Bildern kommt es noch viel entscheidender auf das Format der Leinwand oder des Blocks an, ich kenn mich da aus, ich bin Malerin. Das gewählte Format bestimmt die Bildkomposition, und niemand käme auf die Idee, ein hoch- oder querformatiges Gemälde quadratisch zuzuschneiden, nur damit es in einen quadratischen Rahmen paßt. WordPress ist da nicht so pingelig. Ich hab erst gedacht, das mit den Gallerys wäre eine tolle Sache für die Bildpräsentation auf meinen Malerei-Seiten, aber Pfiffkas! Die Bilder werden gnadenlos zu kleinen Quadraten verstümmelt, mit eher zufälligen Bildausschnitten. Das ist auch in der Mediathek etwas was mich sehr stört. Ich zeig ihnen mal was ich meine. In einer Gallery oder eben in der Mediathek sieht mein kleines Bild vom  Drachenmädchen Nellie mit der Erdbeertorte so aus:

beeren-sahne-torte-150x150

beeren-sahne-torte-150×150

Da fehlt der ganze Witz an der Sache! Hier zum Vergleich das unbeschnittene Bild:

beeren-sahne-torte

beeren-sahne-torte

Verstehen sie jetzt, was ich meine und warum ich ungehalten bin? Logisch lassen sich Quadrate bei einer HTML-Ausgabe viel einfacher anordnen als gemischte hoch- und querformatige Bilder, aber für meine Aquarelle war das echt der optische Tod, dafür sind die Gallerys völlig unbrauchbar. Für Fotos finde ich die Zwangsquadratur auch nicht optimal, da könnte sich mal jemand etwas besseres einfallen lassen. So, das mußte ich mal loswerden. Später gehts weiter mit ein bißchen Spaß auf der Datenbank!

 

 

 

Beitragsbild oder Bild zum Beitrag?

Bilder sind die Seele eines echten Blogs!

Wir lieben Bilder, je mehr je schöner, sie geben unseren Seiten Leben und den persönlichen Touch. Jetzt wärs halt schön, wenn wir zu unserer selbst erstellten Beitragsliste auch Bilder mit drin hätten! Aber da ist Lady WordPress ein bißchen zickig und macht es uns nicht ganz so leicht.

Was genau sind Beitragsbilder?

Es gibt Bilder, die in einen Beitrag ganz normal eingefügt werden, und es gibt sogenannte „Featured Images“, die bei der Erstellung eines neuen Beitrags angegeben werden können. Es herrscht ehrlich gesagt seit der Einführung der Beitragsbilder oder „Featured Images“ oder auch „Thumbnails“ in WordPress eine leicht babylonische Begriffsverwirrung, was denn nun was ist. Geht schon mal damit los, daß es gar nicht gesagt ist daß ihr Theme Beitragsbilder auch unterstützt, ältere Themes tun das nämlich durchaus nicht immer.  Aber da haben sich schon andere Leute Gedanken darüber gemacht, ich schicke sie mal wieder zu den kompetenten Kollegen vom Elbnetz zum Beitrag:
Wie man Beitragsbider in WordPress richtig nutzt

Da steht echt alles drin, was sie wissen müssen. Und wenn sie den Unterschied zwischen Beitragsbildern und „gewöhnlichen“ zu Beiträgen hochgeladenen Bildern halbwegs verstanden haben, gehts weiter.

Damit wir das jetzt auch programmiertechnisch nutzen können, legen sie bitte zu zumindest zu einigen ihrer Blogbeiträge Beitragsbilder an, wenigstens ein Handvoll, damit wir was zum Ausgeben haben. Dieses Feature versteckt sich ein bißchen im Beitragseditor, ganz nach unten scrollen und rechts gucken. Da gibt es die Option „Beitragsbild festlegen“. Bild auswählen, hochladen und gut ists. Das machen sie jetzt ein paar Mal, und im nächsten Beitrag gibt es dann eine Ausgabe mit Bildern, versprochen! 🙂

Anmerkung:

Das in dem Elbnetz-Beitrag erwähnte Plugin „Autoset Featured Image“ ist leider erstens seit 2 Jahren nicht upgedated worden und zieht zweitens leider nur bei der Erstellung neuer Beiträge, kein Autoset für bereits veröffentlichte Beiträge! Also ist Handarbeit angesagt. Wenn jemand eine schlauere Lösung hat, bitte her damit!

HTML Tabelle mit Tablesorter reloaded

Ich gelobte Besserung. Ich schieb hier nochmal nach, wie unsere HTML-Tabelle aussehen muß, nämlich mit thead und tbody Tags, damit sie vom Table Sorter Plugin auch sortiert wird.

alle_posts_mit_perm_und_tablesorter

alle_posts_mit_perm_und_tablesorter

Das ist jetzt mal ein Screenshot aus dem Notepad++, meinem Lieblings-Editor für alle Zwecke. Ich denke, man kanns lesen… und da seh ich prompt schon einen Fehler, bei dem schließenden thead Tag fehlt der / (Schrägstrich). Tablesorter hats trotzdem gesorted, ich lass das jetzt mal so stehen.

Der Knackpunkt ist hier wie gesagt die Zuweisung:

echo „<table id=’meineTabelle‘ class=’tablesorter‘>“;

Damit weiß der Tablesorter, daß jetzt Action angesagt ist, und er auf diese Tabelle losgehen soll. Mehr ist nicht dabei. Wie schon gesagt, der Tablesorter bietet noch wesentlich mehr Möglichkeiten, aber da darf sich jeder selber einlesen, Doku gibts bei Tante Google.