Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Accessibility

Einleitung

Die UZH ist gesetzlich zur Barrierefreiheit bei Webseiten verpflichtet: eCH-0059 Accessibility Standard.

Dieser Standard basiert auf den Web Content Accessibility Guidelines( WCAG) des World Wide Web Consortium W3C: WCAG 2.1

Im CMS «Magnolia» der UZH werden Webseiten automatisch barrierefrei (accessible) erstellt. Beim Füllen der Webseiten mit Inhalt gibt es aber einige Regeln zu beachten. Diese werden hier kurz aufgelistet.

Inhaltsstruktur mit Überschriften

  • Strukturieren Sie den Inhalt mit Überschriften.
  • Der Seitentitel ist definiert als «Überschrift 1»
  • Der Titel einer Text/Bild-Komponente ist definiert als «Überschrift 2»
  • Die weiteren Überschrifts-Ebenen (3 bis 6) können Sie in der Text/Bild-Komponente auswählen
  • Verwenden Sie eine durchgehende Überschrift-Hierarchie (Überschrift 2, Überschrift 3, etc.)
  • Verwenden Sie nicht die Formatierung «Fett» für Überschriften
  • Überprüfen Sie die Überschrift-Hierarchie (siehe Kapitel Tools)

Listen

  • Formatieren Sie Aufzählungen immer als Liste, z.B. eine Publikationsliste
  • Spielt die Reihenfolge eine Rolle, verwenden Sie die nummerierte Liste, z.B. bei Anleitungen.
  • Verwenden Sie aussagekräftige Linktexte, also nicht «hier».
  • Platzieren Sie Links möglichst separat vom Text, z.B. nach einem Absatz. Links in einem Text sind schwierig zu erfassen – auch für Sehende.

Bilder

  • Wenn Bilder wichtige Informationen enthalten, müssen diese Informationen im Alternativtext eingegeben werden. Der Alternativtext ist nicht sichtbar, wird aber vom Screenreader gelesen.
  • Bei rein dekorativen Bildern muss der Alternativtext leer gelassen werden.

Tabellen

  • Tabellen müssen eine Titelzeile und/oder eine Titelspalte haben.
  • Diese Titelzeile /-spalte richten Sie in den Tabellen-Eigenschaften ein:
    Kopfzeile: Erste Zeile | Erste Spalte | Beide
  • Screenreader nennen dann bei den einzelnen Zellen den zugehörigen Titel
Beispiel-Tabelle mit «Kopfzeilen: Beide» Name Vorname
Kursleiter 1 Muster Peter
Kursleiter 2 Steiner Sylvia

Leerräume

  • Vermeiden Sie visuelle «Abstandshalter», wie z.B. leere Text/Bild-Komponenten oder leere Paragrafen. Für Hörende bedeuten sie unnötigen «Lärm».

Tools

Der Accessibility Developer Guide  der Stiftung «Zugang für alle» bietet hilfreiche Browser-Werkzeuge für Accessibility-Checks an.

Eine Auswahl:

  • WAVE toolbar: Übersicht über Accessibility-Probleme einer Webseite (Browser extension)
  • Contents Structured: Blendet HTML Elemente in der Seite ein (Bookmarklet)
  • h123: Zeigt die Überschrift-Hierarchie einer Webseite an (Bookmarklet)

Kurs

Die ZI bietet zusammen mit der Fachstelle Studium und Behinderung einen Kurs zur Accessibility mit Magnolia an:CMS: Barrierefreie Webseiten erstellen

Kurz-URL dieser Seite