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/[email protected]/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:

成 人影片 免费观看网站-a片毛片免费观看