Web 2.0 und Barrierefreiheit/Gruppe W.A.R.M.

Aus Wikiversity

Gruppenmitglieder: R.Michlik, F.Alpermann, C.Riedel, S.Weichel

Themen: W3C-Kompatibilität von HTML und CSS, Motorische Störung, Kognitive Störungen, Sehschwä}=

W3C Kompatibilität (HTML und CSS)[Bearbeiten]

Bewertungsinstrumente[Bearbeiten]

  • W3C HTML-Validator
  • W3C CSS-Validator
  • Web-Guidelines 2.0 - Prioritäten




Xing - Professionelles Networking weltweit[Bearbeiten]

Website: http://www.xing.com/de/

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: HTML 5
  • Konformität: ja, 1 Warnung (HTML 5 noch kein offizieller W3C-Standard)
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]

  • Konformität: nein, 90 Fehler (zumeist auf CSS 3.0-Standard basierend)
  • Testergebnis




Wikipedia - Deutschland[Bearbeiten]

Website: http://de.wikipedia.org

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: XHTML Transitional 1.0
  • Konformität: ja
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]

  • Konformität: nein, 3 Fehler (CSS 3.0 Eigenschaften benutzt)
  • Testergebnis




studiVZ - Deutschlands größtes soziales Netzwerk[Bearbeiten]

Website: http://www.studivz.net/

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: XHTML Transitional 1.0
  • Konformität: ja
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]




Typo3[Bearbeiten]

Website: http://typo3.org/

Ergebnis HTML-Validierung[Bearbeiten]

Ergebnis CSS-Validierung[Bearbeiten]

  • Konformität: nein, 3 Fehler (CSS 3.0 Eigenschaften benutzt)
  • Testergebnis




Strickforum - Stricken und Strickdesign[Bearbeiten]

Website: http://strickforum.de/forum/

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: HTML 4.01 Transitional
  • Konformität: nein, 2 Fehler, 150 Warnungen (falscher Doctype)
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]

  • Konformität: nein, 8 Fehler (Eigenschaften, die nur vom Internet Explorer interpretiert werden können)
  • Testergebnis




neu.de - hier verliebt man sich[Bearbeiten]

Website: http://www.neu.de/

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: XHTML Transitional 1.0
  • Konformität: nein, 11 Fehler, 1 Warnung (Javascript-Fehler)
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]

  • Konformität: CSS lässt sich nicht überprüfen
  • Testergebnis




mindfactory - einfach besser[Bearbeiten]

Website: http://mindfactory.de/

Ergebnis HTML-Validierung[Bearbeiten]

  • Doctype: HTML 4.01 Transitional
  • Konformität: ja
  • Testergebnis

Ergebnis CSS-Validierung[Bearbeiten]


motorische Sörungen[Bearbeiten]

Übersicht[Bearbeiten]

Standard Xing StudiVZ Wikipedia typo3.org Strickforum neu.de Mindfactory mixxt.de
Tabulatornutzung schlecht mittel schlecht gut gut mittel schlecht schlecht
Maus"komplett"steuerung ja nein ja ja nein nein ja ja
Doppelklicks nein nein nein nein nein nein nein nein
Scrollen gut gut mittel gut mittel gut schlecht gut
Timeout nein nein nein nein nein nein nein nein
Schaltflächen gut mittel schlecht gut schlecht mittel mittel schlecht
Popups nein nein nein nein nein ja nein ja
Link zur Seite xing studivz wikipedia typo3 strickforum neu.de mindfactory mixxt

In die Bewertung eingehende Faktoren:

Tabulatornutzung: Sind die Inhalte der Seite auch nur unter Nutzung der Tastatur (Tabulator und Enter) schnell zu erreichen, für diese Nutzung sinnvoll angeordnet und sichtbar hervorgehoben.

Maus"komplett"steuerung: Inhalte sind zum größten Teil mit der Maus abrufbar und bietet so für Nutzer von Trackball, Tasten-Maus und Kopf-Maus eine gute Möglichkeit der Nutzung (Bildschirmtastatur zum einloggen oder für die Eingabe persönlicher Daten).

Doppelklicks: werden Anwendungen auf Java oder Flash Basis genutzen die Doppelklicks nutzen, wird mangelnde Feinmotorik und Reaktionsschnelligkeit zu einem Hinderniss.

Scrollen: große Seiten mit langen Scrollwegen sind eine große Schwierigkeit bei motorischen Störungen. Horizontale Scrollwege sollten ganz vermieden werden. Die Beurteilung hängt vom Kontext des jeweiligen Angebots ab.

Timeout: Menschen mit motorischen Störungen sind nicht so schnell bei der Nutzung des Computers wie Menschen ohne Handicap. Sollten z.B. Webseiten eine Timeoutfunktion nutzen kann dies zu Benachteiligungen führen.

Schaltflächen: große Schaltflächen machen es einfacher Menupunkte oder Links zu nutzen. Bei Untermenus sollten die sollten die Scrollwege zu diesen Schaltflächen möglichst kurz und großzügig bemessen angelegt sein.

Popups: Werbeeinblendungen oder Eigenwerbung/ Registrierungsaufforderungen sollten vermieden werden um die Bedienung für die Nutzer zu vereinfachen.

kognitive Störungen[Bearbeiten]

In die Bewertung eingehende Faktoren:

  • Gute Farb- und Schriftgestaltung
  • Wegweiser, Statusangaben, Pfadangaben (z.B. Breadcrumbs) vorhanden
  • Anpassbares (dynamisches) Layout
  • Übersichtlichkeit (nicht überladen, u.ä.)
  • Keine störenden Animationen (z.B. durch Werbung)
  • Alternative (helfende) Darstellungen (z.B. Piktogramme) vorhanden


Xing[Bearbeiten]

  • farblich nicht überladen, Schrift gut erkennbar
  • keine Wegweiser oder ähnliches vorhanden, somit Navigation schwierig
  • Layout nicht anpassbar, teilweise mit Fehlern, welche den Seitenaufbau nicht nachvollziehbar verändern
  • Übersicht über den aktuellen Seiteninhalt gut, aber Navigation teilweise nur schwierig zu erkennen
  • Seiten nicht überladen
  • Keine Werbung vorhanden
  • Animationen nur durch Interaktion auslösbar und nicht störend
  • Unterstützende Bilder zu einigen Themen vorhanden und (größtenteils) eindeutig und nachvollziehbar


Wikipedia[Bearbeiten]

  • farblich nicht überladen, Schrift gut erkennbar
  • Angabe der Kategorien des jeweiligen Themas, teilweise jedoch überladen
  • Weiterhin Quellen, weiterführende Verweise und Inhaltsverzeichnis zu dem jeweiligen Thema; jedoch keine Statusangaben, Pfadangaben oder ähnliches (außer Kategorien)
  • Layout passt sich nur an Fenstergröße an, sonst keine allgm. Änderungen möglich
  • Teilweise wirken die Themen überladen und unübersichtlich
  • Keine Werbung, keine Animationen
  • Nur wenige Bilder um Verweise zu unterstützen (resultiert u.a. aus der Anzahl der Verweise), nachvollziehbar


StudiVZ[Bearbeiten]

  • farblich nicht zu aufdringlich trotz starkem rot, Schrift gut erkennbar
  • keinerlei Wegweiser, Pfadangaben oder ähnliches vorhanden
  • statisches Layout, Schriftgröße änderbar, Layout aber nicht
  • Design nicht sehr übersichtlich, trotzdem nicht überladen
  • Keine Werbung, keine Animationen
  • Nur wenige Bilder um Verweise zu unterstützen, diese sind jedoch gut nachvollziehbar


Typo3[Bearbeiten]

  • neutrale farbliche Gestaltung, Schrift gut erkennbar
  • Pfadangabe durch das Menü, jedoch nicht immer (dann sogar ohne sichtbare Möglichkeit zur Hauptseite zurückzugelangen)
  • Statisches Layout, Schriftgröße änderbar, dabei kann es jedoch zu unerwünschten Verschiebungen im Layout kommen
  • Neutrales Design, wenig übersichtlich, nicht überladen
  • Keine Werbung, keine Animationen
  • Keine Bilder zur Unterstützung von Verweisen und Themen vorhanden


Strickforum[Bearbeiten]

  • neutrale farbliche Gestaltung, Schrift gut erkennbar
  • vollständiger Pfad wird mit angegeben
  • Statisches Layout, änderbare Schriftgröße beeinflusst nicht das Layout
  • Einfaches „Forums-Design“, kaum/keine Übersicht in den einzelnen Kategorien, für ein Forum nicht überladen
  • Keine Werbung, keine störenden Animationen
  • Bilder für den Themenstatus + Legende im unteren Teil der Seite, Symbole teilweise nur durch Legende eindeutig


neu.de[Bearbeiten]

  • Neutrale Farbgestaltung, Schrift gut erkennbar
  • Verdeutlichung des gewählten Menüpunktes, sonst keine Angaben
  • Statisches Layout, änderbare Schriftgröße beeinflusst nicht das Layout
  • Relativ übersichtliches Design, jedoch stark komprimiert, nicht überladen
  • Keine Werbung, keine Animationen
  • Einige Bilder zur Unterstützung von Verweisen und Themen vorhanden, nachvollziehbar


Mindfactory[Bearbeiten]

  • farbliche Gestaltung wirkt etwas aufdringlich, Schrift, gut erkennbar
  • vollständiger Pfad wird mit angegeben als Breadcrumb und im Menü
  • Statisches Layout, Schriftgröße änderbar, dabei kann es jedoch zu unerwünschten Verschiebungen im Layout kommen
  • Unübersichtliches Design, Inhalte überladen
  • Eigenwerbung und Werbung für Produkte vorhanden, aber nicht aufdringlich, keine Animationen
  • Produktbilder und Warenkorb einzige Bilder zu Unterstützung von Verweisen (Minimum für Online-Shop)


mixxt.de[Bearbeiten]

(comming soon)


Bewertung[Bearbeiten]

Die Bewertung erfolgt nach dem Schulnotensystem ( 1 = sehr gut, ... , 6 = ungenügend ).

Xing Wikipedia StudiVZ Typo3 Strickforum neu.de Mindfactory mixxt.de
Farb- und Schriftgestaltung 2 3 2 2 2 2 3 -
Statusangaben 4 2 6 3 2 4 1 -
Layout 4 3 3 4 3 3 4 -
Übersichtlichkeit 2 3 4 3 3 3 5 -
Animation 2 1 1 1 1 1 1 -
Darstellungen 3 3 4 6 3 3 5 -

Sehschwäche[Bearbeiten]

Sehschwäche ist eine Bezeichnung für ein sehr „schlecht sehendes“ Auge, wobei der Grund eine starke Fehlsichtigkeit oder auch eine Krankheit sein kann. Eine Sehschwäche ist ein medizinisch nicht heilbarer Zustand. Volkstümlich aber falsch wird eine Fehlsichtigkeit manchmal Sehschwäche genannt.


Xing Wikipedia StudiVZ typo3.org Strickforum neu.de Mindfactory mixxt.de
Alternativtext schlecht (nur wenig) gut (teilweise vorhanden) gut (teilweise vorhanden) schlecht (nur wenig) sehr schlecht (nicht vorhanden) sehr schlecht (nicht vorhanden) sehr gut (fast überall) sehr schlecht (fast nicht vorhanden)
Pop-Ups nein nein nein nein nein ja nein nein
Besuchte Links farblich gekennzeichnet nein ja nein nein nein nein nein nein
Relative Schriftgrößen ja ja nein nein ja nein nein nein
Kontraste gut gut gut gut befriedigend befriedigend befriedigend gut