Benutzer:CarlKnutsen/Barrierefreiheit

Aus Piratenwiki
Wechseln zu: Navigation, Suche

Barrierefreiheit

Guidelines für Entwickler

Orientieren kann man sich an einem WordPress-Theme namens Accessible

Roles/Landmarks nach WAI-ARIA

  • 1x den Inhalt der Seite umgeben mit: (*)
<div role="main">...</div>
  • Alle Navigationsleisten (oben die Hauptleiste und eventuell rechts Widgets mit Linklisten) umgeben mit: (*)
<div role="navigation">...</div>
  • Alle Logos umgeben mit: (*)
<div role="banner">...</div>
  • Das Sucheingabefeld umgeben mit: (*)
<div role="search">...</div>
  • Widgets oder andere Elemente (wie z.B. unten der "Dies könnte Sie auch interessieren"-Bereich), die sich lose auf den Inhalt bezuehen, aber von ihm losgelöst irgendwo anders auf der Seite stehen, umgeben mit:
<div role="complementary">...</div>

(*) Wenn um den jeweiligen Inhalt schon ein div reicht, kann dies natürlich auch mit dem Attribut versehen werden. Ebenso ist das role-Attribut in anderen Elementen wie <nav role="navigation">...</nav> gültig.

Anstelle / zusätzlich zu den role-Attributen sind auch html5-Elemente möglich wie momentan schon bei uns auf der Seite verwendet. Hier wird das 1:1 Mapping erklärt. Wir müssen dann mal testen, wie sich die Elemente auswirken. Z.B. sind die Social-Links in einem aside-Element eingebettet und werden daher von meinem ScreenReader als Zusatzinfo zum Inhalt der Seite gewertet. Meines Erachtens sollte das aber eher eine ausgewiesene Navileiste sein. (role="navigation")

Spezielle Sprung-Links

  • 1x soll folgender versteckter Jumplink "Zum Inhalt springen" eingefügt werden:
<div class="skip-link screen-reader-text">
<a title="Skip to content" href="#content">Skip to content</a>
</div>

und zwar innerhalb der Hauptnavigation: 

...... <nav id="main-nav"> {JUMPLINK} <div class="menu-top-menu-container"> ...........
  • Gleiches 1x zwischen Inhaltsbereich und Kommentaren einen "Zurück zum Anfang"-Link:
<a class="skip-content screen-reader-text" href="#wrapper">Zum Anfang springen</a>
  • Oben verwendetes CSS für versteckte Links:
 .skip-link {
   position: static;
 }
 .screen-reader-text {
   display: inline;
   left: -9999px;
   top: auto;
 }

Strukturierte Überschriften

hX-Tags sollten den Inhalt der Seite sinnvoll strukturieren, und den Screen-Reader bei der Präsentation eines Inhaltsverzeichnisses unterstützen.

  • h1-Tag: Sollte den Seitentitel enthalten und nur einmal verwendet werden.
  • h2-Tag: Sollten inhaltlich voneinander getrennte Abschnitte innerhalb der Seite markieren. Beispiel: Kommentare, Informationen in der Sidebar, Informationen im Footer und Abschnitte im Text (bei Variante 1). Variante 2: Wie Variante 1, markiert allerdings einen Artikeltitel.
  • h3-Tag: Für Unterabschnitte im Text und Betitelung von Widgets.
  • h4,h5,h6-Tag: Weitere Unterabschnitte im Text.

Variante 1

  <h1> Seiten- bzw. Artikeltitel </h1>
    [Artikeltext bzw. -inhalte]
    <h2> Kommentare </h2>
      [Inhalt Kommentare]
    <h2> Weitere Informationen Sidebar </h2>
      <h3> Widget 1 Überschrift </h3>
        [Inhalt Widget 1]
      <h3> Widget 2 Überschrift </h3>
        [Inhalt Widget 2]
          ...
    <h2> Weitere Informationen Footer <h2>
      ...

Variante 2

  <h1> Seitentitel </h1>
    <h2> Artikeltitel </h2>  
      <h3> Abschnitt 1 </h3>
        [Inhalte]
      <h3> Abschnitt 2 </h3>
        [Inhalte]
    <h2> Kommentare </h3>
      [Inhalt Kommentare]
    <h2> Weitere Informationen Sidebar </h2>
      <h3> Widget 1 Überschrift </h3>
        [Inhalt Widget 1]
      <h3> Widget 2 Überschrift </h3>
        [Inhalt Widget 2]
          ...
    <h2> Weitere Informationen Footer <h2>
      ...

Links

  • Links müssen per Tab durchselektierbar sein. Darüber hinaus sollte der Fokus bei einer Selektion nicht versteckt werden bzw. die Selektion visuell sichtbar sein.
  • Zu vermeiden sind Links auf nichtssagenden Wörtern wie "hier", "hinter diesem Link" oder "weiterlesen". Links sollten immer auf den Wörtern liegen, auf die sich der Link bezieht.
  • Textmarkierungen wie Fettdruck, Kursivtext, Unterstrichener Text oder Durchgestrichener Text werden von Screen-Readern oft nicht beachtet und einfach überlesen.

Sonstiges

  • Bei Verwendung von Captchas welche verwenden, bei denen auch eine auditive Ausgabe möglich ist.
  • Bilder mit inhaltlichen Aussagen sollten nicht ins CSS verlagert werden. Das betrifft zum Beispiel Icons, die den Typ eines Links angeben (Text, Tabelle, Bild, Video, Audio). Es gilt aber auch für Headergrafiken. Bilder möglichst immer per img-Tag einbinden und mit alternativen Texten versehen (siehe Guidelines für Redakteure). (Wie ich bei der Social-Link-Navigationsleiste gesehen habe, kann man aber diese Restriktion auch wieder trickreich umschiffen: Die Bilder dort sind per CSS eingebunden, aber per Link auf einem unsichtbaren Text. Mein ScreenReader liest damit den Text vor. So geht's natürlich auch. :-) )

Guildelines für Redakteure

Medien / Visuelle Inhalte

  • Bilder und Videos sollten unbedingt bei der Verwendung auf der Seite mit einem beschreibenden Text im Feld "Alternativer Text" im Formular für neue Medien versehen werden. Der Text muss den Inhalt des Bildes möglichst gut beschreiben. Man kann sich an der Situation orientieren, man müsse den Inhalt des Bildes oder Videos kurz und prägnant einem anderen Menschen am Telefon erläutern. Füllwörter wie beispielsweise am Beginn "Das Bild zeigt" sind zu vermeiden, da überflüssig. Beispiel auf Wikipedia
  • Inhalte im Feld "Beschreibung" sind für alle Nutzer sichtbar und sollten das Bild ergänzen, aber entgegen dem Wortlaut des Feldnamens nicht in jedem Detail beschreiben. Dafür ist der alternative Text gedacht.
  • Die Inhalte von Diagrammbildern sollten in Tabellenform noch einmal außerhalb des Bildes präsentiert werden, wenn der Alternativtext ansonsten droht zu lang zu werden.

Texte / Textuelle Inhalte

  • Keine Abkürzungen wie "z.B." verwenden, sondern das Abgekürzte voll ausschreiben.
  • Auch Zeitangaben wie "8-18 Uhr" wird oft nicht korrekt wiedergegeben. --> "8 bis 18 Uhr"
  • Keine langen Schachtelsätze verwenden, sondern kurz und prägnant formulieren. Korrekte Intonation wird bei verschachtelten Sätzen im Verhältnis zur Länge immer schwieriger.
  • Links: Zu vermeiden sind Links auf nichtssagenden Wörtern wie "hier", "hinter diesem Link" oder "weiterlesen". Links sollten immer auf den Wörtern liegen, auf die sich der Link bezieht.
  • Referenzen auf Medien wie "das obige Bild" sind zu vermeiden, da nicht relevant.
  • Textmarkierungen wie Fettdruck, Kursivtext, Unterstrichener Text oder Durchgestrichener Text werden von Screen-Readern oft nicht beachtet und einfach überlesen.
  • [Mit Entwicklung abzusprechen] Man kann im Texteditor Überschriften setzen, die in h1- bis h6-Tags resultieren. Es sollten aber zum einen nur ein h1-Tag pro Seite verwendet werden und zum anderen alle hX-Tags vernünftig strukturiert werden. Es sollten daher eigentlich für den User nur h2- und darunter liegende Tags zum Strukturieren verwendet werden dürfen. Außerdem ist zu vermeiden, in einem Artikel z.B. h2 und h4 zu verwenden und h3 auszulassen.


Barrierefreiheit - Bausteine

(vor allem aus technischer Hin- und ScreenReader-Sicht)

Dieser Abschnitt ist eine Wiederholung der Guidelines und nur aus archivarischen Gründen noch auf dieser Seite.

Diese Seite enthält nur eine Art Stichwort-Liste mit Tipps, die dabei helfen sollen eine Webseite barrierearm bzw. barrierefrei zu gestalten. Da das Thema extrem umfangreich und vielfältig ist, erhebt diese Liste natürlich in keinerlei Hinsicht Anspruch auf Vollständigkeit. Ich nehme gerne Erweiterungsvorschläge an bzw. jeder ist eingeladen hier beizutragen. :-) Gleichermaßen darf dieser Text natürlich auch frei kopiert und verwendet werden.

Roles bzw. Landmarks nach WAI-ARIA

  • Landmarks sind z.B. bei Screen-Readern direkt als Liste verfügbar, wenn eine bestimmte Taste betätigt wird.
  • Spezifische Seiteninhalte sollte mit umgebenden divs ausgezeichnet werden, deren Attribut "role" gesetzt ist (definiert ein Landmark).
  • <div role="main">
    für den wesentlichen Content der entsprechenden Blogseite. Bei der Startseite mit den News sind das alle News, bei einer statischen Seite der textuelle Inhalt der Seite (der Artikel). Es gibt nur ein div mit dieser Rolle pro Seite!
  • <div role="navigation">
    ist wichtig für die Navigationsleisten. Das betrifft vor allem das Hauptmenü des Blogs, aber auch eventuell in Widgets eingebaute Linklisten. Es können daher mehrere divs mit der Rolle pro Seite ausgestattet werden.
  • <div role="banner">
    ist wichtig für den Header. Hiermit sollte der Seitentitel und das -logo ausgezeichnet werden. Es sollte nur ein div mit dieser Rolle pro Seite ausgestattet werden.
  • <div role="search">
    markiert ein Suchformular für die Webseite.
  • <div role="complementary">
    kann genutzt werden, um Seiteninhalt zu markieren, der losgelöst ist vom eigentlichen Seiteninhalt (role="main"), aber sich trotzdem auf ihn bezieht. Denkbar ist ein Widget, mit Empfehlungen / Related Articles.
  • <div role="form">
    markiert in interaktives Formular, z.B. das Kontaktformular.

Links bzw. Navigation innerhalb der Seite

  • Die Links der Seite müssen mit TAB-Taste durchselektierbar sein. Der Fokus auf dem jeweils aktiven Link muss in diesem Fall sichtbar sein.
  • Ein 'Skip to Content'-Link sollte relativ weit oben in der Seite auftauchen. Er darf so eingebaut sein, daß er visuell nicht sichtbar ist (also Position außerhalb des sichtbaren Bereichs oder mit Mitteln wie unten verlinkt), da er nur für ScreenReader interessant ist, die die Position oder Sichtbarkeit nicht interessiert.
  • Ein 'Skip to Top'-Link sollte direkt unter dem Artikel auftauchen. Er darf so eingebaut sein, daß er visuell nicht sichtbar ist. (s.o.)
  • Sollten definitiv sprechend sein, also direkt aussagen, was sich dahinter verbirgt. Generische Linktexte wie z.B.
<a href="...">weiterlesen</a>

sind zu vermeiden. Wenn es nicht anders geht, mit einem unsichtbaren Element ausstatten a la 

<a href="..."> <span class="unsichtbar">Beitragstitel</span> weiterlesen</a>

Überschriften

  • Überschriften sind sehr wichtig für Screen-Reader, da sie sich darauf stützen und als Strukturangaben des Inhalts nutzen. (Übrigens auch aus SEO-Gründen für Google-Bots wichtig!)
  • Überschriften sollten der logischen Struktur folgen, also wenn h3 existiert, dann sollte auch h1 und h2 existieren.
  • Widgets sollten mit Überschriften ausgezeichnet werden, die auf 'weitere Informationen' hinweisen. Alle Überschriften dürfen visuell nicht sichtbar sein. (s.o.) Zu beachten ist dabei aber, daß GoogleBots diese dann vermutlich eher ignorieren.
  • Eine ganz gute, logische Struktur wäre z.B. für eine Seite mit einem einzelnen Artikel:
  
<h1> Seiten- bzw. Artikeltitel </h1>
	[Artikeltext bzw. -inhalte]
	<h2> Kommentare </h3>
		<div> [Inhalt Kommentare] </div>
	<h2> Weitere Informationen Sidebar </h2>
		<h3> Widget 1 Überschrift </h3>
			<div> [Inhalt Widget 1] </div>
		<h3> Widget 2 Überschrift </h3>
			<div> [Inhalt Widget 2] </div>
		...
	<h2> Weitere Informationen Footer <h2>
		...

Sonstiges

  • Alternativtexte: Müssen möglichst vollständig sein. Z.B.
<img width="229" alt="Bild einer Skelettrekonstruktion mit einem Bilduntertitel "Tyrannosaurus Rex (Tyrannenechse)". 
Im Bild ist ein Dinosaurier zu sehen." src="bilder/bild-mit-bildunterschrift.png">

( von barrierefreies-webdesign.de)

  • CSS: Layout und Inhalte müssen strikt getrennt werden. (Fast) jegliches CSS wird von ScreenReadern nicht dargestellt oder interpretiert. Insbesondere Hintergrundbilder oder mit CSS verlinkte und dargestellt Bilder sind "verloren". Wenn Bilder Inhalte sind, gehören diese per img ins html. Ein Beispiel wären auch wichtige Icons wie evtl. eine Note vor einem Audiodownload oder eine Seite vor einem PDF-Download.
  • Negativ und schlecht zu lesen für ScreenReader sind html-Tabellen, wenn sie zu Layout-Zwecken eingesetzt werden. (Die beliebten Verschachtelungen von Tabellen ineinander mit neun Ebenen...) ScreenReader lesen Tabellen einfach von oben nach unten und links nach rechts. Man muss daher ziemliche Klippen umschiffen, um Inhalte für ScreenReader zu markieren und lesbar zu machen. Sie sind daher unbedingt zu vermeiden. --> Auf divs ausweichen...
  • Captchas: Müssen natürlich auch immer in Audio konvertiert werden können.
  • Blinkende Inhalte (z.B. Flash-Banner oder animierte GIFs) sind definitiv zu vermeiden, da sie soweit irritieren können, daß Inhalte nicht mehr zu lesen sind.
  • JS sollte möglichst nur als Ergänzung verwendet werden, da ScreenReader mit manchen Elementen natürlich auch Probleme bekommen können. Hier kann man wohl nur den Livetest machen und muss dann schauen...

Farben und Kontrast (nicht-technische Themen)

Abgerufen von „https://wiki.piratenpartei.de/wiki/index.php?title=Benutzer:CarlKnutsen/Barrierefreiheit&oldid=2069097“