Tuning für den Quellcode

Tuning für den Quellcode: Sauberer und strukturierter Quellcode ist eine Kunst für sich. Gerade Neulinge haben damit so ihre Schwierigkeiten und sind erst einmal froh, wenn das Programm funktioniert. Bei späteren Änderungswünschen kann sich dies jedoch böse rächen und der Quellcode muss refakoriert (d.h. Optimierung der Lesbarkeit, Wartbarkeit und Erweiterbarkeit) werden. Hier kann der Dienst »Refactor my code« weiterhelfen. Jeder kann dort seinen Quellcode hochladen oder einen anderen Code optimieren.

In 5 Schritten zu einer barrierearmen Website

Hinweis: Dieser Artikel erscheint im Rahmen der Accessibility Blog Parade 2007. Bitte beachten Sie auch die weiteren Artikel, die im Rahmen dieser Parade entstanden sind.

Viele Artikel über die Umsetzung von Barrierefreiheit auf Websites gehen von dem Idealzustand – eine noch nicht erstellte Website – aus. Doch nur selten steht ein Webdesigner vor diesem Idealzustand. Viel eher ist die Aufgabenstellung, eine bestehende und meistens barrierereiche Website barriereärmer zu gestalten. Zudem ist es nur in den wenigsten Fällen möglich, im Hintergrund an einer neuen Version der Website zu arbeiten, sondern die Änderungen müssen »Live« durchgeführt werden. In diesem Beitrag möchte ich in fünf Schritten zeigen, wie die Realisierung einer barrierearmen Website in der Praxis organisiert und realisiert werden kann.

Schritt 1: Nicht alles auf einmal

Bei einem ersten prüfendem Blick einer Website, zeigen sich in den meisten Fällen relativ schnell die ersten Barrieren und man merkt, wie viel doch eigentlich an dieser Website zu tun ist. Hier ist es wichtig denn Überblick zu behalten und nicht alles auf einmal erledigen zu wollen. Anstatt die Accessibility-Problematik nach dem Motto: »Ein paar Alternativtexte hier und ein paar Label hier« anzugehen, empfiehlt es sich, die Änderungen im Vorfeld genauestens zu planen und zu koordinieren.

Definieren Sie zu Beginn Ihrer Arbeit die Ziele, die Sie mit der Umstrukturierung in Bezug auf die Barrierefreiheit erreichen wollen. Einige mögliche Punkte hierfür könnten sein:

• Alle Bilder und eingebundenen Elemente besitzen einen Alternativ-Text (beispielsweise in Form von
  alt
  -Attributen)
• Der Inhalt ist entscheidend und nicht das Design oder die Fenstergröße des Browsers
• Valider und Standardisierter Quellcode
• Keine Link-Bezeichnungen die sich wiederholen (beispielsweise mehrfache »mehr…«-Links)
• Alle Formularelemente sind mit dem
  label
  -Attribut ausgezeichnet

Schritt 2: Entwickeln Sie einen Schritt-für-Schritt-Plan

Nachdem Sie sich nun entschlossen haben was Sie erreichen möchten, ist der nächste Schritt zu entscheiden, wo Sie als erstes mit der Arbeit beginnen und in welcher Reihenfolge Sie die Punkte erledigen möchten. Ein möglicher Plan dafür könnte wie folgt aussehen:

1. Seitennavigation

   Die Navigation ist für die meisten Benutzer der Ausgangspunkt für ihre Recherche auf einer Website. Daher sollte mit der Optimierung auch an dieser Stelle begonnen werden. Zudem sind die Änderungen an der Navigation meistens recht einfach durchzuführen und können zeitgleich sehr effektiv sein. Stellen Sie sich bei der Beurteilung der Navigation die Fragen: Verwendet meine Navigation Grafiken? Bleibt die Navigation auch noch benutzbar, wenn die Anzeige von Grafiken deaktiviert ist? Sind die Menüpunkte auch noch aus weiter Ferne eindeutig erkenn- und unterscheidbar (z.B. für Menschen die schlecht sehen können)?

2. Populäre Seiten

   Als nächstes sind die Populären Seiten an der Reihe. Welche das sind, können Sie leicht über ein Statistik-Programm herausfinden. Ziel ist es bei dieser Optimierung, mit wenigen Änderungen an den entscheidenden Stellen das größtmögliche Publikum zu erreichen.

3. Inhaltsseiten

   Weit wichtiger als die Startseite, sind die Inhaltsseiten einer Website. Denn die wenigsten Besucher betreten eine Website über die Startseite, sondern landen viel wahrscheinlicher durch Suchmaschinen mitten in Ihrem Angebot. Daher sollte als nächstes die Priorität der Accessibility-Optimierung bei den Inhaltsseiten liegen.

4. Sonstige Seiten

   Nachdem wir die Arbeiten an allen vorrangigeren Bereichen abgeschlossen haben, können wir uns nun um die restlichen Seiten im Ihrem Webangebot kümmern. Hier ist es egal in welcher Reihenfolge Sie vorgehen. Sie können dies in thematischen Bereichen gegliedert oder in alphabetischer Reihenfolge tun. Wichtig ist nur, dass Sie dokumentieren, welche Bereiche noch eine Überarbeitung benötigen und welche Sie schon abgearbeitet haben.

Schritt 3: Benutzertests

Sobald Sie mit der Arbeit oder einem Teil fertig sind, führen Sie ausreichend Benutzertests durch. Programme zur Validierung des Quellcodes reichen dabei bei weitem nicht aus. Eine Website die gegen XHTML 1.0 Strict und CSS zu 100 Prozent validiert, muss noch lange keine perfekte Website im Sinne der Barrierefreiheit sein. Daher verzichten Sie nicht auf Tests mit echten Benutzern. Dies können Freunde, Ihre Familie oder aber auch die »normalen« Besucher Ihrer Website sein. Mehr dazu im folgenden Schritt.

Schritt 4: Sagen Sie Ihren Besuchern was Sie tun

Bei der Überarbeitung Ihrer Website haben Sie zwei Möglichkeiten: Sie können die überarbeitete Website mit einmal oder aber in Teilschritten veröffentlichen. Die zweite Möglichkeit hat dabei eindeutig Vorteile: Sie müssen nicht erst eine Mammut-Aufgabe bewältigen, sondern können sie in Teilschritten abarbeiten und erhalten schneller vorzeigbare Ergebnisse und Rückmelden seitens der Besucher. Die Rückmeldungen die Sie dabei erhalten sind sehr wertvoll und können Sie bei der weiteren Arbeit sehr unterstützen, sowie einen Teil der Benutzertests darstellen. Schließlich sind es die Benutzer, die mit Ihrer Website später »arbeiten« müssen. Aus diesem Grund sollten Sie noch vor den geplanten Optimierungsarbeiten die Benutzer Ihrer Website über die geplanten Arbeiten informieren. Zudem bringen Ihre Besucher dadurch sicherlich mehr Verständnis auf, wenn es – bedingt durch die Arbeiten – zu zeitweisen Ausfällen der Website kommt.

Schritt 5: Zeigen Sie Fortschritte

Sofern Sie die Website in einzelnen Teilschritten barrierefreier gestalten, sollten Sie Ihre Besucher darüber aufklären, was Sie schon getan haben und warum. Ihre Besucher werden dadurch erkennen, dass es wirkliche Fortschritte gibt und Ihre Ankündigung von Schritt 4 nicht nur als Lippenbekenntnis aufzufassen ist.

PNG und die Farbdarstellung

Erst letztens habe ich bei der Arbeit an einem Projekt wieder mit dem Phänomen PNG-Dateien und Gammakorrektur zu tun gehabt. Obwohl in der PNG-Grafik der gleiche Farbwert verwendet wird wie der Website-Hintergrund, wurden die Farben unterschiedlich dargestellt. Je nach verwendeten Browser war der Unterschied mehr oder weniger stark ersichtlich.

Schuld an dieser Misere sind die Gamma-Informationen, welche standardmäßig mit eingebettet werden. Schon vor einiger Zeit bin ich über das Tool GammaSlamma für Mac OS X gestolpert, welches diese überflüssigen Informationen kurzerhand entfernt.

By simply dragging a PNG file into the GammaSlamma icon, a new version will be creates automatically with all that nasty Gamma information removed.

Adobe gibt Kompabilität mit Leopard bekannt

Adobe gibt Kompabilität mit Leopard bekannt: Adobe hat ein PDF-Dokument veröffentlicht, welche Anwendungen mit Mac OS X 10.5 Leopard zusammenarbeiten. Zuerst die gute Nachricht: Die wichtigsten Programme wie Photoshop CS3, InDesign CS3, Illustrator CS3 und Flash CS3 Professional laufen unter Leopard. Schlecht sieht es jedoch für alle Anwender aus, die noch mit CS2 arbeiten. Für alle CS3-Programme die bisher noch nicht kompatibel sind, will Adobe in de nächsten Monaten kostenlose Updates bereitstellen.

Schriften die jeder Designer benötigt

In seinem Weblog hat David Airey einen Artikel veröffentlicht, indem er 13 Schriften vorstellt, die jeder Grafikdesigner besitzen sollte. Zu diesen Schriften gehören:

• Akzidenz Grotesk
• Avenir
• Bodoni
• Caslon
• Clarendon
• Franklin Gothic
• Frutiger
• Futura
• Garamond
• Gill Sans
• Gotham
• Helvetica
• Univers

Zu jeder dieser Schriften gibt es in dem Artikel ausführliche Informationen und eine Schriftprobe.

Der W3C-Validator als Stand-Alone-Version für Mac OS X

Der W3C-Validator als Stand-Alone-Version für Mac OS X: Vor einigen Tagen wurde der W3C-Validator für Mac OS X als eigenständige Software veröffentlicht. Mit der Stand-Alone-Version können direkt lokale Datei validiert werden, ohne das diese erst hochgeladen werden müssen.

Die BITV in der Übersicht

Hinweis: Dieser Artikel erscheint im Rahmen der Accessibility Blog Parade 2007. Bitte beachten Sie auch die weiteren Artikel, die im Rahmen dieser Parade entstanden sind.

Um die Gleichstellung von Menschen mit einer Behinderung auch im Internet zu gewährleisten, wurde vom Gesetzgeber im Juli 2002 ein Gesetz verabschiedet: Die »Barrierefreie Informations-Technik-Verordnung«, kurz BITV. Sie ist die wohl wichtigste Grundlage für Webdesigner, um eine Website barrierearm zu gestalten. Leider ist die BITV sehr umfangreich und nicht sehr verständlich geschrieben. Daher ich in diesem Beitrag die einzelnen Punkte kurz und kompakt wiedergeben.

• Für Multimedia-Elementen wie Bilder, Sound und Videos müssen Alternativen bereitgestellt werden, die auch ohne Hilfsmittel (z.B. Plugins) verstanden werden können. Dies kann beispielsweise durch Alternativtexte geschehen.


• Auch ohne Farben müssen Bider, Grafiken und Texte deutlich zu erkennen und zu unterscheiden sein (z.B. für Fehlsichtige).


• Die Struktur und der Inhalt müssen vom Design getrennt sein. Bei HTML und CSS sind die jeweiligen Spezifikationen einzuhalten.


• Besonderheiten in der Sprache wie Abkürzungen und Sprachwechsel müssen ausgezeichnet werden.


• Tabellen sind nicht grundsätzlich verpönt, sondern sind auch weiterhin für die Darstellung von tabellarischen Daten zu verwenden, nicht jedoch zum Layouten von Webseiten.


• Websites müssen auch ohne Plugins, JavaScript und Applets benutzbar bleiben.


• Der Benutzer muss »zeitgesteuerte« Inhalte kontrollieren können: Dazu zählen unter anderem automatische Aktualisierungen und Weiterleitungen.


• Der Zugriff auf Benutzerschnittstellen (wie Scripts, Applets, Flash, etc.) müssen genauso zugänglich sein wie statische Objekte (Texte, Grafiken, …).


• Unabhängig vom Ein- oder Ausgabegerät muss ein Webauftritt benutzbar bleiben. Beispielsweise indem ausschließlich mit der Maus statt mit der Tastatur gearbeitet wird.


• Auch in älteren Technologien und Browsern ist die Verwendbarkeit der Website sicherzustellen. Allerdings auch nur dann, wenn der Aufwand dafür noch verhältnismäßig ist.


• Alle verwendeten Technologien sollten öffentlich zugänglich und vollständig dokumentiert sein.


• Informationen zur Orientierung und zum Kontext müssen dem Nutzer zur Verfügung gestellt werden.


• Alle Navigations-Instrumente müssen übersichtlich und nachvollziehbar sein, z.B. durch die Angabe von Hyperlink-Zielen, Sitemaps. Außerdem sollte jeder Link eindeutig bezeichnet werden und nur einmal auf einer Seite vorkommen.


• Der Inhalt muss leicht zu verstehen sein, beispielsweise durch eine einfache und klare Sprache.

Viele Bedingungen lassen sich recht einfach erfüllen. In den meisten Fällen allein schon durch einen sauberen Code nach etablierten Standards. Bei anderen Punkten gibt es einen gewissen Spielraum, wodurch sie sich nicht einfach nur nach technischen Kriterien abhacken lassen. Daher sollte bei der Arbeit immer der Mensch im Hinterkopf behalten werden.