Accessibility-Checkliste für AEM

Transkript

1 Eidgenössisches Departement des Innern EDI Generalsekretariat EDI Eidgenössisches Büro für die Gleichstellung von Menschen mit Behinderungen EBGB Version 1.1 vom Genehmigt durch Interdepartementale Arbeitsgruppe Internet- Barrierefreiheit (IDA BF) am Accessibility-Checkliste für AEM Checkliste zur Gestaltung von barrierefreien Inhalten in Adobe Experience Manager AEM

2 Impressum Herausgeber: Interdepartementale Arbeitsgruppe Internet-Barrierefreiheit (IDA BF) Version: 1.0 vom Kontakt: IDA BF c/o Eidgenössisches Büro für die Gleichstellung von Menschen mit Behinderungen EBGB 2

3 Inhaltsverzeichnis 1. Einleitung Weshalb Barrierefreiheit? Wem nützt Barrierefreiheit? Müssen Webseiten des Bund barrierefrei sein? Migration als Chance Hilfsmittel Accessibility Checkliste Migration auf AEM Text-Inhalte Alternativen für grafische Inhalte Tabellen Listen Links Multimedia-Inhalte Meta-Daten im DAM PDF-Dokumente Weitere Informationen und Kontakte Departementale Beauftragte Internet-Barrierefreiheit Geschäftsstelle eaccessibility Allgemeine Informationen zu Barrierefreiheit Richtlinien

4 1. Einleitung 1.1. Weshalb Barrierefreiheit? In der Schweiz leben über 1,4 Millionen Bürgerinnen und Bürger mit einer Behinderung. Für Menschen mit Behinderungen bietet das Internet ein enormes Potential für mehr Chancengleichheit und Selbstständigkeit in Ausbildung und Beruf sowie im gesellschaftlichen und privaten Alltag. Um dieses Potential voll auszuschöpfen, ist es wichtig, die Hürden in allen Belangen auf Webseiten abzubauen Wem nützt Barrierefreiheit? Von der Barrierefreiheit profitieren nicht nur Menschen mit Sehbehinderungen, Hörbehinderungen sowie motorischen oder kognitiven Behinderungen sondern immer mehr auch ältere Menschen mit altersbedingten Einschränkungen. Ebenso wird durch das Einhalten von Standards und einer klaren und einfachen Struktur die Kompatibilität verbessert, die Stabilität erhöht, die Ladezeiten verkürzt und es bietet eine gute Grundlage für eine erfolgreiche Suchmaschinenoptimierung Müssen Webseiten des Bund barrierefrei sein? Der Bund ist gemäss dem Bundesgesetz über die Beseitigung von Benachteiligungen von Menschen mit Behinderungen (BehiG) und der Verordnung über die Beseitigung von Benachteiligungen von Menschen mit Behinderungen (BehiV) seit 2004 verpflichtet seine Internet- und Intranet-Angebote barrierefrei, das heisst auch für Menschen mit Behinderungen, zugänglich zu gestalten. Zudem stellt die Barrierefreiheit des Internets eines der Ziele der Strategie des Bundesrats für eine Informationsgesellschaft in der Schweiz dar. Ebenso verlangt das Übereinkommen über die Rechte von Menschen mit Behinderungen (BRK), dass der Bund seine Dienstleistungen über das Internet für Menschen mit Behinderungen zugänglich gestaltet. Die BRK wurde von der Schweiz am 15. April 2014 ratifiziert und ist am 15. Mai 2014 in Kraft getreten Migration als Chance Eine Migration auf ein neues CMS ist eine grosse Chance, die Zugänglichkeit der Inhalte der Webseite im gleichen Zug zu verbessern Hilfsmittel Die vorliegende Checkliste soll Ihnen helfen, die Inhalte Ihrer Website barrierefrei zu gestalten. 4

5 Accessibility-Checkliste für AEM 2. Accessibility Checkliste Migration auf AEM 2.1. Text-Inhalte Jede visuell hervorgehobene Überschrift ist als Heading <hx> definiert. Abbildung 1: Strukturieren Sie Fliesstext mit den Überschriften H2-H5. Achten Sie darauf, dass keine Ebenen übersprungen werden. Es werden keine Überschriften-Ebenen übersprungen. Fettung <strong> wird nur im Fliesstext zur Hervorhebung verwendet (Fettung wird nicht für Überschriften verwendet). Abbildung 2: Verwenden Sie nie fette Schrift für die Auszeichnung einer Überschrift. 5

6 Accessibility-Checkliste für AEM Es gibt keine leeren Paragraphen <p> auf der Seite. Abbildung 3: Vermeiden Sie manuelles vergrössern der Abstände durch leere Paragraphen. Ist ein grösserer Abstand zwingend notwendig, so verwenden Sie weiche Zeilenumbrüche (Shift + ENTER) um ein <br> zu erzeugen. Inhaltsseiten sind mittels Paragraphen und aussagekräftigen, hierarchisch korrekten Überschriften übersichtlich gegliedert. Abbildung 4: Übersichtliche Paragraphen sind durch aussagekräftige Zwischentitel gegliedert Alternativen für grafische Inhalte Alle informationsvermittelnden Bilder verfügen über einen aussagekräftigen Alt-Text. Abbildung 5: Der Alt-Text muss in diesem Feld eingegeben werden. Die Bildlegende und der AltText sind nicht dasselbe. Alt-Text beschreibt, was auf dem Bild zu sehen ist; Bildlegende enthält zusätzliche Informationen zum Bild. Wird nichts eingegeben, so wird der Eintrag unter Titel aus dem DAM als Alt-Text übernommen. 6

7 Accessibility-Checkliste für AEM Legende und Alt-Text eines Bildes sind nicht identisch. Abbildung 6: Die Legende (oben) enthält zusätzliche Informationen zum Bild (z.b. Copyright, Datum usw.). Der Alt-Text (unten) beschreibt so kurz wie möglich, was auf dem Bild zu sehen ist. Bei verlinkten Bildern beschreibt der Alt-Text das Linkziel. Abbildung 7: Sobald ein Bild verlinkt ist, ist nicht mehr relevant, was auf dem Bild zu sehen ist, sondern nur noch das Linkziel. In Kombination mit einem Textlink ist darauf zu achten, dass der AltText und der Textlink gleich sind. 7

8 Diagramme und reichhaltige Info-Grafiken, wie zum Beispiel ein Organigramm, werden über eine Beschreibung (Legende) oder eine aufklappbare Box beschrieben. Abbildung 8: Die Beschreibung (=Legende) einer Info-Grafik (z.b. Organigramm) kann im DAM unter Beschreibung oder im Editor als Legende hinterlegt werden (sofern die Beschreibung nicht schon Bestandteil des Fliesstextes des Artikels ist). Abbildung 9: Durch die Komponente "Aufklappbare Box" kann eine zusätzliche Ausführliche Beschreibung z.b. eines Organigramms hinterlegt werden. Abbildung 10: Die aufklappbare Box ist per default eingeklappt und beeinträchtigt das Erscheinungsbild der Seite nicht. 8

9 Accessibility-Checkliste für AEM Nicht verlinkte grafische Elemente, die nur dekorativen Charakter besitzen (Symbolbilder), haben keinen Alt-Text. Im Moment fehlt in AEM die Möglichkeit für leere Alt-Texte. Leere Alt-Texte können erzeugt werden, indem der Titel des Bildes im DAM leer gelassen wird. Grafiken weisen einen ausreichenden Kontrast auf. Informationen innerhalb von Grafiken werden nicht nur über Farbe vermittelt. Abbildung 11: In der Grafik links ist die Information über freie Plätze nur über Farbe vermittelt und für farbenblinde Menschen nicht zugänglich Tabellen Es werden keine Tabellen zu Layoutzwecken eingesetzt. Tabellen verfügen über Spalten- und/oder Zeilenüberschriften. Im Moment können in AEM nur Spaltenüberschriften definiert werden. Abbildung 12: Beim Layout Tabelle mit Header werden automatisch Spaltenüberschriften definiert. Es sind keine leeren Zeilen oder Spalten vorhanden. Tabellen enthalten keine Sonderzeichen oder Symbole wie -. 9

10 Accessibility-Checkliste für AEM Tabellen (Ausnahme: ganz einfache Tabellen) verfügen über eine Überschrift <caption> und eine Zusammenfassung <summary > (die Zusammenfassung ist nur für Suchmaschinen und blinde Menschen «sichtbar» und fasst Sinn, Zweck und Aussage der Tabelle kurz zusammen). Abbildung 13: Die Überschrift (Caption) kann im Tab "Tabelle" eingegeben werden. Abbildung 14: Im Tab Screenreader kann eine Zusammenfassung eingegeben werden (nicht nötig bei sehr einfachen Tabellen) Listen Jede Aufzählung ist als korrekte Liste definiert. Abbildung 15: Nummerierte und nicht nummerierte Listen im Editor nur mit entsprechenden Funktionen erstellen. 10

11 Aufzählungen mit mehreren Ebenen sind als verschachtelte Listen definiert Links Abbildung 16: Verschachtelte Listen nur mit entsprechender Funktion definieren. Für mehrspaltige Listen sind Definitionslisten Tabellen vorzuziehen. Definitionslisten können in AEM zurzeit nicht erstellt werden. Linkbeschriftungen sind kontextunabhängig verständlich. Beispiel: Verwenden Sie anstatt dem Link Dossier den Link Dossier «Behindertenpolitik Schweiz». Links auf Dokumente enthalten Format und File-Grösse im Linktext (nur notwendig, wenn Dokumente nicht im DAM erfasst sind). 11

12 2.6. Multimedia-Inhalte Jedes Video verfügt über eine Textalternative und über einen Untertitel. Tipp: Erstellen Sie mit wenig Aufwand Untertitel durch Bearbeitung der automatisch generierten Untertitel in YouTube: Eine Textalternative kann ein vollständiges Transkript (z.b. von einer Rede) sein oder eine Zusammenfassung des Videos, welche vor oder nach dem eingebetteten Video publiziert ist. Werden über die visuelle Handlung wichtige Informationen vermittelt, ist eine Audiodeskription in Form einer Tonspur oder als Textalternative vorhanden. Audio-Inhalte verfügen über ein Transkript. Abbildung 17: Audio-Dateien weisen eine äquivalente Transkription auf, welche in der Komponente Audio-Datei unter Transkript eingegeben werden kann. Das Transkript ist auf der Seite immer sichtbar. Soll das Transkript nicht sichtbar sein, kann stattdessen die Komponente Aufklappbare Box verwendet werden. Abbildung 18: Aufklappbare Transkription einer Audio-Datei mittels "Aufklappbarer Box". 12

13 2.7. Meta-Daten im DAM Alt-Text und Legende sind im DAM oder spezifisch auf der Webseite, wo sie verwendet werden, für alle Bilder in allen Sprachen korrekt eingepflegt. Abbildung 19: Für Barrierefreiheit notwendige Meta-Daten: der Eintrag bei "Titel" wird als Alt-Text und der Eintrag bei "Beschreibung" wird als Legende auf der Webseite übernommen. Alle elektronischen Dokumente, insbesondere PDF-Dokumente, verfügen über einen aussagekräftigen Titel PDF-Dokumente Dort wo es sinnvoll ist, wird immer HTML für Webinhalte gegenüber PDF bevorzugt. Durch die Verwendung von HTML für die Darstellung von Inhalten bleibt die Webseite responsive, d.h. sie kann auch mit einem Smartphone bequem gelesen werden. Ist der gleiche Inhalt zusätzlich noch als PDF-Dokument (z.b. zum Ausdrucken) verfügbar, so muss dieses nicht in barrierefreier Form zur Verfügung stehen. PDF-Dokumente, für welche es keine äquivalente HTML-Alternative gibt, sind gemäss P028 barrierefrei zugänglich. Tipp: Anleitung zur Erstellung von barrierefreien PDF aus MS-Word 13

14 3. Weitere Informationen und Kontakte 3.1. Departementale Beauftragte Internet-Barrierefreiheit Wenn Sie Fragen betreffend Barrierefreiheit in Zusammenhang mit der Migration auf das CMS AEM haben, richten Sie sich bitte an den oder die Beauftragten für Internet- Barrierefreiheit Ihres Departements. Name Dep. Tel. Beneke Christian EJPD Bächler Michael EJPD Frassineti Tiziana EDA Petit Raphael EDA Do Canto André BK Otmar Gächter UVEK Duplain Michel Nathalie VBS Viladoms Charles- WBF Etienne Riesch Markus EDI Zihlmann Ruth EFD Geschäftsstelle eaccessibility Für allgemeine Fragen zum Thema Accessibility steht Ihnen auch die Geschäftsstelle eaccessibility des Bundes zur Verfügung. Markus Riesch, Allgemeine Informationen zu Barrierefreiheit Informationen des BIT Informationen auf ch.ch Informationen des EBGB Stiftung «Zugang für alle» Leitfaden zur Gestaltung von Webseiten für Menschen mit kognitiven Beeinträchtigungen Richtlinien P028 - Richtlinien des Bundes für die Gestaltung von barrierefreien Internetangeboten richtlinien_bund_gestaltung_barrierefreie_internetangebote.html Richtlinien für barrierefreie Webinhalte (WCAG) Accessible Rich Internet Applications (WAI-ARIA)