Ich befinde mich bei der Stiftung „Zugang für Alle“ immer noch in Ausbildung. Teil dieser Ausbildung war das Erstellen einer Webseite, um auch die Accessibility-Anforderungen besser zu verstehen und etwas vertrauter mit dem HTML-Code zu werden. Das Resultat ist auf www.danielemusik.ch zu sehen. Freue mich über Rückmeldungen.

Das Erstellen der Seite begann mit einem Konzept. Ich habe mir überlegt, was ich anbieten will, wen ich erreichen will und wie dies Webdesign mässig umgesetzt werden soll. Bevor ich mit dem Programmieren begonnen habe, habe ich die Texte ausformuliert und reingeschrieben. Im HTML werden die Formatierungen mittels Code direkt im Text eingegeben, dies setzt voraus, dass der Text nicht geändert wird, da man sonst auch jedes Mal den Code für die Formatierung anpassen kann. Die Seite ist so aufgebaut, dass sie mittels CSS gelayoutet wird, somit ist es mir möglich, Änderungen am Design von sehenden Personen machen zu lassen und ich kann mich um den Text und Code kümmern, also um HTML, PHP und eventuell Javascript. Java Script und Php sorgen schlussendlich für etwas Interaktivität auf der Seite. Mit Javascript wurde auf der Seite „Demosounds» ein Player integriert, welcher meine mp3-Dateien abspielen kann.

Das Kontaktformular dagegen besteht aus einer HTML-Seite und einem PHP-Scripct, welches die empfangenen Daten des HTML-Formulars mir per Mail weiterleitet. im HTML-Formular sorgt ein Javascript für die Überprüfung der Gültigkeit der Felder.

Da sich das Web immer weiter entwickelt und auch immer neue Standards geschafft werden um die Kompatibilität von Webseiten mit Screen-Readern zu verbessern und das Nutzererlebnis zu bereichern, habe ich in zwei Seiten meines Webauftritts die Seiten mit Aria-Elementen ausgestattet. Aria ist ein neuer Standard, den es erlaubt eigens programmierte Widgets zugänglich zu machen, wie z.B. Sliders. Mit Aria können z.B. die Rolle eines Sliders, den Wert und sonst wichtige Eigenschaften dem Screen-Reader zugänglich gemacht werden. Aria enthält aber auch sogenannte Landmarks, um die Inhaltsbereiche einer Seite zu kennzeichnen. Folgende Landmarks gibt es bereits:

article

Inhalt, der eigenständig Sinn ergibt, beispielsweise ein Blogeintrag, ein Kommentar in einem Blog, ein Eintrag in einem Forum, usw.

banner

Site-spezifischer Inhalt, beispielsweise der Titel der Seite und das Logo.

complementary

Unterstützender Inhalt für den Hauptinhalt, aber auch für sich alleinstehend wenn er vom Hauptinhalt getrennt wird. Beispielsweise das angezeigte Wetter
auf einem Portal.

contentinfo

Fußnoten, Copyright-Hinweise, Voreinstellungen, rechtliche Hinweise, und ähnliches

main

Inhalt mit direktem Bezug zum Hauptinhalt oder Inhalt der zum zentralen Inhalt des jeweiligen Dokuments führt.

navigation

Inhalt, der Links enthält, um durch das Dokument und/oder zu ähnlichen Dokumenten zu navigieren.

search

Diese Sektion enthält die Suchfunktion um die Website zu durchsuchen.

Somit dürfte in Zukunft mit HTML 5 die Methode mit den versteckten Überschriften wegfallen. Dies erfordert aber, dass der Standard in HTML 5 implementiert wird und von allen Browsern wie Screen-Readern verstanden wird. Bereits mit Jaws Version 7.0 und Firefox kann der Aria-Standard auf meinen Seiten getestet werden, die Seiten, «Über mich» und «Demosounds» enthalten diese Elemente. Betätigen Sie auf den genannten Seiten die Taste „ö“ und hören Sie was der Screen-Reader sagt. In Zukunft sollen Alle meine Seiten, wie auch das Formular mit Aria-Elementen erweitert werden.

Da Aria noch nicht offiziell in eine HTML-Version implementiert ist, wird die Seite nicht validiert werden, wenn Sie Aria-Elemente einbauen. Aria-Elemente stören jedoch nicht und werden bei älteren Browsern einfach ignoriert. Falls Sie jedoch eine valide Seite mit Aria-Elementen erzeugen möchten, können Sie die Aria-Elemente lokal mittels Java-Script in die Seite schreiben lassen. Somit wird der Validator nicht von den Aria-Elementen Kenntnis haben. Eine ausführliche Einleitung sowie ein Javascript zum lokalen Einfügen der Aria-Elemente finden Sie unter folgendem Link.