Barrierefreie Webseiten gestalten
Trainer: Marcel Bulla
In diesem Kurs werden Sie lernen, wie man eine HTML-Webseite für sehbehinderte und blinde Menschen gestalten kann. Der Kurs basiert sich auf den aktuellen Richtlinien zur barrierefreien Webgestaltung und beinhaltet HTML-Codeabschnitte, praktische Beispiele, kurze Übungen und Einsendeaufgaben. Mit Hilfe interaktiver Tests haben Sie im Laufe des Kurses immer wieder Gelegenheit, Ihren Lernfortschritt zu kontrollieren. Den Abschluss des Kurses bildet ein Projekt, in dem Ihre eigene barrierefreie Webseite gestalten. Der Kurs enthält zudem umfangreiches Zusatzmaterial für interessierte Fortgeschrittene. /p>
Der Kurs richtet sich vornehmlich an sehende Interessenten, die lernen wollen, wie Webseiten für blinde Kollegen oder Kunden beschaffen sein sollten. Er ist grundsätzlich natürlich auch für selbst blinde Anwender zugänglich, die jedoch an einigen Stellen, wenn es zum Beispiel um Farbgestaltung oder Bildbeschreibungen geht, an ihre Grenzen stoßen werden.
Inhaltsverzeichnis
- Startseite
- Kapitel Einführung
- 1: Barrierefreiheit
- Kapitel Wahrnehmbarkeit
- 2: Bilder
- 3: Video
- 4: Textab[BILD]ungen
- 5: Übung 1
- 6: Vergrößerung und Textformatierung
- 7: Weitere Formatierungsanweisungen
- 8: Übung 2
- 9: Einsendeaufgabe 1
- Kapitel Bedienbarkeit
- 10: Titel
- 11: Überschriften
- 12: Beschriftung mit Labels
- 13: Übung 3
- 14: Verweise
- 15: Navigation
- 16: Übung 4
- 17: Tastatur und Tastenkürzel
- 18: Animationen und multimediale Inhalte
- 19: Datenverluste vermeiden
- 20: Übung 5
- 21: Einsendeaufgabe 2
- Kapitel Verständlichkeit
- 22: Formulare
- 23: Fehlerbehandlung
- 24: Vorhersagbare Webseiten
- 25: Hilfsangebote und Datenrückruf
- 26: Übung 6
- 27: Sprache
- 28: Sprachstil
- 29: Einsendeaufgabe 3
- Kapitel Robustheit
- 30: Syntaxanalyse
- 31: Steuerelemente
- 32: Steuerelemente für Formulare
- 33: Übung 8
- 34: Kombinierte Steuerelemente
- 35: Statusmeldungen
- 36: Einsendeaufgabe 4
- 37: Projektarbeit
- Abschluss-Seite
Schnupper-Seite (Seite 27)
"Sprache ist die Quelle aller Missverständnisse."
Die große Mehrheit von den Webseiten heutzutage sind auf Englisch. Sie können aber Ihre Webseite (oder manche Absätze davon) natürlich auch in anderen Sprachen schreiben, beispielsweise in Deutsch - oder sogar die Sprachen mischen.
Die Sprache, in der Ihre Webseite geschrieben wird, spielt eine sehr große Rolle für assistierende Technologien. Wenn Sie die Sprache richtig kennzeichnen, können auch Screenreaders die Aussprache, Akzent und Syntax richtig ausgeben. Die Braillezeile kann sich auch an die Sprache anpassen, beispielsweise wenn die Buchstaben anders sind - in griechisch zum Beispiel.
Sprache von einer ganzen Seite bestimmen
Es ist sehr leicht die Sprache einer Seite festzulegen! Sie müssen nur in das <html>-Tag das Attribut lang= einfügen und als Wert die Sprache der Seite angeben. Die Sprache wird durch einen ISO Code angegeben, beispielsweise "de" für Deutsch, "en" für Englisch und "fr" für Französisch. Hier können Sie die Codes von allen Sprachen finden. Ein Beispiel für die Implementation folgt:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Beispielseite auf Deutsch</title>
</head>
<body> Diese Seite ist in Deutsch geschrieben. Sie sehen
im Anfangstag, dass der Code für Deutsch "de" ist.
</body>
</html>
Bedenken Sie, wenn Sie die Sprache der ganzen Seite auf Deutsch setzen, werden automatisch alle Worte, die ursprünglich nicht in Deutsch sind, oder als Fremdworte oder Fachbegriffe ins Deutsche integriert wurden, trotzdem als Deutsch interpretiert werden. Das kann natürlich zu komischen Aussprachen von manchen Wörtern führen. Es gibt aber auch für dieses Problem eine sehr leichte Lösung!
die Sprache einzelner Absätze festlegen
Das Attribut lang= kann nicht nur im <html>-Tag benutzt werden, sondern in jedem HTML-Element. Das bedeutet, dass Sie auch nur die Sprache von einzelnen Textblöcken ändern können. Wir schauen uns einen Absatz mit dem <p>-Element an. Nehmen wir an, dass die Sprache der Seite wie im oberen Beispiel mit "de" auf Deutsch festgelegt wurde:
<p>So wie Shakespeare geschrieben hat:</p>
<p lang="en">"To be, or not to be, that is the question."</p>
Wir haben an erster Stelle einen Satz in Deutsch. Da die Sprache der gesamten Seite auch in Deutsch ist, müssen wir nichts Weiteres hinzufügen. Darunter möchten wir aber ein Zitat auf Englisch schreiben. Deswegen fügen wir in das <p>-Tag das Attribut lang= ein und setzen die Sprache durch den ISO-Code "en" auf Englisch. Beachten Sie, dass die Sprache nur innerhalb dieses Absatz-Elementes geändert wird. Wenn wir den Tag schließen und weitere Elemente folgen, ist deren Sprache wieder Deutsch.
Sprache von einzelnen Wörtern bestimmen
Es kann aber natürlich auch sein, dass Sie keinen ganzen Absatz in einer anderen Sprache schreiben möchten, sondern nur ein Wort oder einen Ausdruck innerhalb Ihres deutschen Textes. Das ist natürlich auch möglich. Dafür benötigen wir das Element <span>. Wie zuvor schreiben wir in das Anfangstag das Attribut lang= und legen die Sprache mit dem ISO-Code fest. Beispielsweise:
<p>Die Französische Region <span lang="fr">Val de Loire</span> produziert sehr guten Wein.</p>
In diesem Beispiel setzen wir die Sprache des <span>-Elementes durch den ISO Code "fr" auf Französisch. Ebenso wie zuvor, gilt die Sprachänderung nur innerhalb dieses Elements. Der Rest des Textes im Element <p> wird auf Deutsch interpretiert, da Deutsch die Sprache unserer Seite ist.
Sie sollten die Sprache nur für Fremdwörter ändern, die auf der Sprache der Seite nicht im Alltag benutzt werden. Beispielsweise das Wort "Restaurant": obwohl es ursprünglich auf Französisch ist, wird es so oft auf Deutsch benutzt, sodass es Teil der deutschen Sprache geworden ist und von jedem verstanden wird.
Legen Sie immer die Sprache Ihrer Seiten fest, so dass assistierende Technologien den Inhalt richtig ausgeben können. Sie erreichen das durch das Attribut lang=, das in jedes HTML-Element eingefügt werden kann. Sie müssen dazu den ISO-Code der Sprache als Wert des Attributs angeben.