Als ich ein Template für Wordpress fertig hatte, waren auf einmal Abstände zwischen

<?php get_header(); ?>
<?php get_sidebar(); ?> und
<?php get_footer(); ?>

Wo kamen die denn her?

Die Antwort war mal wieder UTF-8!

Hat man einen UTF-8-Code mit Unicode-Signatur (BOM) einschließen abgespeichert, wird dem ganzen ein unsichtbarer Tag vorangestellt, der dann das Leerzeichen erzeugt.

Das heißt, ich musste alles nochmal ohne Unicode-Signatur (BOM) einschließen speichern, das hochladen und siehe da, es war wieder alles an seinem Platz!

Mjammi.de – das ist unser Kochblog. Alle Gerichte haben wir gekocht und nur die, die super schmecken, finden ihren Weg ins Blog.

Dabei ist der Blog vollkommen multilingual konfiguriert.
Ganz wichtig war mir auch eine optimale Suchmaschinentauglichkeit. Die Website wurde standardkonform (mit validem XHMTL 1.0 + tabellenfreiem CSS-Layout) und weitgehend barrierefrei programmiert.

Als Content Management System wurde  Wordpress eingesetzt und angepasst.

Mjammi.de besuchen

Meine Aufgaben

• Layout: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Umsetzung: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• Kochen, fotografieren und schreiben der Beiträge
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)
• multilingual: Erstellung eines Templates, das mit Wordpress die Verwendung mehrerer Sprachen zulässt.

Anstatt der “westlichen (ISO-8859-1)” wird heute immer mehr UTF-8-kodiert. Das hat zum einen den Vorteil, dass da jetzt (fast) alle Sprachen mit einer Dateikonvertierung zurechtkommen, aber andererseits auch den Nachteil, dass man das überall sagen muss, weil viele Browser und E-Mail-Programme noch die  ISO-8859-1 – Kodierung als Standard haben.

Wir haben jetzt mal zusammengelegt, was man alles beachten muss, wenn man UTF-8 kodiert programmiert, damit nicht ein Buchstabensalat rauskommt.

1. Die Dateien müssen als UTF-8 gespeichert sein.
2. In die .htaccess gehört der folgende Befehl:

AddDefaultCharset UTF-8

3. Im PHP muss für die mail()-Funktion folgender Header angegeben sein:

$email = mail("$email","Was",$n_f_a,"From:ich@du.de\r\nReply-To: ich@du.de" . 'MIME-Version: 1.0' . "\r\n" . 'Content-type: text/plain; charset=UTF-8' . "\r\n");

4. In PHP-Dateien funktioniert beispielsweise htmlentities($fehler) nicht mehr ohne weiteres. Dazu muss man notieren:

htmlentities($fehler,ENT_NOQUOTES,"UTF-8")

5. In der HTML-Datei muss UTF-8 als meta-Tag definiert sein:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

Das ist sicher noch nicht alles, aber mal ein Anfang …

Deshalb hier eine kurze Zusammenfassung:

1. Erstelle eine robots.txt auf der neuen Domain mit folgendem Inhalt:

User-agent: *
Disallow: /

2. Kopiere die Datenbank und Dateien von Wordpress auf die neue Domain.
3. Bearbeite wp-config.php, so dass Du das Recht hast auf die Datenbank zuzugreifen, und füge die folgenden Zeilen ein, ersetze dabei example.com durch Deine eigene Domain:

define ('WP_SITEURL', 'http://www.example.com');
define ('WP_HOME', 'http://www.example.com');

4. Jetzt kannst Du Dein Blog auf der neuen Domain installieren.
5. Installiere das Suchen und Ersetzen-Plugin, starte es und suche nach Deiner alten URL und ersetze sie mit Deiner neuen URL.
6. Sobald Du fertig bist, überprüfe noch einmal, ob alles funktioniert.
7. Entferne die robots.txt -Datei.
8. Wenn Du Wert auf Suchmaschinen legst, kannst Du auf Deinem alten Blog die folgende Zeile in die .htaccess oder vhost-config einfügen:

Redirect 301 / blog / http://www.newdomain.com/

9. Entferne den alten Blog-Code und die alte Datenbank.
10. Ändere Dein Feedburner-Konto, falls Du eines hast.

Original in englisch auf yoast.com

wordpress.lernenhoch2.de/handbuch/

Dabei wird einem Schritt für Schritt alles erklärt.
Für manche ein gut erklärter Einstieg, für mich eine super Zusammenfassung!

defaults write com.apple.finder AppleShowAllFiles -bool true

Danach muss man den Finder wieder neu starten, damit dieser die neuen Einstellungen übernimmt. Dies erreicht man in der Konsole mit den AppleScript Befehlen:

osascript -e ‘tell application “Finder” to quit’;
osascript -e ‘tell application “Finder” to activate’;

Will man die Ansicht deaktivieren, ersetzt man im Befehlt “true” durch “false”.

Natürlich wäre es schön, die Anzeigeeinstellungen direkt über den Finder verändern zu können. Hierzu gibt es für den Leopard einige Beispiele im Netz, die je ein Automator Skript zum Aktivieren und Deaktivieren der Ansicht für Systemdateien über das Kontextmenu im Finder ermöglichen:

• http://gigaom.com/apple/quick-tip-showhide-hidden-files/
• http://www.macyourself.com/2009/03/20/how-to-show-hidden-files-on-a-mac-with-the-help-of-automator/

Nun ist es auch nicht gerade schön, ständig zwei verschiedene Skripte ausführen zu müssen. Zusätzlich hat sich der Automator im Snow Leopard etwas im Vergleich zum Leopard verändert. Hier nun die Vorgehensweise um das “toggeln” zwischen den Ansichten zu ermöglichen.

1. Zunächst öffnen wir den Automator und wählen über das Auswahlmenu die Vorlage “Dienst” für den Arbeitsablauf aus.
2. Als nächsten aus der Bibliothek die Automator Aktion “Shell Skript Ausführen” auswählen.
3. Im Drop Down Feld “Dieser Dienst empfängt ausgewählte(n) die Option “Dateien oder Ordner” konfigurieren
4. und im Drop Down Feld “in” die Option “in jedem Programm” auswählen.
5. Im Fenster für die “Shell-Skript Ausführen” Aktion für die Option “Shell” “/bin/bash” auswählen und für die Option “Eingabe übergeben” “An stdin” einstellen.
6. Folgende Shell Konsolen Befehle in den Editor Bereich der Aktion eintragen:

#!/bin/bash
VAR_DISP=$(eval defaults read  com.apple.finder AppleShowAllFiles)

#! needed space between brackets
if [ $VAR_DISP = 0 ];
then (eval defaults write com.apple.finder AppleShowAllFiles -bool true)
else (eval defaults write com.apple.finder AppleShowAllFiles -bool false)
fi
osascript -e 'tell application "Finder" to quit';
osascript -e 'tell application "Finder" to activate';

1. Und letztendlich mit einem selbsterklärenden Namen abspeichern , (Ich habe “ToggleHiddenFilesDisplay”) ausgesucht, und fertig ist das Automator Skript welches sich über das Kontextmenu des Finders aufrufen lässt.

Um das gleich auszuprobieren, nun den Finder öffnen, eine Datei oder einen Ordner aussuchen “rechts klick” oder den entsprechenden Systembefehl für das Kontexmenu anzuzeigen und den Dienst “ToggleHiddenFilesDisplay” ausführen. Der Finder schliesst sich und öffnet sich anschliessend erneut und man sieht die Systemdateien. Bei nochmaligen anwenden des Dienstes “ToggleHiddenFilesDisplay” schließt sich und öffnet sich der Finder erneut und die Systemdateien werden wieder versteckt.

Um versteckte Dateien in den Öffnen bzw. Speichern Menus der Mac Programme zu erreichen (z.B.: TextEdit) reicht die Tastenkobination [cmd]+[shift]+[.] aus:

• http://www.sonoya.com/tip-systemdateien-versteckte-dateien-unter-mac-osx-10-6-snow-leopard-anzeigen-sichtbar-machen-unsichtbar.html

Natürlich will man auch in der Suchfunktion des Finders ab und zu nach Systemdateien Suchen. Hierfür kann man zusätzlich im geöffneten Finder:

• http://www.boeschung.de/tipps/apple/166-snow-leopard-systemdateien-suchen-und-finden

zunächst die Tastenkombination “[cmd] + [f]” drücken, anschließend

1. Im Drop Down menu “Art” den Punkt “Andere …” auswählen
2. Die Option “Systemdateien” nun mit einem Häkchen versehen.
3. Und letztlich die Dropdown menus so konfigurieren das “Systemdateien” “einschließen” angezeigt wird.

Ein Riesenaufwand um sich versteckte Systemdateien anzuschauen ohne einen proprietäre Finderersatz kaufen zu müssen, aber es geht !

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Praktisch für Webdesigner, die keine Standalone-Version installieren wollen.

bei neuen Dokumenten:
Datei –> neues Dokument –> Voreinstellungen –> und dort wählt man unter “Standardkodierung” –> UTF8 aus.

bei bestehenden Dokumenten:

Modifizieren –> Seiteneigenschaften –> auf “Titel/Kodierung” klicken –> und dort unter “Kodierung”  UTF8 einstellen –>  auf “OK” klicken.

Das Evangelische Jugendwerk (ejw) in Ludwigsburg bietet für Kinder und Jugendliche interessante und abwechslungsreiche Aktionen, Freizeiten und vieles mehr.

Ich betreue die Internetseite schon von Anfang an und jetzt wurde sie erneuert. Das Layout der Webseite wurde mit XHTML und CSS tabellenfrei und standardkonform umgesetzt. Die Seite ist barrierefrei und die vielen Bilder werden von einer Lightbox angezeigt.

Ein besonderes Highlight ist die Hauptnavigation!

ejw Ludwigsburg besuchen

Leistungen:

• Strukturierung der Inhalte
• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: Umsetzung mit XHTML und CSS
• barrierefreie Umsetzung
• Einfügen und Gestalten aller Inhalte
• Javascript: Programmierung eines Scripts zum zufälligen Austauschen des oberen Bildes in bestimmten Zeitintervallen und bei jedem Reload sowie der Rollover-Effekte bei Navigationselementen
• PHP: Entwicklung eines Scripts, das automatisch alle Bilder eines Ordners ausliest
• Pflege, Wartung und Aktualisierung der Internetseite von 2003 bis heute

Wer schon mal ein Ausklapp-Menü barrierefrei gestalten wollte, ist sicherlich ganz schön ins Schwitzen gekommen.

Wies geht, zeigt hier ein Artikel des “Barrierefrei informieren und kommunizieren”-Portals.

Und noch ein anderes, ähnlich schwieriges Thema.

Wie kann man Tabs auf einer Seite barrierefrei umsetzen?

Dirk Ginader beschreibt es in diesem Artikel:  “jQuery Accessible Tabs – Wie man Tabs WIRKLICH zugänglich macht”.

Inzwischen ist es noch viel leichter, den Google-Kalender in die eigene Website einzubinden.

Dazu geht man wie folgt vor:

HTML5

Was es damit auf sich hat, und ob man es jetzt schon einsetzen sollte, habe ich hier mal zusammengetragen:

Artikel über HTML5:

• http://meiert.com/de/publications/talks/20090924/
• http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick/
• http://yatil.de/Weblog/wer-heute-schon-html5-einsetzen-sollte

Eine Reihe zu HTML5 von den Webkrauts:

• http://www.webkrauts.de/2009/09/21/moderne-semantik/
• http://www.webkrauts.de/2009/09/28/sehen-und-hoeren/
• http://www.webkrauts.de/2009/09/29/malen-nach-zahlen/
• http://www.webkrauts.de/2009/10/01/tipphilfen/
• http://www.webkrauts.de/2009/10/05/html5-in-der-praxis-1/
• http://www.webkrauts.de/2009/10/06/html5-in-der-praxis-2/

In englisch:

• http://dev.w3.org/html5/spec/Overview.html – HTML5 Spezifikationen vom W3C
• http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ - HTML5 Cheat Sheet
• http://adactio.com/extras/pocketbooks/html5/ - HTML 5 Pocketbuch
• http://html5doctor.com/ - ganze Seite zu HTML 5
• http://www.alistapart.com/articles/semanticsinhtml5 und die deutsche Übersetzung dazu http://tobias-otte.de/essays/semantik-in-html-5/
• http://html5gallery.com/ – eine Seite, wo Websites vorgestellt werden, die schon mit HTML5 umgesetzt sind

Nachdem del.icio.us den Quelltext ein bisschen geändert hat, habe ich die del.icio.us-Tag-Wolke und die Einzellinks einmal überarbeitet.

Sie können den aktuellen Quellcode hier runterladen.

Und hier können Sie noch einmal meinen ersten Artikel sehen, wo alles genau erklärt ist.

Viel Spaß mit den del.icio.us – Links!

Gemeinsam mit Mitarbeitern und Partnern entwickelt und produziert die Sourcon Padena als mittelständisches Biotechnologie-Unternehmen biologische Pflanzenschutzmittel.

Optimale Suchmaschinentauglichkeit war unter anderem ein wichtiges Ziel bei der Erstellung der Seite. Sie wurde außerdem barrierefrei, mit validem XHMTL 1.0 und tabellenfreiem CSS-Layout erstellt.

Als Content Management System wurde Wordpress eingesetzt und angepasst.

Sourcon Padena besuchen

Meine Aufgaben

• Gestaltung und Umsetzung im Auftrag der Sabine Kettenhofen Kommunikation aus Ingersheim
• Layout: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• Einfügen aller Inhalte
• JavaScript/DOM-Scripting: Umsetzung der Slideshow im Kopfbereich der Webseite und Einbindung der Fotogalerie
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)

1) Zuerst einmal lädt man das Video auf seinen Webspace.

2) Dann geht man auf subtitle-horse.org

3) gibt dort die URL des Videos an und klickt auf “submit”.

Jetzt kommt folgender Bildschirm:

4) Nun gibt man alle Untertitel an.

Dabei gibt es ein kleines Problem. Man kann das Video in subitle-horse.org nicht zwei oder mehrmals abspielen. Ich habe es mit allen Browsern versucht, aber es ist mir mit keinem gelungen.

UPDATE: Man muss ein richtig konfiguriertes .flv nehmen.

Nun ja, ich habe erst mal allen Text reingeschrieben und die Feinabstimmung später gemacht.

5) Alles exportieren.

Es wird in zahlreiche Formate konvertiert, darunter auch XML-Dateien im Timed Text Format. Dieses wird auch von der FLV Playback Komponente in Flash CS3 verwendet. Also genau das, was wir brauchen.

Man wählt also Titles -> Export -> TimedText jw MEDIA PLAYER 3.x, kopiert den XML-Quelltext aus dem Formular und speichert ihn als XML-Datei im Texteditor ab.

Also beispielsweise als orangen.xml.

Damit ist die Arbeit auf subtitle-horse.org beendet. In der Dokumentation findet man noch mehr Informationen.

Kennt jemand noch ein anderes Tool zum Erstellen der Untertitelanzeigen?

6) Doch zurück zum JW-Player. Dort muss der Text noch eingebunden werden.

Das geht im Setup Wizard. Dort gibt man im “Playback behavior” unter “captions” die XML-Datei an:

Am Ende steht die Variable captions mit der jeweiligen XML-Datei im Code.

etweder so:

so.addVariable('captions','orangen.xml');

oder so:

flashvars="height=250&width=400&file=/upload/player.flv&captions=orangen.xml

7) Nach dem Einbinden des Videos in die Seite zeigt ein Textsymbol dass es Untertitel gibt. Diese kann man aus- und einschalten.

Weiß jemand, ob es die Möglichkeit gibt, die Anzeige der Untertitel im Voraus auszuschalten? So, dass sie jemand der sie braucht, nur einschalten kann?

UPDATE: Um die Untertitel ausgeschaltet zu haben, aber noch die Möglichkeit, sie einzuschalten, benutzt man

usecaptions=false

und für die Audiodescription

useaudio=false

Danke an Sylvia Egger für den Tip!

8) Nun kann man, wenn man will, noch die Zeitabläufe korrigieren, indem man in der XML-Datei an der Stelle, wo die Anfangs- und Endzeit stehen, noch einbisschen vor- oder zurück formatiert.

9) Hier gibts von Jeroen Wijring noch einige Informationen zu barrierefreien Videos und wie man sie umsetzt.

Die Werbekette ist eine Werbeagentur von Sabine Kettenhofen. Mit ihrer Website stellt sie sich, ihre Leistungen und Referenzen, vor.

Optimale Suchmaschinentauglichkeit war unter anderem ein wichtiges Ziel bei der Erstellung der Seite. Sie wurde außerdem barrierefrei, mit validem XHMTL 1.0 und tabellenfreiem CSS-Layout erstellt.

die Werbekette besuchen

Die Werbekette erhielt im BITV-Test (Barrierefreiheit) 97,5 Punkte.

Leistungen:

• Beratung des Kunden über das Screendesign und die Anordnung der Inhalte
• Bildbearbeitung und Web-Optimierung
• Layout: tabellenlos mit XHTML und CSS
• Einfügen aller Inhalte nach den Gesichtspunkten der Barrierefreiheit
• Suchmaschinenoptimierung

Mit FoxLingo wird die Übersetzung einer Website zum Kinderspiel. Von etwa 30 Sprachen in genausoviele andere Sprachen.

Der Service nutzt online-Übersetzungs-Programme. So kann man eine englische Website auf ungefähr 15 Arten ins deutsche übersetzen. Worldlingo, Google und AltaVista sind nur drei von ihnen.

Ebenso kann man auch einzelne Wörter eine beliebige Sprache übersetzen, eine Sprache lernen, oder in einem von verschiedenen Lexika nachschlagen.

Ach so! Und FoxLingo ist ein Firefox-Plugin.

Für die Agentur sWEBian setze ich immer wieder (Photoshop-)Layouts in XHTML-Code und CSS-Stylesheets um.

Hier sind nun mal ein paar davon:

Meine Aufgabe

• Layout: tabellenlos, standardkonform und barrierearm mit XHTML und CSS

Internetseiten werden auf vielen verschiedenen Medien genutzt. Dazu gehören die Browser der vergangenen, aktuellen und zukünftigen Generationen, aber auch Handhelds oder beispielsweise Screenreader, mit denen Blinde sich Internetseiten erschließen.

Damit die Informationen einer Webseite auf allen Lesegeräten, Browsern und von Menschen mit Behinderungen zugänglich sind, müssen diese speziell aufbereitet werden.

In der 2002 veröffentlichten Barrierefreien Informationstechnikverordnung (BITV) wurden Regeln zur Sicherstellung der Barrierefreiheit von Internetseiten gesetzlich festgelegt.

(Vollständige Fassung der BITV hier als PDF downloaden )

Das BIK – barrierefrei informieren und kommunizieren-Projekt unterstützt die Umsetzung der Barrierefreiheit und entwickelt Testverfahren zur Prüfung der Barrierefreiheit von Internet- und Intranetangeboten.  Der BITV-Test ist ein Prüfverfahren für die umfassende und zuverlässige Prüfung der Barrierefreiheit von Webangeboten. Die Internetseiten, die zu mindestens 95% barrierefrei sind, werden in die 95+ – Liste aufgenommen.

Ich habe für die barrierefreie Umsetzung von www.diewerbekette.de auch einen Platz in der BITV 95+ – Liste bekommen.

Für eine barrierefreie Internetseite sind folgende Punkte zu berücksichtigen:

Standardkonformität

Die Basis einer barrierefreien Website sind saubere Codierung und Vollständigkeit des Quelltextes.

Das WorldWideWeb Consortium hat dafür Standards erstellt und veröffentlicht. Die Einhaltung dieser Standards trägt dazu bei, dass Browser, wie der Internet Explorer oder Firefox die Webseiten auch richtig anzeigen.

Um zu überprüfen, ob Ihre Webseiten diesen Standards entsprechen, also valide sind, können Sie einen so genannten Validator benutzen. Das W3C stellt dafür ein Online-Tool zur Verfügung, den “W3C HTML Validation Service“.

Er überprüft Ihre Seiten auf Standardkonformität und zeigt vorhandene Fehler auf oder bestätigt die Validität Ihrer Webseite.

CSS−Dokumente können Sie mit dem “W3C CSS Validierungsservice” überprüfen.

Sinnvolle Strukturierung

Eine semantisch korrekte Strukturierung des Quelltextes sorgt für eine bessere Erschließbarkeit der Informationen für Blinde und und gleichzeitig auch für Suchmaschinen, die Ihre Website nach Informationen durchsuchen.

Das bedeutet, dass beispielsweise Überschriften auch als solche im Quelltext ausgezeichnet werden.

Die Wichtigkeit der Informationen wird damit nicht nur optisch, sondern auch strukturell in die Webseite eingebunden und kann so auch leicht wieder ausgelesen werden.

Textalternativen

Um die Inhalte Ihrer Webseite lesen zu können, benutzen blinde Menschen so genannte Screenreader.

Screenreader sind Programme, die lediglich die Textinhalte einer Webseite auslesen. Mit Hilfe einer angeschlossenen Sprachausgabe oder Braillezeile (wandelt Text in Blindenschrift um) können die Inhalte dann vom blinden Menschen gehört oder gelesen werden.

Einen Einblick in die Art, wie Internetseiten von Screenreadern gesehen werden, bekommen Sie mit dem Lynx Viewer, einem Tool, welches Textinhalte aus Internetseiten isoliert und daraus eine Nur-Text-Ansicht generiert. Geben Sie dort einmal die Adresse einer beliebigen Webseite ein!

Sie werden sehen, wie wichtig es ist, für Bilder und Multimedia-Objekte, wie zum Beispiel Flash-Filme Textalternativen bereit zu stellen, damit die in diesen Elementen enthaltenen Informationen auch von Blinden gesehen werden können.

Übrigens: Auch Suchmaschinen sind blind!

Sie erfassen Internetseiten genau wie Screenreader. Daher ist eine barrierefreie Internetseite auch für Suchmaschinen optimal zugänglich, was zu oft überraschend guten Positionierungen in den Ergebnisseiten führt.

Trennung von Inhalt und Layout

Eine weitere wichtige Voraussetzung für die Erstellung barrierefreier Web-Auftritte ist die Trennung von Inhalt und Layout.

Der Inhalt trägt die Information. Die Gestaltung macht die Informationen nur zugänglich. Dabei ist das Layout oft geräteabhängig. Eine Webseite sieht auf einem 20-Zoll-Monitor anders aus als auf einem Pocket-PC.

Eine Trennung von Inhalt und Layout ermöglicht eine Aufbereitung der Inhalte für verschiedene Ausgabegeräte.

Diese Trennung gelingt mit dem Einsatz von (X)HTML und CSS (Cascading Style Sheets).

Das (X)HTML der Seiten legt dann lediglich die Inhalte und deren Struktur fest, die Gestaltung für alle denkbaren Ausgabeformen wird hingegen mit Cascading Stylesheets (CSS) erreicht.

Die CSS-Layout-Datei kann in allen Seiten einer Website verlinkt werden und wirkt damit zentral auf alle Seiten eines Web-Auftritts!

Änderungen müssen dann nur noch in der CSS-Datei vorgenommen werden und werden dann auf alle Seiten angewendet. So lässt sich das Layout einer Webseite komfortabel und schnell aktualisieren.

Der CSS-Zen-Garden demonstriert eindrucksvoll, welche großen Möglichkeiten der Gestaltung mit CSS gegeben sind (ohne dass der HTML-Quellcode verändert werden muss.)

Flexible Layouts

Für die Umsetzung von Screendesigns sollten flexible Layouts gestaltet werden, welche es ermöglichen, die Textinhalte auch dann noch lesen zu können, wenn die Schriftgröße mit Hilfe der Browsereinstellungen vergrößert oder verkleinert wird.

Das bedeutet auch, dass barrierefreie Webseiten nicht (wie beispielsweise Drucksachen) auf jedem Browser identisch aussehen können.

Internetnutzer haben heutzutage viele Möglichkeiten, auf das Aussehen ihrer Internetseite mit Hilfe des Webbrowsers einzuwirken. So können sie die Schriftgröße ändern oder auch eine eigene CSS-Layout-Datei laden und damit der Seite ein ganz neues Layout geben.

Das in eine Webseite eingebundene Layout ist damit immer nur ein Angebot an den Nutzer, das einen optimalen Rahmen vorgibt.

Richtige Darstellung von Tabellen

Auch bei der Darstellung von Tabellen sind einige Besonderheiten zu beachten.

So sollten Tabellen nicht (wie früher üblich) zu Layoutzwecken, sondern nur zur Darstellung tabellarischer Daten verwendet werden.

Tabelleninhalte müssen sinnvoll bleiben, wenn man die Tabelle Zeile für Zeile der Reihe nach ausliest. Man nennt dies Linearisierbarkeit der Inhalte.

Auch Datentabellen können so aufbereitet werden, dass Screenreader diese sinnvoll vorlesen können.

Formulare

Kontaktformulare, Umfragen und andere Formulare ermöglichen die Interaktion mit dem Nutzer der Webseite.
Allerdings nur dann, wenn dieser auch versteht, in welchem Feld er welche Information eintragen kann.

Um das gewährleisten zu können, müssen die Formulare sinnvoll gestaltet und strukturiert sein.

Auch gibt es spezielle Möglichkeiten, im Quelltext die Übersichtlichkeit der Formularelemente zu erhöhen.

Sprache

Ein weiteres sehr wichtiges Element der Barrierefreiheit ist die Auszeichnung der verwendeten Sprache.

Diese kann jede aufgerufene Seite festgelegt werden. Werden innerhalb des Textes Fremdwörter verwendet, so sollte diesen im Quelltext die entsprechende Sprache zugewiesen werden.

Das sorgt zum einen dafür, dass Suchmaschinen wissen, in welcher Sprache Ihre Webseite verfasst wurde.

Zum anderen können Sprachausgaben nur so die Wörter auch richtig vorlesen. Ansonsten wird beispielsweise ein englisches Wort in deutscher Sprache ausgesprochen und ist dann kaum noch zu verstehen.

Navigation

Die Navigation innerhalb einer Webseite sollte sehr einfach und leicht verständlich sein.

Wenn möglich, werden mehrere Wege angeboten, zu den gesuchten Informationen zu kommen. Beispielsweise eine hierarchische Navigation UND eine Suchfunktion, welche die ganze Webseite durchsuchen kann.

Zudem sollte mit Hilfe spezieller Techniken sichergestellt werden, dass die Webseite auch ausschließlich per Tastatur bedienbar ist. Das kommt den Nutzern zugute, die beispielsweise aufgrund einer Körperbehinderung Schwierigkeiten haben, die Computer-Maus zu bedienen.

Farben und Kontraste

Für Menschen mit Farbsehschwächen ist es wichtig, dass Vorder- und Hintergrundfarbe der Webseite einen ausreichenden Kontrast aufweisen.

Auch sollte darauf verzichtet werden, Informationen nur durch Farben zu vermitteln, wie beispielsweise bei der Rot-Färbung von wichtigen Informationen.

Besser ist es, wichtige Informationen fett oder durch ein spezielles Zeichen zu markieren.

Multimedia

Beim Einsatz von Multimedia-Elementen, JavaScripts, Frames und PDFs sind weitere spezielle Regelungen zu beachten, um eine Webseite barrierefrei zu gestalten.

Testverfahren

Wie Sie die Barrierefreiheit einer Webseite testen können, habe ich in dem Artikel “Barrierefreiheit von Webseiten testen” auf der Netzspielwiese beschrieben »

Zusammenfassung

Wie Sie sehen, müssen für die Erstellung einer barrierefreien Webseite viele Faktoren beachtet werden.

Dennoch lohnt sich der Mehraufwand bei der Erstellung Ihrer Webseite, denn

• Sie erreichen damit eine wesentlich größere Zahl an Internet-Nutzern als mit einer herkömmlichen Webseite.
• Die Besucher Ihrere Internetseite finden auf Ihrer Seite schnell die gesuchten Informationen. Und nur zufriedene Besucher kommen wieder!
• Ihre Webseite ist durch die Barrierefreiheit auch optimal zugänglich für Suchmaschinen. Das führt zu einer guten Positionierung Ihrer Webseite innerhalb der Suchergebnisse.
• Eventuell später notwendige Änderungen lassen sich mit sehr wenig Aufwand umsetzen. Sie braucht dafür nicht wieder neu erstellt werden. Dadurch reduzieren sich die Wartungskosten für Ihre Webseite enorm.
• Die Informationen Ihrer Internetseite sind auch auf außergewöhnlichen Endgeräten, wie Pocket PCs lesbar.

Links

Hier noch ein paar Links zu weiterführenden Informationen:

• Einfach für Alle – eine Initiative der Aktion Mensch mit vielen Informationen rund um Barrierefreiheit
• Barrierefreies Internet auf wikipedia.de
• Barrierefreies Webdesign – gleichnamige Website zum Thema
• Barrierefrei informieren und kommunizieren – Projekt, das sich zum Ziel gesetzt hat, Webseiten, CD-Roms und Intranets für Blinde und Sehbehinderte zugänglich zu machen. Hier werden auch regelmäßig Seiten analysiert.
• Der Barrierekompass

Angebot

Sie haben noch Fragen? Sie möchten auch eine barrierefreie Webseite?

Dann nehmen Sie Kontakt mit mir auf!

Gern berate ich Sie bezüglich der Barrierefreiheit Ihres Internetauftritts und/oder unterstütze Sie bei der Überarbeitung oder Neugestaltung Ihres Internetauftritts nach aktuellen Webstandards und den Richtlinien der Barrierefreien Informationstechnikverordnung (BITV).

Foto: goebs – Photocase.de

1. Mein Wordpress-als-CMS-Beitrag bleibt weiterhin gültig. Es funktioniert auch unter Wordpress 2.5 einwandfrei.

2. Auch die delicious-Tagwolke funktioniert ohne Probleme. Allerdings ist sie ja auch unabhängig von Wordpress.

3. Ein wenig Probleme hatte ich mit den Links.

Einerseits haben sie jetzt ganz andere Kategorien als vorher (?!)
Andererseits ist der Link-Tag ein anderer. wp_list_bookmarks heißt jetzt das Zauberwort.

Früher habe ich wp_get_links genutzt:

<?php wp_get_links(5); ?>

Damit ich jetzt so wie vorher die Links ansprechen kann, muss ich

<?php wp_list_bookmarks('orderby=id&order=DESC&category=5&categorize=0&title_li=0'); ?>

schreiben.

Und mit diesem Tag funktioniert dann auch mein DOM Rollover Script.

Alles in allem bin ich doch recht zufrieden mit Wordpress 2.5.
Im Admin-Bereich finde ich mich noch nicht so richtig zurecht. Ich fand es vorher auch gut :) Aber das ist sicher noch Gewöhnungssache.