Grundlagen und relevante Standards

Der Kanton Zürich verpflichtet sich, den kantonalen Webauftritt sowie weitere seiner digitalen Angebote im Web für alle Menschen zugänglich zu machen (barrierefrei). Das gilt auch für Inhalte wie Dokumente, Videos und eingebundene Websites (iFrames, Single Page Applications).

Unsere Vorgaben richten sich nach dem internationalen Standard WCAG 2.1 (Web Content Accessibility Guideline) der Stufe «AA».

Ausserdem orientieren wir uns am schweizerischen CH-0059 Accessibility Standard.

Für Rückfragen können Sie sich an die Verantwortlichen des kantonalen Webauftritts (ZHweb) wenden: barrierefrei@sk.zh.ch

Anforderungen an Webinhalte (WCAG 2.1, Level AA)

Die Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) bietet eine vollständige, filterbare Übersicht über die Vorgaben:

Die WCAG ist grob in vier Prinzipien unterteilt:

1. Wahrnehmbar
2. Bedienbar
3. Verständlich
4. Robust

Bei den ersten drei Prinzipien handelt es sich um ergonomische Prinzipien, beim letzten um ein technisches.

In der Folge haben wir die wichtigsten Anforderungen an Webinhalte zusammengefasst. 

Wahrnehmbar

Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzenden so präsentiert werden, dass diese sie wahrnehmen können.

Die zur Wahrnehmbarkeit formulierten Richtlinien beinhalten zum Beispiel Textalternativen für Bilder, Ton- und Videoinhalte; eine gute und sinnvolle Gliederung; die Möglichkeit, bewegte Inhalte zu steuern und die eindeutige Trennung von Vorder- und Hintergrund.

Anforderungen aus diesem Bereich:

Vorteile:

• Sämtliche nicht-textlichen Inhalte haben einen Alt-Text.
• Nutzende können rein dekorativen nicht-textlichen Inhalt mit dem Screenreader überspringen.
• Vorproduzierte Videos haben:
  • Untertitel
  • Audio-Deskription
    
• Live-Videos haben Untertitel.
• Unterschiedliche Informationen in Grafiken müssen unterscheidbar sein. Sie dürfen sich nicht alleine durch Form, Farbe, Platzierung, Orientierung unterscheiden.
• Farbkontraste sind hinreichend.
• Schriftgrössen sind hinreichend und skalierbar.
• Text darf nicht nur im Bild erscheinen (Ausnahme: Logos).

Bedienbar

Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.

Die zur Bedienbarkeit formulierten Richtlinien beinhalten zum Beispiel, dass alle Bereiche der Website per Tastatur zugänglich sind, die Navigation grundsätzlich einfach ist und die Nutzenden genügend Zeit haben, Inhalte zu lesen.

Anforderungen aus diesem Bereich:

Vorteile:

• Nutzende können mit der Tastatur durch die Seitenelemente springen.
• Es gibt auf der Website keine blinkenden Elemente.
• Nutzende können durch die Seite navigieren.
  • Der H1-Titel beschreiben den Inhalt der Seite.
• Die Titelhierarchie ist korrekt.
• Link-Text beschreibt den Zweck bzw. das Ziel des Links.
  

Verständlich

Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.

Die zur Verständlichkeit formulierten Richtlinien beinhalten zum Beispiel, dass die Sprache nicht unnötig kompliziert und die Navigation über alle Seiten konsistent sein sollte. Werden Nutzende zu einer Eingabe aufgefordert, braucht es Hilfestellungen wie Fehlererkennung, Labels und Anweisungen.

Anforderungen aus diesem Bereich:

Vorteile:

• Navigationselemente sind konsistent.
• Die Benennung von sich wiederholenden Elemente und Abschnitten ist konsistent.

Robust

Inhalte müssen robust genug sein, damit sie zuverlässig von Benutzeragenten, einschliesslich assistierender Techniken, interpretiert werden können.

Die Qualität des HTML-, CSS- und JavaScript-Codes muss deshalb den Vorgaben der Standards entsprechen.

Anforderungen aus diesem Bereich:

Vorteile:

• Die Seite verwendet Markup (Tags).
• Name, Rolle und Wert von Elementen sind korrekt.
• Der Status von Elementen ist korrekt (ist erkennbar für Screenreader).

Vorgaben nach Inhaltstypen

Die folgenden Punkte listen die Vorgaben für verschiedene Medientypen auf. Sämtliche neu erstellten Inhalte und Dokumente müssen diese Vorgaben zwingend erfüllen.

Texte

Tags

Alle Texte sind mit dem korrekten semantischen «Tag» ausgezeichnet: 

Jeder Absatz als Paragraf.

Jede Überschrift als H1, H2, H3, H4 etc.

Jede Aufzählung ist korrekt als Liste strukturiert und formatiert.

Links sind als solche ausgezeichnet, funktionieren korrekt und können mit der Tastatur ausgelöst werden (Tabulator-Taste). Der Linktext ist kontextunabhängig verständlich und beschreibt das Ziel.

Titel

Vorteile:

• Die Hierarchie der Titel muss eingehalten werden.
  • Der H1 ist der Haupttitel im Seitenkopf.
  • Die nächsttiefere Titelebene ist der höheren logisch untergeordnet.
  • Es dürfen keine Titel-Ebenen übersprungen werden.
• Auf jeden Titel muss Text (Lauftext) oder direkt ein Titel auf der nächst unteren Ebene folgen.
• Titel dürfen nicht zur Hervorhebung von Text genutzt werden.

Farbe und Kontrast

Text und Bilder von Text müssen ein minimales Farbkontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für grossen Text (18 pt und mehr oder 14 pt fett) haben.

Redaktionelle Vorgaben

Weiteres zur Verwendung von Text:

Tabellen

Vorteile:

• Jede Tabelle ist korrekt als solche definiert.
• Tabellen werden nicht zu Layoutzwecken eingesetzt.
• Tabellen enthalten stets Spalten- und/oder Zeilenüberschriften (als solche formatiert).
• Tabellen enthalten keine leeren Zeilen oder leere Spalten.
• Tabellen enthalten keine Sonderzeichen (nur Text und/oder Ziffern).

Dringende Empfehlung

Tabellen sollten über einen Titel verfügen.

Komponente

Für Weiteres zu Tabellen siehe Komponente:

Bilder

Alt-Text

Zu allen inhaltlich relevanten (das heisst: informationsvermittelnden, also nicht rein dekorativen) Bildern oder Grafiken muss eine Text-Alternative («Alt-Text») angeboten werden.

Vorteile:

• Alt-Text und Bildlegende sind nicht dasselbe. Der Alt-Text beschreibt, was auf dem Bild zu sehen ist; die Bildlegende enthält zusätzliche Informationen zum Bild.
• Begriffe wie «Bild», «Foto» o.ä. sollen im Alt-Text nicht verwendet werden.
• Fotos von bekannten Personen müssen deren Namen im Alt-Text enthalten, am besten mit dem Zusatz «Porträt».
• Alt-Texte sollen kurz sein, möglichst unter 150 Zeichen.
• Rein dekorative Elemente sind nur sehr zurückhaltend einzusetzen und werden als dekorativ gekennzeichnet.

So nicht

Aus Gründen der Barrierefreiheit nicht erlaubt sind:

• Links auf Bildern und Image-Maps.
• Text soll nicht als Bild oder Grafik eingefügt werden. Bilder sollten möglichst gar keinen (informativen, relevanten) Text enthalten.
• Animierte Bilder (siehe dazu Verhalten).

Komponente und redaktionelle Vorgaben

Für Weiteres zu Bildern siehe:

Einfache Grafiken (als Bild eingebettet)

Es gelten grundsätzlich dieselben Vorgaben wie für Bilder. Einige sind aber leicht abweichend oder sollten zusätzlich beachtet werden:

Alt-Text

Vorteile:

• Wir vermeiden die Bezeichnung «Grafik von XY». Stattdessen erwähnen wir, um welche Art von Grafik es sich handelt, z.B. «Liniendiagramm von XY».
  
• Wird die Information der Grafik im umgebenden Lauftext vermittelt, gilt dies als Text-Alternative. Dann dürfen Alt-Text und Legende summarisch sein. Das ist sinnvoll bei Diagrammen und Infografiken, etwa Organigrammen.
• Die Bereitstellung der Rohdaten kann ebenfalls als Text-Alternative gelten. Dann dürfen Alt-Text und Legende summarisch sein, müssen aber einen Hinweis auf die Rohdaten enthalten. Das ist bei Diagrammen und Infografiken sinnvoll.
  • Ein Link auf die Rohdaten darf nicht im Alt-Text stehen. Möglich sind Links unter «Quelle».
  • Rohdaten als Excel/CSV in einer Downloadliste oder via Datenkomponente sind möglich.

Farbe und Kontrast

Vorteile:

• Informationen in Grafiken werden nicht alleine durch Farbe vermittelt (bzw. sind nicht alleine durch Farben unterscheidbar).
• Grafiken weisen unabhängig von der gewählten Farbkombination einen ausreichenden Kontrast auf, das heisst mindestens 3:1.
• Text und Bilder von Text haben einen Kontrast um Hintergrund von mindestens 4,5:1.
• Rot-Grün eignet sich schlecht als Farbkombination, weil diese beiden Farben von vielen farbenblinden Personen nicht unterschieden werden können.

Für komplexe Infografiken und Visualisierungen haben wir ausführlichere Regeln, Vorgaben und Tipps zusammengestellt:

Single-Page-Applications (SPA) und iFrames

Für mittels Single-Page-Application (SPA) oder iFrame eingebundene Inhalte gelten grundsätzlich die gleichen Vorgaben wie für die restlichen Webinhalte.

Insbesondere muss die Tastaturbedienbarkeit auch innerhalb der SPA oder des iFrames gegeben sein.

Alt-Text

Zu SPAs und iFrames muss eine Text-Alternative («Alt-Text») angeboten werden. Der Alt-Text darf summarisch sein, wenn der Inhalt der SPA oder des IFrame barrierefrei zugänglich ist.

Komponente

Für Weiteres zu SPA oder iFrame siehe:

PDF

PDFs müssen dem Standard PDF/UA (Universal Accessibility) entsprechen.

Eine umfassende Prüfung ermöglicht die Software PDF Accessibility Checker (PAC):

Titel, Name und Einbettung

Vorteile:

• Dokumente haben einen sinnvollen und verständlichen Dateinamen.
• Ein aussagekräftiger Dokumenttitel ist hinterlegt (Bei Berichten heisst das: Der Titel des Berichts o.ä.).
• Eine korrekte Zeichencodierung ist hinterlegt.
• Die Schrift ist eingebettet.
• Die Sprache ist hinterlegt (sowohl für das gesamte Dokument wie auch für einzelne Abschnitte in anderen Sprachen, die darin vorkommen).

Struktur

Vorteile:

• Die Lesereihenfolge der Inhaltselemente ist logisch korrekt definiert. Das ist wichtig bei komplexen Layouts von Broschüren o.ä.
• Die Hierarchie der Titel (Überschriften) wird eingehalten, also keine Ebenen übersprungen.
• Lesezeichen sind definiert.
• Fussnoten sind korrekt ausgezeichnet und im Text verlinkt.

Metadaten / Tags

Alle Elemente im Dokument sind mit dem korrekten semantischen «Tag» ausgezeichnet:

Vorteile:

• Jeder Absatz als Paragraf.
• Jede Überschrift als H1, H2, etc.
• Jede Aufzählung ist korrekt als Liste strukturiert und formatiert.
• Jede Tabelle ist korrekt als solche definiert und verfügt über Spalten- und/oder Zeilenüberschriften (entsprechend der visuellen Auszeichnung).
• Elemente, die keinen Inhalt vermitteln (z.B. leere Zeilenumbrüche, dekorative Bilder, Linien), sowie Kopf- und Fusszeile sind als Artefakte definiert.
• Links sind als solche ausgezeichnet, funktionieren korrekt und können mit der Tastatur ausgelöst werden (Tabulator-Taste). Der Linktext ist kontextunabhängig verständlich und beschreibt das Ziel.

Grafiken, Bilder und Karten

Vorteile:

• Inhaltsvermittelnde Bilder und Grafiken verfügen über einen sinnvollen Alt-Text (siehe Vorgaben für Bilder und Grafiken für Details).
• Es gelten ausserdem die Vorgaben für Grafiken, Bilder und Karten (s.o.).

Farbe und Kontrast

Text und Bilder von Text müssen ein minimales Farbkontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für grossen Text (18 pt und mehr oder 14 pt fett) haben.

Videos