Diese Woche habe ich mich überwiegend mit Tabellen befasst, und wie man sie so gestaltet, dass sie barrierefrei sind.

Bei allem was man auf einer Website darstellt, sollte man daran denken, dass es auch Menschen mit körperlicher und/ oder geistiger Behinderung gibt, die sich mit bestimmten Hilfsmitteln eigenständig im Netz bewegen. Hierzu zählen z.B. Blinde Menschen bzw. Menschen mit eingeschränktem Sehvermögen. Diese Menschen benutzen als Hilfsmittel z.B. einen Screenreader.

Auch eine Tabelle hat eine semantische Struktur. Normalerweise gliedert sie sich in den Tabellenkopf <thead></thead>, den Tabellenrumpf <tbody></tbody> und den Tabellenfuß <tfoot></tfoot>. Der Tabellenkopf enthält die jeweiligen Spaltenüberschriften, im Tabellenrumpf befinden sich die inhaltlichen Daten und im Tabellenfuß kann man zum Beispiel Fußnoten platzieren.

Jeder der drei Abschnitte ist wiederum in unterschiedlich viele Zeilen unterteilt, die mit <tr></tr> eingeschlossen sind und meistens genau so viele Zellen <td></td> enthalten, wie es Spalten gibt. Bei weniger komplexen Tabellen wird die Gliederung in Tabellenkopf, Tabellenrumpf und Tabellenfuß weggelassen. Dann gelten alle Zeilen als Tabellenrumpf. Außerdem sollte der Tabelle eine sinnvolle Überschrift vorangestellt werden.

Für Benutzer, die sich den Inhalt einer Website mithilfe eines Screenreaders vorlesen lassen, sind aber noch weitere Informationen wichtig.

Die <table summary=““ > sollte eine längere Beschreibung des Tabelleninhaltes enthalten, damit der Benutzer weiß, welche Daten die Tabelle enthält, und somit direkt entscheiden kann, ob diese Daten für ihn wichtig sind. So braucht er sich nicht erst die Tabellendaten vorlesen lassen.

Durch eine zusätzliche <caption></caption> kann man der Tabelle eine eigene Überschrift geben. Diese Aufgabe kann unter Umständen aber schon die summary übernehmen.

Der Screenreader liest die Tabelle normalerweise zeilenweise vor. Bei großen und komplexen Tabellen kann man dabei schnell den Überblick verlieren. Deshalb gibt es die Attribute „id“ und „headers“. Verwendet man diese Attribute in einer Tabelle liest der Screenreader vor dem Zelleninhalt die jeweilige Spaltenüberschrift vor.

Das funktioniert, indem man jeder Zelle im Tabellenkopf eine „id“ und somit einen eindeutigen Namen gibt. Jeder Zelle in dieser Spalte muss man nun das Attribut „headers“ mit dem entsprechenden Wert zuordnen.

Beispiel:

<table summary=”Diese Tabelle enthält Beispieldaten”>
<caption></caption>
<thead>
<tr>
<th id=”aktion”>Aktion</th>
<th id=”tag”>Wochentag</th>
<th id=”datum”>Datum</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers=”aktion”>*Sportart</td>
<td headers=”tag”>*Wochentag</td>
<td headers=”datum”>*Datum</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers=”aktion”>Wandern</td>
<td headers=”tag”>Montag</td>
<td headers=”datum”>20.08.</td>
</tr>
<tr>
<td headers=”aktion”>Surfen</td>
<td headers=”tag”>Dienstag</td>
<td headers=”datum”>21.08.</td>
</tr>
<tr>
<td headers=”aktion”>Radfahren</td>
<td headers=”tag”>Mittwoch</td>
<td headers=”datum”>22.08.</td>
</tr>
</tbody>
</table>

Wenn man Grafiken auf einer Website anzeigen möchte, ist es wichtig, dass diese mit im Modus RGB (Farben) vorliegen.

Grafiken im Modus CMYK können von den Browsern Internet Explorer und Firefox kleiner als 3.0 nicht dargestellt werden.

Für den Druck benötigt man allerdings Grafiken die im Modus CMYK vorliegen, da der Druck in diesen vier Farben erfolgt.

Medienprodukte typografisch gestalten:

Heute haben wir die Medien Fernsehen, CD-ROM, Internet und die Printmedien unter folgenden Aspekten miteinander verglichen:
Transport von Emotionen und Wirkung, Unmittelbarkeit und Spontanität, Art der Informationsdarbietung, Informationstiefe und Vielfalt, Verfügbarkeit, Aktualität, Gestaltung und Lesbarkeit, Materialaufwand und Kosten und Zielpublikum.

Ausgabedateien druckverfahrensorientiert erstellen:

Wir haben in Gruppenarbeit verschiedene Druckverfahren (Hochdruck, Tiefdruck, Siebdruck und Flachdruck) erarbeitet und anschließend dem Kurs vorgestellt.

Heute hatte ich zum ersten Mal Unterricht in der Berufsschule. Wir hatten insgesamt acht Stunden Unterricht und drei verschiedene Fächer. Im Vordergrund stand heute erstmal das Kennenlernen der Mitschüler und Lehrer.

Es gibt verschieden Möglichkeiten den Content innerhalb einer Website zu platzieren.

Eine Möglichkeit ist den Content z.B. erst hinter die Navigation zu platzieren, wodurch die Reihenfolge der Site optisch beibehalten wird. Besucht man nun die Website nur mithilfe der Tastatur, so hüpft man von Link zu Link in der Reihenfolge, wie man auch normal von links nach rechts und von oben nach unten lese würde.

Eine andere Möglichkeit ist den Content direkt am Anfang zu platzieren. Dadurch hat die Website bei google einen Vorteil. Besucht man aber nun die Website nur mithilfe der Tastatur springt man zwar von Link zu Link, fängt aber praktisch im Content an zu lesen und geht erst dann z.B. zur Navigation, was das Lesen der Website für Menschen, die keine Maus benutzen können oder auf andere Hilfsmittel angewiesen sind, erschweren würde.

Tabellen sind ein wichtiges Werkzeug um eine große Menge von Daten übersichtlich darzustellen. Allerdings sollte man Tabellen nur dann verwenden, wenn sie wirklich sinnvoll sind und keinen überflüssigen Code produzieren (wie z.B. um ein Layout darzustellen). Wenn man sich für eine Tabelle entscheidet, sollte man diese dann auch sinnvoll strukturieren und wohl überlegt trs, tds, und ths verteilen.

Bei Tabellen gilt also: so wenige wie möglich, aber so viel wie nötig.

Nach jeder Änderung, egal welcher Art, ist es immer wichtig zu testen, ob noch alles so funktioniert, wie es soll. Außerdem kann man nur so kontrollieren, ob die Änderung den gewünschten Effekt hatte.

Nach dem Update von Joomla! Version 1.5.3 auf 1.5.5 hat eine bestimmte Menüfunktion nicht mehr funktioniert. Die Bilder, die einem bestimmten Menüpunkt zugeordnet worden waren, wurden nach dem Update weder geladen, noch im Quelltext angezeigt. Also musste sich wahrscheinlich ein Fehler im Code der neuen Dateien befinden.

Zuerst haben wir geschaut, ob sich die vermissten Bilder im richtigen Ordner auf dem Server befanden, was der Fall war. Also musste der Fehler in einer der aktualisierten Dateien liegen.

Um festzustellen in welchem Ordner sich der Fehler befindet, haben wir zuerst den Ordner mit dem Code des betroffenen Moduls (mod_mainmenu) durch den ursprünglichen ersetzt (den neuen Ordner nur umbenennen, nicht löschen) und anschließend getestet, ob die den Menüpunkten zugeordneten Bilder wieder angezeigt werden, was der Fall war. Also musste sich der Fehler in einer Datei im oben genannten Ordner befinden.

Da dieser Ordner nicht nur eine Datei enthielt, mussten wir erst einmal herausfinden, in welcher Datei sich der Fehler befindet. Also haben wir nacheinander die entsprechenden “neuen” Dateien durch die ursprünglichen ersetzt, und anschließend das Ergebnis getestet.

Auf diese Art und Weise haben wir die Datei herausgefiltert, in der sich der Fehler befinden muss.

Als nächstes haben wir die entsprechenden Dateien (vor dem Update und danach) mithilfe eines Programms genau miteinander verglichen. Das Programm stellt beide Dateien so nebeneinander dar, dass der Benutzer beide Dateien parallel betrachten kann, und hinterlegt Unterschiede farbig. So konnten wir die Unterschiede in den beiden Dateien genau herausfiltern.

In diesem Fall lag das Problem darin, dass in der “neuen” Datei ein Parameter abgefragt wurde, den es nicht gab. Nach Entfernen des entsprechenden Codes aus der Datei hat das Anzeigen der den Menüpunkten zugeordneten Bilder wieder problemlos funktioniert.

Nachdem ich morgens im Stau gestanden und mich auch gleich noch verfahren habe, bin ich doch noch pünktlich zur Einschulung in die Berufsschule in Bonn gekommen.

Nach ein paar einführenden Worten des Schulleiters in der Aula und einem kurzen Rundgang über das Schulgelände, haben sich alle Schüler der Mediengestalterklasse in einem Raum versammelt und dort alle weiteren wichtigen Informationen inklusive Stundenplan erhalten. Ich bin sehr auf den Unterricht in den nächsten Wochen gespannt.

Meine Ausbildung zur Mediengestalterin digital/print hat nun endlich begonnen. Ich freue mich auf die Zeit und bin gespannt, was mich erwartet. Besonders gespannt bin ich auf den Unterricht in der Berrufsschule in Bonn, auf die Lehrer und Mitschüler und vor allem den Unterrichtsstoff.