PERLI.NET und Accessibility

von thp am 14. November 2007 um 15:40 Uhr

Als kleine Übung für die Uni (in GSI) sollten wir die Accessibility einer österreichischen Website evaluieren, und zu einigen Gesichtspunkten Schulnoten vergeben, hier eine kleine Aufstellung, wie PERLI.NET abgeschnitten hat, und was ich gleichzeitig verbessert habe, während ich die Seite evaluiert habe.

Standardkonformität (Note: 1)

Die Top-Level-Seiten sind nach einigen kleines Patches nun wirklich wieder valides XHTML 1.1, wobei es eine kleine Warnung gibt (text/html als Content-Type statt application/xhtml+xml). Das werde ich jedoch momentan noch nicht beheben, weil alte Browser mit "application/xhtml+xml" nichts anfangen können, und die Seite womöglich herunterladen wollen anstatt sie anzuzeigen.

Die CSS Stylesheets werden in allen Top-Level-Seiten als korrekt validiert.

Bedienbarkeit mittels Tastatur (Note: 1)

Ist der Focus beim Tabben deutlich sichtbar?
Unter Firefox kann man mit F7 das sogenannte "Caret Browsing" einschalten, was uns einen Cursor liefert, um die Website per Tastatur zu durchwandern. Der Focus beim Tabben ist sowohl bei Text-Links als auch in der Navigations-Leiste gut sichtbar.

Wie viele Tabsprünge braucht man denn, um zum eigentlichen Inhaltteil zu gelangen?
Aufgrund dieser Evaluation habe ich Sprungmarken zur Seite hinzugefügt, damit kommt man mit 2x Tab, dann Enter zum Inhalt. Davor: Wenn man nicht eingeloggt ist, ca. 10 Tabsprünge, bis man auf der Startseite bei der Überschrift des ersten News-Beitrags ist. Ansonsten je nach Anzahl der eingeloggten User ~15 Tabsprünge, weil man die User-relevanten Links und die Navigationslinks alle zuerst mit Tab anspringen muss, bevor man zum Inhalt kommt.

Passiert es, dass der Focus komplett verloren geht?
Nein. Das würde meiner Meinung nach nur bei Flash-Animationen oder viel Javascript-Magic geschehen - gibt's auf dieser Seite nicht.

Sind alle interaktiven Elemente mit Tab erreichbar und können Sie auch mit Enter aktiviert werden?
Ja. Die Such-Eingabefelder auf den Top-Level-Seiten "News", "Fotos" und "Events" können mit Enter abgeschickt werden, lt. Frau Papst kann dies aber ein Problem darstellen mit Screen Readern. Vielleicht sollte hier noch ein (per CSS versteckter) Submit-Button zu den Suchformularen hinzugefügt werden.

Falls Sprungmarken da sind: Werden diese beim tabben eingeblendet?
Habe die Sprungmarken wegen dieser Evaluation eingebaut, weil die sehr hilfreich und funktionell sind (Idee von hier mit einigen Markup-Vereinfachungen). Vor dieser Evaluation waren keine Sprungmarken vorhanden, jetzt gibt's die, und man kann sie mit "Tab" einblenden. Momentan gibt's zwei Sprungmarken: Die erste führt direkt zum Inhalt der aktuellen Seite (und überspring damit alle Navigations-Elemente) und die zweite verlinkt zur "About"-Seite. Probiert es mal aus!

Beschriftung von Grafiken (Note: 2)

Wie verständlich und bedienbar ist die Seite, wenn im Browser Grafiken ausgeschaltet werden?
Die Seite bleibt verständlich und bedienbar. Natürlich werden die Fotos nicht angezeigt. Bei Grafiken, die rein zur Dekoration dienen, ist der Alt-Text der leere String (also alt="" statt kein alt-Attribut, das ja zwingend erforderlich ist). In einer Fotoalbum-Übersicht (Beispiel) wird statt dem jeweiligen Bild "Foto X" angezeigt, wobei X die Nummer des Fotos im Fotoalbum ist.

Note 2, weil man bei den Fotos vielleicht bessere Alt-Attribute einfügen könnte.

Skalierbarkeit (Note: 3)

Wie verhält sich die Seite, wenn man die Darstellung der Schrift vergrößert?
Schrift wird wie erwartet vergrößert. Die Navigation wird (wenn Bilder angezeigt werden) nicht vergrößert (im Firefox), weil die Navigations-Elemente Bilder sind. Wenn man die Bildanzeige deaktiviert, wird die Navigation auch vergrößert (weil diese dann als normaler Text dargestellt wird). Dieser "Bug" in Firefox (Bilder werden bei Text-Zoom (Strg+[+]) nicht mitvergrößert) sollte allerdings in Firefox 3 behoben werden (Bugzilla-Eintrag), außerdem gibt's für Firefox/Mozilla auch ein Image Zoom Add-On, mit dem das jetzt schon realisiert werden kann, das Add-On muss aber zusätzlich installiert werden.

In Opera werden Grafiken bei Zoom bereits vergrößert.

Lässt sich die Schrift überhaupt vergrößern?
Ja, über die Menübar im Browser oder die Tastatur-Shortcuts.

Gibt es Überlagerungen?
Bei normalem Zoom nicht (bis ~ 300%). Bei extrem hohem Zoom-Faktor (500%) überschneiden sich ein paar Textteile mit der Navigation.

Wie weit lässt sich der Viewport verkleinern, bis ein horizontaler Scrollbalken auftaucht?
Bei normalen Content-Seiten: Unter 600 Pixel taucht ein horizontaler Scrollbalken auf, ab 600 Pixel geht sich alles schön aus. Bei Foto-Seiten sollte es eine Auflösung von etwas mehr als 800 Pixel in der Breite sein.

Note für die Skalierbarkeit ist 3, weil momentan die Navigation nicht gezoomt werden kann (in Firefox), weil es Überlagerungen bei sehr hohen Zoom-Faktoren gibt und weil der Viewport bei den Foto-Seiten mehr als 800 Pixel in der Breite sein sollte (ansonsten gibt's einen horizontalen Scroll-Balken).

Quelltext-Eignung für Screen Reader (Note: 2)

Ist sauberes und hierarchisches Markup verwendet worden? (h1, p, Listen, ...)
Überschrift ("perli.net"-Logo) ist <h1>, der Rest der Seite ist hierarchisch <h2> und <h3>. Für Navigation wurde zwar keine Liste verwendet, dafür aber normale links (Grund: Der Internet Explorer hat Probleme beim Rendern der Navigations-Bar, wenn es eine Liste wäre); Für Absätze werden Paragraph-Tags verwendet verwendet, außer bei den News-Beiträgen, das hat aber praktische Relevanz (Die News-Einträge werden in Plaintext verfasst, und dann werden die Newlines in Linebreak-Tags umgewandelt).

Sind Tags auch geschlossen?
Ja, was bei validem XHTML1.1 ja Pflicht ist.

Note für die Quelltext-Eignung für Screen Reader ist 2, weil die Navigation keine Liste ist und weil in den News-Beiträgen für Absätze keine Paragraph-Tags, sondern Linebreaks verwendet werden.

Noten-Schnitt = 1.8 = Schulnote 2 für PN-A11y, das geht :)