Checkliste für Webstandards

„A web standards checklist“ (Russ Weakley, Max Design). Deutsche Übersetzung von Mario Müller.

Originalartikel: http://www.maxdesign.com.au/presentation/checklist.cfm

Webstandards – mehr als nur „tabellenfreie“ Seiten

Der Begriff „Webstandard“ hat für jeden eine andere Bedeutung. Für die einen ist es „tabellenfreies Layout“, für die anderen „valider Code“. Hinter Webstandards verbirgt sich aber noch viel mehr. Eine den Webstandards entspechende Seite sollte sich nicht nur an Standards halten (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc.), sondern auch an aktuelle Vorgaben (valider Code, zugänglicher Code, sematisch korrekter Code, anwenderfeundliche URLs etc.).

Mit anderen Worten: eine den Webstandards entsprechende Seite sollte im Idealfall schlank, aufgeräumt, CSS-basierend, zugänglich, nutzer- und suchmaschinenfreundlich gestaltet sein.

Über diese Checkliste

Diese Checkliste ist nicht vollständig, man könnte wahrscheinlich noch vieles hinzugefügen. Außerdem sollte sie nicht als Liste von Punkten angesehen werden, die auf jeder Seite befolgt werden müssen. Es handelt sich lediglich um einen Leitfaden, der…

  • die Vielfalt der Webstandards aufzeigt
  • ein handliches Tool für Enwickler von Webseiten ist
  • als Lernhilfe für Entwickler dient, die sich mit Webstandards beschäftigen

Die Checkliste

  1. Qualität des Codes
    1. Hat die Seite einen korrekten Doctype?
    2. Hat die Seite eine Zeichensatzcodierung?
    3. Verwendet die Seite valides (X)HTML?
    4. Verwendet die Seite valides CSS?
    5. Nutzt die Seite CSS-Hacks?
    6. Hat die Seite unnötige Klassen oder IDs?
    7. Ist der Code gut strukturiert?
    8. Gibt es tote Links auf der Seite?
    9. Wie sieht es mit der Größe/Geschwindigkeit der Seite aus?
    10. Treten JavaScript-Fehler auf?
  2. Grad der Trennung von Inhalt und Layout
    1. Verwendet die Seite für die Gestaltung überall CSS (Schriftart, Farbe, Abstände, Ränder etc.)?
    2. Sind alle dekorativen Bilder mit CSS realisiert oder erscheinen sie im (X)HTML?
  3. Zugänglichkeit (Accessibility) für Nutzer
    1. Ist das ALT-Attribut für alle beschreibenden Bilder sinnvoll gesetzt?
    2. Verwendet die Seite relative Einheiten für die Schriftgröße (statt absoluter Einheiten)?
    3. Wird das Layout beim Vergrößern der Schrift gestört?
    4. Verwendet die Seite »visible skip menus«?
    5. Nutzt die Seite zugängliche Formulare?
    6. Nutzt die Seite zugängliche Tabellen?
    7. Haben die Farben ausreichend Helligkeit/Kontrast?
    8. Werden wichtige Informationen nur mit Farben gekennzeichnet?
    9. Gibt es verzögerte DropDown-Menüs (für Nutzer, mit eingeschränkten motorischen Fähigkeiten)?
    10. Sind alle Linktexte beschreibend (für blinde Nutzer)?
  4. Zugänglichkeit (Accessibility) für Geräte/Maschinen
    1. Funktioniert die Seite in neuen und alten Browsern vernünftig?
    2. Ist der Inhalt der Seite auch ohne CSS zugänglich?
    3. Ist der Inhalt der Seite auch ohne Bilder zugänglich?
    4. Funktioniert die Seite auch in Textbrowsern wie Lynx?
    5. Lässt sich die Seite vernünftig ausdrucken?
    6. Funktioniert die Seite auf Handhelds?
    7. Besitzt die Seite ausführliche Meta-Informationen?
    8. Funktioniert die Seite in verschiedenen Fenstergrößen des Browsers?
  5. Grundlegende Benutzbarkeit (Usability)
    1. Gibt es eine klare visuelle Gliederung?
    2. Sind die Überschriften unterschiedlicher Ordnung leicht unterscheidbar?
    3. Besitzt die Seite eine leicht verständliche Navigation?
    4. Ist die Navigation auf allen Seiten durchgängig?
    5. Wird eine konsistente und passende Sprache/Formulierung verwendet?
    6. Gibt es eine Sitemap und ist diese leicht zu finden?
    7. Ist bei größeren Seiten eine Suchfunktion vorhanden?
    8. Gibt es auf jeder Seite einen Link zur Startseite?
    9. Sind alle Links unterstrichen?
    10. Sind schon besuchte Links entsprechend farblich gekennzeichnet?
  6. Seitenverwaltung
    1. Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall funktioniert?
    2. Hat die Seite lesbare URLs?
    3. Ist die Seite auch ohne »www« erreichbar?
    4. Hat die Seite ein Favicon?

1. Qualität des Codes

1.1 Hat die Seite einen korrekten Doctype?

Der Doctype (kurz für »Document Type Declaration«) muss ganz am Anfang des Dokuments erscheinen und informiert den Validator darüber, welche (X)HTML-Version verwendet wird. Doctypes sind Schlüsselkomponenten von konformen Webseiten, ohne die Markup und CSS nicht validiert werden können.

http://www.alistapart.com/articles/doctype/

Mehr dazu:

1.2 Hat die Seite eine Zeichensatzcodierung?

Wenn der Benutzeragent (bspw. der Browser) die Zeichensatzcodierung des Dokuments nicht ermitteln kann, bekommt der Nutzer möglicherweise unlesbaren Text angezeigt.

http://www.w3.org/International/tutorials/tutorial-char-enc/

Mehr dazu:

1.3 Verwendet die Seite valides (X)HTML?

Valider Coder wird schneller und besser gerendert als invalider Code mit Fehlern. Browser werden standardkonformer und valider Code bekommt einen immer größeren Stellenwert.

http://www.maxdesign.com.au/presentation/sit2003/06.htm

Mehr dazu:

1.4 Verwendet die Seite valides CSS?

Stellen Sie fehlerfreies HTML und CSS sicher, da es anderenfalls zu Darstellungsproblemen kommen kann.

http://www.meyerweb.com/eric/articles/webrev/199904.html

Mehr dazu:

1.5 Nutzt die Seite CSS-Hacks?

Ob Sie Hacks verwenden, ist eine persönliche Entscheidung und abhängig davon, wie gut Sie sich mit Workarounds auskennen und welches Design Sie anstreben.

http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

Mehr dazu:

1.6 Hat die Seite unnötige Klassen oder IDs?

Ich habe festgestellt, dass Entwickler beim Erlernen neue Fähigkeiten oft bei gutem CSS aber schlechtem XHTML landen. Speziell der HTML-Code ist immer häufiger voll von unnötigen DIVs und IDs. Das Ergebnis ist vollkommen inhaltsloses HTML und aufgeblasenes CSS.

http://www.clagnut.com/blog/228/

1.7 Ist der Code gut strukturiert?

Semantisch korrektes Markup verwendet HTML-Elemente entsprechend ihrer Bestimmung. Gut strukturiertes HTML hat für viele Benutzeragenten (Browser ohne Stylesheets, Textbrowser, PDAs, Suchmaschinen, etc.) eine logische Bedeutung.

http://www.maxdesign.com.au/presentation/benefits/index04.htm

Mehr dazu:

1.8 Gibt es tote Links auf der Seite?

Tote Links können Nutzer frustrieren und potentielle Kunden abschrecken. Außerdem können Suchmaschinen durch tote Links vom Indizieren der Seite abgehalten werden.

Mehr dazu:

1.9 Wie sieht es mit der Größe/Geschwindigkeit der Seite aus?

Lass mich nicht warten ... Das geht aus allen Besucherumfragen hervor. Von den langen Ladezeiten mancher Seite können selbst Nutzer von Breitbandverbindungen ein Lied singen.

http://www.websiteoptimization.com/speed/

1.10 Treten JavaScript-Fehler auf?

Im Internet Explorer unter Windows kann man den Debugger aktivieren, sodass jeder JavaScript-Fehler auf der Seite in einem Fenster gemeldet wird. Diese Option findet sich unter »Extras« / »Internetoptionen« / »Erweitert«.

2. Grad der Trennung von Inhalt und Layout

2.1 Verwendet die Seite für die Gestaltung überall CSS (Schriftarten, Farben, Abstände, Ränder, etc.)?

Verwenden Sie Stylesheets, um Layout und Präsentation zu beeinflussen.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-style-sheets

2.2 Sind alle dekorativen Bilder mit CSS realisiert oder erscheinen sie im (X)HTML?

Das Ziel jedes Webentwicklers ist es, sämtlichen Code für die Präsentation aus dem HTML zu entfernen, sodass der Code schlank und semantisch korrekt ist.

http://www.maxdesign.com.au/presentation/benefits/index07.htm

3. Zugänglichkeit (Accessibility) für Nutzer

3.1 Ist das ALT-Attribut für alle beschreibenden Bilder sinnvoll gesetzt?

Stellen Sie ein Text-Äquivalent für jedes Nicht-Text-Element bereit (z. B. über »alt«, »longdesc« oder im Inhalt des Elements).

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-text-equivalent

3.2 Verwendet die Seite relative Einheiten für die Schriftgröße (statt absoluter Einheiten)?

Verwenden Sie relative anstelle von absoluten Einheiten in den Attributwerten der Markup-Sprache und Stylesheet-Property-Werten.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-relative-units

Mehr dazu:

3.3 Wird das Layout beim Vergrößern der Schrift gestört?

Machen Sie einen einfachen Test. Betrachten Sie Ihre Webseite in einem Browser, der das Ändern der Schriftgröße unterstützt. Vergrößern Sie die Schrift und überprüfen Sie, ob das Layout gestört wird. Entwickler sollten nicht davon ausgehen, dass jeder Nutzer mit der Standard-Schriftgröße im Web surft.

3.4 Verwendet die Seite »visible skip menus«?

Dem Nutzer sollte ermöglicht werden, sich wiederholende Navigationslinks zu überspringen.

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Gruppieren Sie verwandte Links, identifizieren Sie die Gruppe (für Benutzeragenten), und ermöglichen Sie das Überspringen der Gruppe, bis Benutzeragenten dies gestatten.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-group-links

... nicht nur blinden Besuchern bereiten zu viele Links in der Navigation Probleme. Denken Sie daran, dass auch jemand mit eingeschränkten motorischen Fähigkeiten schnell überfordert sein könnte.

http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

Mehr dazu:

3.5 Nutzt die Seite zugängliche Formulare?

Für Menschen mit Behinderungen sind Formulare alles andere als einfach. Das Navigieren auf einer Seite mit geschriebenen Text ist eine Sache, zwischen Eingabefeldern hin- und herspringen und Informationen eingeben, eine andere.

http://www.htmldog.com/guides/htmladvanced/forms/

Mehr dazu:

3.6 Nutzt die Seite zugängliche Tabellen?

Kennzeichnen Sie bei Datentabellen Zeilen- und Spaltenüberschriften. Wenn Datentabellen zwei oder mehr logische Ebenen von Zeilen- oder Spaltenüberschriften haben, verwenden Sie Markup, um Datenzellen und Überschriftenzellen einander zuzuordnen.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-table-headers

Mehr dazu:

3.7 Haben die Farben ausreichend Helligkeit/Kontrast?

Sorgen Sie dafür, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe ausreichend kontrastieren, wenn sie von jemandem betrachtet werden, dessen Farbensehen beeinträchtigt ist, oder wenn sie mit einem Schwarzweißbildschirm betrachtet werden.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-color-contrast

Mehr dazu:

3.8 Werden wichtige Informationen nur mit Farben gekennzeichnet?

Sorgen Sie dafür, dass die gesamte mit Farbe dargestellte Information auch ohne Farbe verfügbar ist, z. B. im Kontext oder im Markup.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-color-convey

Grundsätzlich gibt es drei Arten von Farbschwäche: Deuteranop (eine Form von Rot-Grün-Schwäche), Protanop (eine andere Form von Rot-Grün-Schwäche) und Tritanop (eine sehr seltene Blau-Gelb-Schwäche).

Mehr dazu:

3.9 Gibt es verzögerte DropDown-Menüs?

Nutzer mit eingeschränkten motorischen Fähigkeiten könnten mit zu schnell reagierenden Dropdown-Menüs Probleme haben.

3.10 Sind alle Linktexte beschreibend (für blinde Nutzer)?

[Der] Linktext sollte aussagekräftig genug sein, um einen Sinn zu ergeben, wenn er außerhalb seines Kontexts gelesen wird - entweder für sich alleine oder als Teil einer Folge von Links. [Der] Linktext sollte zugleich möglichst knapp sein.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-meaningful-links

4. Zugänglichkeit (Accessibility) für Geräte/Maschinen

4.1 Funktioniert die Seite in neuen und alten Browsern vernünftig?

Bevor Sie ein CSS-basierendes Layout erstellen, müssen Sie sich entscheiden, welche Browser und in welchem Umfang Sie diese unterstützen möchten.

http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Ist der Inhalt der Seite auch ohne CSS zugänglich?

Einige Nutzer besuchen Ihre Seite möglicherweise mit einem Browser ohne CSS-Unterstützung oder mit deaktiviertem CSS. Ist der Inhalt Ihrer Seite gut strukturiert, sollte dies kein Problem darstellen.

4.3 Ist der Inhalt der Seite auch ohne Bilder zugänglich?

Einige Nutzer haben das Anzeigen von Bildern im Browser deaktiviert - insbesondere Nutzer mit einer langsamen Internetanbindung. Der Inhalt sollte auch dann noch zugänglich und verständlich sein.

4.4 Funktioniert die Seite auch in Textbrowsern wie Lynx?

Textbrowser sind eine Kombination aus deaktiviertem CSS und deaktivierten Bildern. Um den Inhalt sinnvoll darzustellen, benötigt ein Textbrowser gut strukturierten Code.

Mehr dazu:

4.5 Lässt sich die Seite vernünftig ausdrucken?

Sie können jedes (X)HTML-Dokument einfach für den Ausdruck gestalten, ohne etwas am Markup zu ändern.

http://www.alistapart.com/articles/goingtoprint/

Mehr dazu:

4.6 Funktioniert die Seite auf Handhelds?

Es ist schwer passende Seiten für Handhelds anzubieten, solange die meisten Handheld-Browser den für sie bestimmten Media-Type (media="handheld") ignorieren. Trotzdem gibt es einige Layouts, die auf aktuellen Handhelds besser funktionieren. Wie wichtig letztendlich die Unterstützung von Handhelds ist, hängt aber hauptsächlich von Ihrem Zielpublikum ab.

4.7 Besitzt die Seite ausführliche Meta-Informationen?

Metadaten sind maschinenlesbare Daten für Webseiten.

http://www.w3.org/Metadata/

Metadaten sind strukturierte Informationen, die eine Ressource beschreiben. Mit anderen Worten, Metadaten sind »Daten über Daten«.

4.8 Funktioniert die Seite in verschiedenen Fenstergrößen des Browsers?

Es ist eine weit verbreitete Annahme unter Entwicklern, dass die durchschnittliche Bildschirmauflösung größer wird. Einige Entwickler setzen heute eine Breite von 1024 Pixeln voraus. Was ist aber mit kleineren Bildschirmen, Handhelds und Handys? Gehören Nutzer solcher Geräte zu Ihrer Zielgruppe und wenn ja, warum werden sie benachteiligt?

5. Grundlegende Benutzbarkeit (Usability)

5.1 Gibt es eine klare visuelle Gliederung?

Gliedern und ordnen Sie den Inhalt einer Seite über Größenverhältnisse, Gestaltung und Anordnung.

http://www.great-web-design-tips.com/web-site-design/165.html

5.2 Sind die Überschriften unterschiedlicher Ordnung leicht unterscheidbar?

Verwenden Sie Überschriften-Elemente, um die Struktur eines Dokuments darzustellen und verwenden Sie sie gemäß der Spezifikation.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-logical-headings

5.3 Besitzt die Seite eine leicht verständliche Navigation?

Ihre Navigation sollte dem Besucher einen Anhanltspunkt darüber geben, wo er sich gerade befindet und wohin er als Nächstes gehen kann.

http://www.1stsitefree.com/design_nav.htm

5.4 Ist die Navigation auf allen Seiten durchgängig?

Besucher können auf Seiten mit einer gleichbleibenden Gestaltung besser navigieren und finden schneller die gewünschten Informationen.

http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 Wird eine konsistente und passende Sprache/Formulierung verwendet?

Eine klare und einfache Sprache fördert die effektive Kommunikation. Komplizierte Formulierungen und komplexe Sätze erschweren das Lesen - insbesondere dann, wenn es nicht die Muttersprache des Besuchers ist.

http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Gibt es eine Sitemap und ist diese leicht zu finden?

Die meisten Sitemaps können die verschiedenen Ebenen der Seitenarchitektur nicht richtig darstellen. In Usability-Tests übersehen Nutzer die Sitemap oft oder können sie nicht finden. Ein anderes Problem ist der Umfang: eine Sitemap sollte eine einfache Übersicht sein und keine weitere Hürde für den Nutzer.

http://www.useit.com/alertbox/20020106.html

5.7 Ist bei größeren Seiten eine Suchfunktion vorhanden?

Auch wenn eine Suchfunktion bei kleineren Seiten nicht notwendig ist und einige Besucher diese nie nutzen werden, stellt die Suchfunktion auf größeren Seiten eine weitere Möglichkeit zur Navigation für den Nutzer dar.

5.8 Gibt es auf jeder Seite einen Link zur Startseite?

Nach dem Betrachten einer Unterseite möchten einige Nutzer gerne wieder zurück auf die Startseite. Die Startseite stellt für sie sozusagen ein Basislager dar, von wo aus sie neue Inhalte erkunden.

5.9 Sind alle Links unterstrichen?

Um Querverweise besser wahrzunehmen, sollten Links farblich und durch eine Unterstreichung gekennzeichnet werden. Nutzer sollten anklickbaren Text leicht erkennen können.

http://www.useit.com/alertbox/20040510.html

5.10 Sind schon besuchte Links entsprechend farblich gekennzeichnet?

Damit der Nutzer nicht unbeabsichtigt bereits besuchte Seite wieder und wieder ansieht, müssen besuchte Links entsprechend gekennzeichnet sein.

http://www.useit.com/alertbox/20040503.html

6. Seitenverwaltung

6.1 Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall funktioniert?

Sie rufen eine nicht vorhandene Seite auf - durch Eingeben der URL oder Klicken auf einen veralteten Link - und finden sich irgendwo im Nirgendwo des Cyberspace wieder. Eine nutzerfreundliche Webseite wird dem Besucher jetzt die Hand reichen, während viele andere Seiten nichts machen und auf die eingebaute Funktionalität des Browser vertrauen, dem Nutzer das Problem zu erläutern.

http://www.alistapart.com/articles/perfect404/

6.2 Hat die Seite lesbare URLs?

Die meisten Suchmaschinen (von ein paar Ausnahmen wie z.B. Google abgesehen) nehmen keine Seite in den Index auf, die ein Fragezeichen oder andere Sonderzeichen (wie das Kaufmanns-Und und das Gleichheitszeichen) in der URL enthalten… wie gut ist eine Seite, wenn sie niemand findet?

http://www.sitepoint.com/article/search-engine-friendly-urls

Vom Standpunkt des Nutzers gesehen, ist die URL eines der schlechtesten Elemente im Web. Kurz, logisch aufgebaut und selbstreparierend sind URLs jedoch durchaus annehmbar.

http://www.merges.net/theory/20010305.html

Mehr dazu:

6.3 Ist die Seite auch ohne »www« erreichbar?

Obwohl es nicht wirklich kritisch und in einigen Fällen gar nicht möglich ist, sollte man dem Nutzer doch die Wahl zwischen beiden Möglichkeiten lassen. Gibt der Nutzer die Domain ohne „www“ ein und bekommt keine Seite angezeigt, ist das für Sie und den Nutzer ärgerlich.

6.4 Hat die Seite ein Favicon?

Bei den meisten Browsern wird in der Adresszeile direkt vor der URL ein kleines Bildchen dargestellt, sei es nun ein blaues „e“ auf einem weißen Blatt (Microsoft Internet Explorer) oder ein anderes Symbol.

http://favicon.de/

Das Favicon ist kein kritisches Element einer Webseite. Ist es jedoch nicht vorhanden, bekommen Sie sicherlich 404-Fehler in ihrem Logfile (Seitenstatistik). Browser wie der IE rufen das Favicon auf, wenn eine Seite in die Favoriten übernommen wird. Gibt es kein Favicon, wird ein 404-Fehler generiert. Gibt es das Favicon, werden solche Fehler reduziert. Das gleiche gilt übrigens auch für die „robots.txt“.

Mehr über diese Checkliste

Diese Checkliste wurde erstmals im Mai 2004 auf der Web Standards Mailinglist als Entwurf gepostet. Sie wurde dann am 5. August 2004 auf der Sydney Web Standards Group präsentiert. Sie ist ebenfalls als PDF-Datei (englisch) erhältlich.

Autor: Russ Weakley, 13. August 2004, Max Design

Übersetzung: Mario Müller, 04. September 2004, Lingo4you

Die Liste in folgenden Sprachen verfügbar: