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:

Infografiken & Visualisierungen

Informationsgehalt

Wir reduzieren die Komplexität von Infografiken auf das notwendige Minimum, das heisst die wesentlichen Kernbotschaften. So stellen wir sicher, dass möglichst viele Menschen diese lesen und verstehen können. 

Alternativer Zugang

Wir bieten für Personen mit visuellen Einschränkungen alternative Möglichkeiten, die Daten zu lesen, zu verstehen und Erkenntnisse daraus zu ziehen. Die Kernbotschaften von Grafiken vermitteln wir im Alt-Text oder im Fliesstext, der die Grafik umgibt. 

Farbe und Kontrast

Wir vermitteln Informationen in Grafiken nicht alleine durch Farbe bzw. sie sind nicht alleine durch Farben unterscheidbar.

Grafiken weisen unabhängig von der gewählten Farbkombination einen ausreichenden Kontrast auf. Das gilt auch für den Kontrast zum Hintergrund.

Wir achten bei der Auswahl von Farbkombinationen darauf, dass diese für Farbenblinde unterscheidbar sind.

Detaillierte Regeln, Vorgaben und Tipps haben wir hier 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