Ursprünglich war Barrierefreiheit im Internet auf sehbeeinträchtigte Menschen fokussiert.

Mit den mittlerweile serienmäßig bei vielen Heimcomputern und Mobilgeräten mitgelieferten Sprachgeneratoren werden zunehmend Anwendungen über diesen Personenkreis hinaus relevant, etwa für Autofahrer. Dabei sind die Anforderungen ähnlich; allerdings wären beim reinen Vorlesen eines Artikels weniger interaktive Eingriffe zu erwarten als bei blinden Benutzern, die keine andere Möglichkeit zur Auseinandersetzung mit den Inhalten haben.

Nicht nur für Personen, die nicht sehen können, ist die Berücksichtigung der aufgelisteten Aspekte hilfreich. Auch bei eingeschränktem Verständnis der deutschen Sprache, begrenzter Lesekompetenz oder gesundheitlichen Beeinträchtigungen erleichtert gute Textgestaltung die Aufnahme der Inhalte.

Hinzu kommen Benutzer mit anderen körperlichen oder technischen Besonderheiten, die bei Interaktion und Navigation Schwierigkeiten überwinden müssen.

Grundsätzlich sind für Nicht-Sehende zwei Kanäle relevant:

• Akustisch (Vorlesen)
  • Interaktionen sind möglich durch Unterbrechen und Tastatur-Eingaben zur Navigation (Satz noch einmal vorlesen, zum nächsten Absatz springen, zum Inhaltsverzeichnis springen).
• Braille-Zeilen
  • Hier werden, je nach Modell, 12 bis 80 Schriftzeichen ohne Hervorhebungen taktil dargestellt.
  • Insbesondere Wiki-Quelltext kann damit auch in Einzelzeichen wiedergegeben und bearbeitet werden.

Ein kleiner Bildschirm, wie etwa beim Smartphone, ist im weitesten Sinne ebenfalls eine Einschränkung der Fähigkeiten von Benutzern. Manche Aspekte der für Mobilgeräte geeigneten Gestaltung helfen auch anderen Gruppen.

Den einzelnen Elementen des dargestellten Textes werden durch die Software semantische Eigenschaften zugeordnet.

Insbesondere legt HTML5 (seit etwa 2010) einen Schwerpunkt auf die semantische Strukturierung von multimedialen Dokumenten. Hingegen tritt die ursprünglich auf typografisch-optische Gestaltung ausgerichtete Darstellung von Texten in den Hintergrund; das frühe HTML gab Papiere auf dem Bildschirm wieder. Die semantischen Eigenschaften können zur Navigation und Wiedergabe ausgenutzt werden.

Überschriften mittels der dafür vorgesehenen Syntax werden von der verarbeitenden Software erkannt und direkt in navigatorische Unterstützung umgesetzt. Eine rein optische Hervorhebung, etwa durch Schriftgröße oder Farben, ist jedoch normaler Text und geht unbemerkt im restlichen Text unter. Fett- und Kursivschrift bewirken zumindest eine gewisse (akustisch unterscheidbare) Hervorhebung.

Überschriften kommen in drei Zusammenhängen vor:

• Überschriften von Abschnitten (Wikisyntax: == ... ==)
  • Daraus erstellt die Wiki-Software das automatische Inhaltsverzeichnis.
  • Die meisten assistierenden Technologien generieren aus jeder beliebigen HTML-Seite von sich aus eine navigierbare Baumstruktur.
  • Beim Vorlesen des Gesamt-Textes wird auf eine neue Überschrift und den dadurch eröffneten neuen Abschnitt besonders hingewiesen. Dieser Abschnitt kann damit auch jederzeit übersprungen werden.
• Überschriften von ganzen Tabellen, auch Galerien, fassen den nun folgenden komplexen Inhalt zusammen.
  • Dadurch kann entschieden werden, ob es sich lohnt, dieses komplexe Element zu öffnen oder zu überspringen.
  • Wikisyntax:
    • |+ für Tabellen
    • caption= für Galerien
• Überschriften von Tabellenzellen (im Inneren)
  • Sowohl die Kopfzeile über den Spalten als auch eine Überschriftenzelle am Beginn einer Zeile liefern Informationen zur Bedeutung jeder Zelle.
  • Wikisyntax: !
  • Damit kann für jede Zelle, etwa die fünfte Spalte der 32. Zeile, eine Erläuterung zur Bedeutung des einzelnen Wertes konstruiert werden.
  • Werden diese Informationen nicht semantisch, sondern nur optisch (etwa durch Fettschrift) gegeben, kann auch keine Unterstützung abgeleitet werden.

Siehe allgemein dazu: Hilfe:Listen

• Definitionslisten
  • Eine Definitionsliste ermöglicht eine klare Zuordnung zwischen einem „Term“ (Ausdruck) und dessen Beschreibung oder Definition.
  • In der Wikisyntax wird dies durch Paare von ; und einem oder mehreren : generiert.
  • Fatal ist der Missbrauch:
    • Um auszunutzen, dass Definitionsterme momentan in Fettschrift dargestellt werden. Dadurch entsteht jedoch ungültiges HTML und eine unvollständige Zuordnung, weil jetzt beim Vorlesen die zugehörige Beschreibung des Ausdrucks fehlt.
    • Um auszunutzen, dass die Beschreibung üblicherweise eingerückt dargestellt wird. Dadurch entsteht ebenfalls ungültiges HTML und eine unvollständige Zuordnung, weil jetzt beim Vorlesen fehlt, was eigentlich beschrieben werden soll.
• Aufzählungs- und Definitionslisten zusammenhängend halten, keine neuen Listen für jeden einzelnen Listenpunkt eröffnen.
  • Das geschieht öfters, weil aus Unwissenheit Leerzeilen zwischen den unmittelbaren Abfolgen eingestreut werden. Auch Bilder usw. oder fremde Textblöcke unterbrechen die Auflistung.
  • Eine geschlossene Liste kann schnell durchnavigiert werden oder insgesamt übersprungen werden.
  • Bei neuen Listen für jeden Punkt entsteht jeweils ein Ende der bisherigen Liste und die Ankündigung einer neuen Aufzählung.
  • Das gilt auch für eine erzwungene mehrspaltige Aufteilung.
• Wenn die Zusammenhänge nur optisch durch simulierte Einrückung präsentiert werden, aber nicht semantisch durch die einheitliche Listensyntax, dann müssen sie unverständlich bleiben.

• Inhaltliche Klarheit der Gedanken hilft auch, wenn ein Text später nur vorgelesen wird.
  • Kurze, einfache Sätze helfen Hörenden.
  • Kurze, einfache Sätze helfen Menschen mit kognitiven Einschränkungen.
• Immer ein Inhaltsverzeichnis vorsehen; dieses nicht unterdrücken.
  • Es grenzt den Einleitungsabschnitt von der Vertiefung ab.
  • Der Einleitungsabschnitt soll eine Zusammenfassung des Inhalts der gesamten Seite liefern. Wird keine Grenze zum restlichen Inhalt gezogen, dann haben alle Adressaten ein Problem, die den Text nicht in seiner optischen Aufmachung erfassen können. Alle weiterverarbeitende Software ist auf ein klares Ende eines kurzen Einleitungsabschnitts angewiesen.
• Kursivschrift bewirkt eine besondere Betonung; Fettschrift ebenso.
• Zitate sollen durch Anführungszeichen markiert werden, die dann auch paarweise erkannt werden können.
  • Insbesondere die typografischen Anführungszeichen sind gut zuzuordnen; sie gruppieren paarweise.
  • Zollzeichen usw. lassen sich von Anführungszeichen unterscheiden; deshalb sollten hier die speziellen Zeichen statt der auf der Tastatur verfügbaren Universal-Zeichen " und ' benutzt werden.
  • Kursivschrift ist vieldeutig und keine geeignete Markierung von Zitaten.
  • Die Vorlagen für Zitate, insbesondere für Blockzitate, bieten weitere Möglichkeiten zur Kennzeichnung und Abgrenzung zitierter Textpassagen.
• Gleichförmigkeit zwischen Artikeln unterschiedlicher Thematik:
  • Einheitliche Gliederung der Seiten,
  • einheitliche Schlüsselwörter für Wiki-Fachterminologie,
  • einheitliche Verwendung typografischer Auszeichnungen.

• Farben und Icons dürfen zusätzlich eingesetzt werden, um thematische Bezüge für Sehende auf einen Blick erkennbar werden zu lassen („Eye-Catcher“).
  • Der Inhalt muss jedoch genauso textlich vollständig dargestellt sein.
  • In fortgeschrittener Programmierung, jedoch nicht im Wikitext von Artikeln, ist es möglich, redundante Icons als überflüssig zu kennzeichnen.
• Farbenfehlsichtigkeit
  • „Rot-Grün-Sehschwäche“ betrifft maßgebliche Teile der Bevölkerung.
  • Technische Einschränkungen, Umgebungsbeleuchtung usw. können das Auseinanderhalten von Farbnuancen ebenfalls erschweren.
  • Vorder- und Hintergrundfarben müssen deutliche Kontraste bilden.
  • Unsere allgemeine Hintergrundfarbe ist hell; damit scheidet Gelb als Schrift- und Linienfarbe aus. Blasse Farben sind als Vordergrundfarben ungeeignet, wenn kein entsprechend dunkler Hintergrund sichergestellt wird.
• Sehende Menschen, die jedoch Farben nur schlecht unterscheiden können, könnten Verlinkungen auch mittels persönlichem CSS kennzeichnen. Hier bietet sich die klassische Unterstreichung an.
  • Das ist ein weiterer Grund, warum die Wikitexte keine Unterstreichungen zur Hervorhebung verwenden sollen.
• Die Seite muss in einer reinen Schwarz-Weiß-Darstellung ohne grafische Elemente inhaltlich vollständig sein.
  • Das gilt natürlich nicht, wenn gerade die Bedeutung grafischer Symbole erläutert wird oder ein Gemälde erklärt wird.
  • Wer den Wiki-Text auf einem Schwarz-Weiß-Drucker ausgibt, freut sich ebenfalls über Beschreibungen, die nicht auf unterschiedliche Grauwerte abheben.
• Bei rein grafisch dargestellten Informationen, etwa einer Landkarte, ist jedoch eine textuelle Version nicht mehr möglich und kann nicht durch Vorlesen wiedergegeben werden.
• Schriftgrößen sind anders als Kursiv- und Fettschrift in der akustischen Wiedergabe nicht unterscheidbar.
  • Überflüssig hier zu wiederholen, dass Leser sich ihrer Sehstärke entsprechend eine geeignete Schriftgröße für die Normalschrift konfiguriert haben. Bei starker Verkleinerung (weniger als etwa 85 %) muss damit gerechnet werden, dass Leser mit Augenproblemen nichts mehr entziffern können und zum Einsatz technischer Maßnahmen zur Vergrößerung gezwungen werden. Besser ist es, eine Schriftverkleinerung bei etwa 92 % zu begrenzen; nebenbei auch auf kumulative Effekte zu achten. Noch einfacher ist es, auf jede Schriftverkleinerung für inhaltlich relevante Texte zu verzichten.

• Unsere Bilder können mit Alternativtexten (Alt-Text) versehen werden (siehe dort).^[1]
  • Die Beschreibung sollte ähnlich erfolgen, wie man am Telefon ein Bild beschreiben würde.
  • Das ist ein fundamental anderer Zweck als die Bildlegende (unter den Bildern angezeigt), die nur knapp zusammenfasst, was der Bildinhalt ist. Sie setzt jedoch voraus, dass das Bild selbst gesehen werden kann.
  • Beispiel: „Das Foto zeigt eine Straße in einem Dorf bei Sonnenschein. In der Bildmitte ein Fachwerkhaus mit einem Obergeschoss, darüber zeigt ein Dachgiebel mit einem Fenster zur Straße, rotes mit Ziegeln gedecktes Dach, …“
  • Eine reine Wiederholung der Bildlegende wäre störender als einen wenig mehr liefernden Alternativtext einfach wegzulassen.
• Statt Abkürzungen über Weiterleitungen zu verlinken besser den Klarnamen der Seite verlinken, ggf. die Abkürzung nur zur sichtbaren Beschriftung verwenden.
  • Der tatsächliche Seitentitel wird durch die Wiki-Software generiert und der Verlinkung als Hinweis mitgegeben.
  • Das hilft gleichermaßen allen anderen Lesern, die sich derartige Tooltips anzeigen lassen können und die Abkürzung aufgelöst bekommen, ohne erst nachschlagen zu müssen.
• Tooltips und andere dynamische Elemente, die einer Interaktion bedürfen, behindern jedoch die durchgängige Wiedergabe und sind ansonsten wo immer möglich zu vermeiden.
  • Besucher müssen überhaupt erst einmal wahrnehmen, dass an einer bestimmten Stelle eine unerwartete Zusatzinformation vorhanden ist.
  • Dazu muss die Stelle für Sehende auffallend und unmissverständlich gekennzeichnet werden. Verlinkungen sind automatisch durch die blaue Farbe sichtbar, werden auch beim Vorlesen gesondert angeboten.
  • Sonstige Einschübe als Tooltip erfordern eine Aktivität. Benutzer mit motorischen Problemen oder Bildschirmlupen, auch bestimmten Touchscreen-Darstellungen und -Auflösungen, müssen sich besonders anstrengen, um punktgenau einen Tooltip zu aktivieren.
  • Das ist übrigens ein weiterer Grund, warum Verlinkungen prägnant zu beschriften sind. Das gilt genauso für Weblinks, bei denen eine inhaltsleere Betitelung wie „online“ dazu zwingt, mit einem Zeigegerät punktgenau diese Stelle aufzusuchen und dann an einer anderen Stelle eine Statusanzeige abzulesen, um herauszufinden, auf welche Domain überhaupt verlinkt wird. Mobilgeräte haben weder Zeigegerät noch Statuszeile, und hier gibt es keine andere Möglichkeit, als die Website aufzurufen. Vielmehr soll durch einfaches Sehen des Weblinks oder Vorlesen des unmittelbar sichtbaren Textes allen Nutzern verdeutlicht werden, wohin diese Verlinkung führen wird und wer Anbieter einer externen Webseite ist.
• Keine Redundanz erzwingen.
  • Wenn ein Icon für Sehende und gleichzeitig eine textliche Beschreibung angeboten werden, soll das redundante Icon mit geeigneten technischen Mitteln ausgeblendet werden. (Dies geschieht bereits mittels entsprechender Vorlagen).
  • Nur ein Icon vorzusehen, ohne zusätzliche textliche Beschreibung, würde auch vielen anderen Besuchern Rätsel aufgeben, denen seine Bedeutung nicht klar ist. Icons allein dürfen nicht bedeutungstragend verwendet werden.
  • Die gleiche Überlegung gilt für einen Pfeil → in Verbindung mit Wörtern wie „siehe“ oder einer Verlinkung. Dieser Pfeil ist völlig überflüssig; Blinden wird das vorgelesen als:
    • „Horizontaler Pfeil von links nach rechts siehe …“
    • „Pfeil in West-Ost-Richtung siehe …“
    • Das einzig relevante Wörtchen „siehe“ geht dabei völlig unter. Eine Verlinkung wird auch so geeignet vorgelesen und weder Sehenden noch Nicht-Sehenden muss mittels eines Pfeils erklärt werden, dass eine Verlinkung eine Verlinkung ist. Dies entstammt den papiergebundenen Werken, um zu signalisieren, dass darin unter einem anderen Stichwort nachgeschlagen werden konnte.
• Einfache, klare Sprache verwenden.
  • Keine unnötig komplizierten Schachtelsätze oder überlange Satzreihungen.
  • Dies hilft dem Verständnis beim Hören des vorgelesenen Textes, aber auch im Sinne von „Einfache Sprache“ / „Leichte Sprache“ Menschen mit anderen Schwierigkeiten und schließlich auch allen anderen Besuchern.
  • Wikipedia:Allgemeinverständlichkeit befördert auch die Erfassung der Bedeutung beim Hören wie auch bei verschiedensten Hürden im Verständnis von Texten in deutscher Sprache.
  • Kurz zusammengefasst: Alles, was sehenden Lesern durch einfache und gebräuchliche Ausdrucksweise beim Verständnis hilft, ist umso wichtiger bei der rein akustischen Aufnahme.
• Dynamisch generierte Elemente, etwa Seitenvorschaubilder mittels JavaScript usw., sind grundsätzlich als unzugänglich einzustufen.

Keine strukturellen Elemente für dekorative Zwecke missbrauchen.

• Typischer Fall: „Layout-Tabellen“
  • Das sind Tabellen, die nur deswegen eingefügt werden, um in den Spalten eine bestimmte optische Anordnung von Texten zueinander zu erreichen.
  • Auch auf Mobilgeräten ist das sehr störend, weil statisch und auf die Breite von Desktop-Bildschirmfenstern ausgelegt.
  • Auf schmalen Bildschirmfenstern kann der Bereich rechts nicht mehr angezeigt werden und muss durch Scrollen erschlossen werden, der sofort sichtbare Bereich in den linken Spalten muss massiv gequetscht werden.
• Besser ist Responsives Webdesign. Dieses übermittelt den gesamten Inhalt in geschlossener Form. Im Hintergrund werden Hinweise zu sinnvollen optischen Darstellungen mitgegeben, so dass die sichtbare Aufbereitung intelligent und dynamisch an die jeweilige Situation der Benutzer angepasst werden kann. Genau das bewirkt auch eine barrierefreie Darstellung: Einerseits werden keine überflüssigen statischen Strukturierungen eingefügt, andererseits könnten einige der strukturellen Hinweise auch zur akustischen Aufbereitung und Navigation ausgewertet werden.
• Layout-Tabellen täuschen beim Vorlesen inhaltliche Zusammenhänge vor, obwohl nur ein optisches Design erreicht werden soll.
  • Tabellen sind gegenüber fortlaufenden Elementen schwieriger zu navigieren und in ihrem Zusammenhang zu begreifen.
  • Tabellen sollen nur für strukturierte Daten verwendet werden, nicht aber zum Design. Das hilft sowohl beim Vorlesen wie auch auf Mobilgeräten.
• Um (für Sehende) eine optische Anordnung von Elementen zu erreichen, die eine inhaltliche Beziehung zueinander haben, sollte auf starre Tabellen grundsätzlich verzichtet werden.
  • Damit kann auch bei kleiner Bildschirmgröße (Mobilgerät) eine angemessene Darstellung entsprechend den momentanen Möglichkeiten erzeugt werden.
  • Für Screenreader gilt die physische Abfolge der Elemente im HTML-Dokument.
  • Die Elemente sind als <div> zu spezifizieren und mit geeigneten Techniken (float, grid, flex, table-cell) optisch zueinander in Beziehung zu setzen.
  • Screenreader fragen dann hingegen nicht mehr nach, ob sie eine Datentabelle öffnen oder überspringen sollen.
• Mehrspaltige Listen
  • Eine fortlaufende Liste soll semantisch eine einzige durchgängige Aufzählung sein (siehe Aufzählungslisten).
  • Mit geeigneten Mitteln kann daraus beim Leser eine parallele Anordnung generiert werden, sofern genügend Bildschirmbreite vorhanden ist.
  • Siehe allgemein dazu: Wikipedia:Spaltensatz (auch Mehrspaltigkeit)

Nennenswerte Anteile der Bevölkerung (vermutlich 10 %) haben Einschränkungen der optischen Wahrnehmung:

• Sehschärfe
• Farbenfehlsichtigkeit („Rot-Grün-Blindheit“)

Daraus folgt:

• Die von Benutzern als für sie gut erkennbare Grundschriftart konfigurierte Schriftgröße darf nicht wesentlich unterschritten werden.
• Es dürfen keine Verkleinerungen der Grundschriftgröße der Gesamtseite („Brotschrift“) unter 90 % auftreten.
• Wenn überhaupt textliche Elemente einmal kleiner ausfallen, dann darf es sich nur um sehr kurze Zeichenfolgen handeln, also etwa einige hoch- oder tiefgestellte Zahlen oder Buchstaben, oder um sich vielfach wiederholende Hinweise, die für das Verständnis nachrangig sind.
• Beim Verschachteln von Elementen, etwa durch Vorlagen, muss darauf geachtet werden, dass Verkleinerungen nicht kumulieren.
• Dekorative Beeinflussungen der Schriftgröße müssen immer relativ zur Grundschrift erfolgen; also in den Einheiten em oder % angegeben werden, niemals jedoch in px oder gar in pt (letzteres ohnehin für Papier und nicht für den Bildschirm) – solche absoluten Angaben folgen nicht der Lesereinstellung.
• Die Wahl der Schriftart sollte den Lesern vorbehalten bleiben; insbesondere dürfen keine ausgefallenen Schriften programmatisch gefordert werden – es sei denn, in der Typografie wäre diese Schriftgestaltung selbst das Thema.
• Schrift und Hintergrund müssen gut kontrastieren; Schwarz auf einem allenfalls pastellfarbenen Hintergrund, blaue Verlinkungen jedoch nicht auf blauem Hintergrund, oder Weiß bzw. Gelb vor sehr dunklen Hintergrundfarben.
• Die Forderung nach Kontrast gilt auch für die Farbe grafischer Elemente vor einem Hintergrund.
• Hinzu kommt, dass Rot und Grün als bedeutungsunterscheidende Kennzeichnung nicht eingesetzt werden dürfen; zumindest nicht wenn keine anderen Unterschiede in Symbolen oder Beschriftung sichtbar sind.

Wikitexte müssen noch von Autoren geschrieben und gepflegt werden können, die keine Fachausbildung als Redakteure barrierefreier Texte haben.

• Überladen des Wikitextes mit ausschließlich an Blinde gerichteten Syntax-Elementen, etwa Kennzeichnung jedes einzelnen fremdsprachlichen Wortes, ist kontraproduktiv.
• Aktuelle Screenreader haben ohnehin ein englisches Standardvokabular installiert und kennen deren Aussprache; gleichfalls etwas französisches Vokabular.
• Screenreader erkennen selbst die fremdsprachlichen Wörter und sprechen sie geeignet aus; entnehmen auch der Kontext-Sprache die Zuordnung von eingeschobenen fremdsprachlichen Wortgruppen.
• Wenn hingegen keine Aussprachedefinition hinterlegt ist, dann hilft die Markierung im Wikitext auch nicht und es ist völlig egal, ob mit großem Aufwand ein Wort gekennzeichnet wurde.

Auch viele andere semantische Eigenschaften aus HTML sind für die direkte Verwendung im Wikitext ungeeignet.

• Sie sind allenfalls über Vorlagen im Hintergrund einzubringen.
  • Beispielsweise transportiert die Vorlage:Zitat spezielle Elemente zur eindeutigen Deklaration des buchstäblich zitierten Textbereichs.
• Falsch verstandene Fürsorglichkeit durch Einbringen völlig unbekannter oder von der MediaWiki-Software nicht akzeptierter Syntaxkonstrukte verwirrt nur die anderen Autoren. Dies kann auch nicht gepflegt werden, und der beabsichtigte Sinn bleibt unklar.

Unsere Wikitexte, praktisch alle Artikel werden von Freiwilligen ohne spezielle Ausbildung als Mediengestalter erstellt; dass die Texte vielerlei Unzulänglichkeiten haben mögen, ist unvermeidlich. Das betrifft inhaltliche Präzision wie auch die typografische Formatierung wie auch die Wikisyntax.

• Accessible Rich Internet Applications – internationaler Software-Standard zur Ausstattung geeigneter Dokumente
• Wikipedia:Barrierefreiheit – Projektstandards
• Hilfe:Blinde Benutzer – aus der Perspektive der Hörenden und Tastenden Wiki-Seiten nutzen
• Wikipedia:BIENE – internes Projekt zur Verbesserung unserer Seiten
• Wikipedia:Wie schreibe ich gute Artikel – fließt auch in die Texterstellung ein
• Phabricator – Workboard: #a11y

Extern (englisch):

• Accessible Rich Internet Applications (WAI-ARIA). w3.org; aktueller Standard (englisch)
• WAI-ARIA Authoring Practices. w3.org; inhaltliche Empfehlungen (englisch)

1. ↑ Work in Progress: Benutzer:Lupe/Alt-Text-Beispiele