Online-Bildungsberatung

Transkript

1 Online-Bildungsberatung Österreich TYPO3 Barrierefrei-Handbuch für die Redaktion WIEN HAMBURG PixelMelange MANUFAKTUR FÜR ANGEWANDTE IDEEN PIXEL MELANGE

2 ONLINE-BILDUNGSBERATUNG ÖSTERREICH 2 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

3 INHALT Grundlagen / Einleitung... 5 Redaktionelle Themen für barrierefreie Webinhalte n Bilder und Grafiken... 6 n Texte n Allgemein... 7 n Überschriften... 7 n Ungeordnete Listen... 8 n Bereinigen von kopiertem/eingefügtem Text... 9 n Verlinkungen n Sprachwechsel n Abkürzungen / Zitate / Einfache Sprache n Tabellen n Barrierefreie PDF-Dokumente TYPO3 Barrierefrei-Handbuch 3

4 4 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

5 GRUNDLAGEN / EINLEITUNG Barrierefreiheit heißt, möglichst vielen Menschen Zugang zu Ihrer Website zu bieten. Das Portal Bildungsberatung- Online.at ist technisch auf einem sehr hohen Standard umgesetzt und bietet in vielen Bereichen bereits Out of the Box eine sehr gute Zugänglichkeit, was z. B. auch der durchgeführte Screenreader-Test bestätigt hat. n ZIELGRUPPE Da es eine Vielzahl von potentiellen Einschränkungen der BenutzerInnen gibt, geht es bei der Barrierefreiheit nicht nur um blinde Screenreader-Nutzer es ist ein sehr viel breiteres Spektrum: n Blinde und Sehschwache, Menschen mit Farbfehlsichtigkeiten n Alterssichtige Menschen n Gehörlose n Menschen mit motorischen Beeinträchtigungen n Menschen mit Problemen, komplizierte Sprache zu verstehen n Tastaturnutzer n Ungeübte Internet-NutzerInnen, z.b. Senioren n Nutzer von Mobilgeräten wie Smartphones, Tablets, Smart-TVs o.ä. n STANDARDS UND RICHTLINIEN n BILDUNGSBERATUNG-ONLINE.AT Die Bildungsberatung-Online.at orientiert sich am Level AA. Wir konzentrieren uns deshalb in diesem Handbuch auf die Kriterien der Stufen A und AA, darüber hinausgehende Anforderungen (AAA) behandeln wir nicht oder nur am Rande. n Der Großteil der in der WCAG definierten Kriterien ist bereits technisch durch die Umsetzung vorgegeben, wie z.b. die grafische Gestaltung des Layouts, Farbkontraste, Schriftgrößen, eine semantisch korrekte und gut strukturierte Ausgabe des HTML-Codes, die grundsätzliche Nutzbarkeit für Tastatur- und Screenreader-NutzerInnen etc. n Ein Teil der Richtlinien kann nur durch die redaktionelle Arbeit eingehalten werden. Das TYPO3-Redaktionssystem wurde von Pixel Melange dafür vorbereitet und eingerichtet. Das Barrierefrei-Manual soll alle für die Redaktion relevanten Punkte aufzeigen und zu jedem Punkt ein Rezept bereitstellen, wie die erforderlichen Arbeiten zur Einhaltung der WAI-Richtlinien im TY- PO3-Backend durchgeführt werden können. Die Richtlinien für Barrierefreie Webseiten sind durch verschiedene Standards definiert, die für öffentliche Seiten und für die Bildungsberatung-Online relevante Richtlinie ist die WCAG 2.0: Die Richtlinie WCAG 2.0 teilt alle Kriterien in drei Barrierefrei-Levels, sog. Konformitätsstufen auf: n A (Single-A): Grundsätzliche Barrierefrei-Kriterien, Minimum Level n AA (Double-A): Barrierefreit auf höherem Niveau, gesetzlich relevant für öffentliche Stellen, Bundeswebseiten etc. n AAA (Triple-A): High-End Kriterien, ja nach Website- Typ und Umgebungsbedingungen meist nur teilweise erfüllbar. TYPO3 Barrierefrei-Handbuch 5

6 REDAKTIONELLE THEMEN FÜR BARRIEREFREIE WEBINHALTE BILDER UND GRAFIKEN Bilder und Grafiken, die nicht nur dekorativen Zwecken dienen, sollten zumindest über einen geeigneten Alternativtext verfügen. Bei verlinkten Bildern ist ggf. noch ein Titel-Text sinnvoll, je nach Informationsgehalt eventuell eine Bildunterschrift. n Was ist ein geeigneter Alternativtext? n Bei Portraitbildern, wie z.b. bei den Über-Uns-Seiten der Bildungsberatung-Online.at (Beispiel: - dungs beratung-online.at/ueber-uns/burgenland.html) reicht es grundsätzlich aus, den Namen des Beraters oder der Beraterin anzugeben, noch besser ist z.b. Beraterin Alexandra Vágó-Wind. Alle weiteren Informationen stehen neben dem Bild und sind zuordenbar. n Bei Logos wird im Alternativtext eingetragen, um wessen Logo es sich handelt, also z.b. Logo der Bildungsberatung Steiermark. Schwieriger wird es z. B. in der Fußleiste von Auf der Seite musste eine ganze Leiste als einzelne Grafik mit verschiedenen Logos eingefügt werden. Der gesetzte Alternativtext Logoleisten mit den Fördergebern Europäischer Sozialfonds, Bundesministerium für Bildung und Frauen, Land Oberösterreich und AK Oberösterreich beschreibt den Inhalt optimal. n Der Alternativtext sollte kurz sein. Ist eine längere Beschreibung nötig, sollten Sie die Bildunterschrift dafür nutzen. n Sonderfall Infografiken (Diagramme etc.): Hat das Bild einen komplexeren Informationswert, wie das z.b. bei Tortendiagrammen o.ä. der Fall ist, sollte keinesfalls versucht werden, die Informationen aus dieser Grafik in den Alternativ- oder Titeltext zu pressen. Hier bietet sich an, die Informationen z.b. als Tabelle zusätzlich anzubieten. n Wozu einen Titeltext? Informationen zu einem Bild als Titeltext einzugeben, ist nicht empfehlenswert, beschreibende Texte sollten eher als Bildunterschrift angegeben werden. Bei verlinkten Bildern kann jedoch im Titeltext angegeben werden, was beim Klick auf das Bild eigentlich passieren wird. Wird ein neues Fenster aufgerufen? Dann ist dies dem/der BenutzerIn anzukündigen, ebenso wenn eine externe Internetseite mit dem Bild verlinkt ist (Genaueres dazu später bei den Infos zu Verlinkungen). Eingabe von Alternativtext, Titeltext und Bildunterschrift in TYPO3 In die rot markierten Felder werden Alternativtext, Titel und Beschreibung für jedes Bild separat eingetragen 6 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

7 TEXTE n ALLGEMEIN n ÜBERSCHRIFTEN Generell sollten Texte im geeigneten (Absatz-)Format eingegeben werden. Absätze, Listen und Überschriften werden im HTML-Quelltext dadurch in entsprechende Tags gegliedert, was sowohl die Lesbarkeit für Screenreader als auch für Suchmaschinen und (durch die korrekte Dokumentstruktur) letztlich auch für alle Benutzer verbessert. Künstliche Abstände durch mehrmaliges Drücken von Enter oder der Leertaste sollten grundsätzlich vermieden werden, da sie nicht nur die Dokumentstruktur ruinieren sondern auch Probleme bei der Darstellung entstehen können: Die Darstellung für verschiedenste Ausgabegeräte (PC Monitor, Tablet, Handy etc.) ist global durch die Umsetzung gestgelegt. Was Sie selbst auf Ihrem Monitor sehen, ist ggf. nicht das selbe, was ein Tablet User sieht, vor allem was Abstände etc. angeht. Geben Sie Content in der simplen und reduzierten Form ein, die festgelegt wurde und verlassen Sie sich auf die professionelle Umsetzung der Ausgabe. Das Konzept sieht drei unterschiedliche Überschriftenebenen vor, die für Sie als RedakteurIn zu beachten sind: n 1. Ebene: Hauptüberschrift der Seite (H1, kommt in der Regel nur einmal pro Seite vor) n 2. Ebene: Unterüberschriften auf der Seite (H2) n 3. Ebene: Weitere Unterteilung, falls unterhalb der 2. Ebene nötig (H3) n Beispiel Seite Häufige Fragen ( n 1. Ebene Hauptüberschrift Häufige Fragen n 2. Ebene z.b. Überschrift Wie finde ich den passenden Beruf? n 3. Ebene Untergliederung von 2. in z.b. Interessentests und Praxis Eingabe von Überschriften in TYPO3 Die Hauptüberschrift (H1) wird immer in das zugehörige Überschriftenfeld der Inhaltselemente Text oder Text mit Bild eingegeben. Im Dropdownfeld Haupt-Überschrift (H1) auswählen. Netzwerk Bildungsberatung ist die Hauptüberschrift der Seite -> deshalb H1 Überschriften 2. Ebene werden ebenfalls in das Überschriftenfeld eingegeben, Dropdown Überschrift Ebene 2 (H2) : Beispiel H2 -Überschrift Untergliederung der aktuellen Seite Überschriften 3. Ebene werden direkt im Textfeld definiert Alle Überschriften der Ebene 3 werden direkt im Text festgelegt. Dazu wird der Cursor in die entsprechende Zeile gestellt (oder der Text markiert) und im Absatz-Dropdownfeld Überschrift 3 ausgewählt: TYPO3 Barrierefrei-Handbuch 7

8 TEXTE n UNGEORDNETE LISTEN (AUFZÄHLUNG MIT PUNKTLISTEN) Punktlisten werden an vielen Stellen der Bildungsberatung-Online.at eingesetzt, um Inhalte zu gliedern, sie sind mit roten Quadraten gekennzeichnet: Die Punktlisten sind, ähnlich wie in Word oder anderen Textverarbeitungsprogrammen, mit der Schaltfläche für Aufzählungen zu formatieren. Andere Formatierungen, die z.b. durch das Kopieren/Einfügen aus z.b. Word übernommen werden, sollten unbedingt bereinigt und nicht unbearbeitet gespeichert werden (siehe Punkt Bereinigen von kopiertem Text ). Definition einer Punktliste im Texteditor Nummerierte Listen (Aufzählung mit 1., 2., 3...) Nummerierte Listen sind derzeit nicht vertreten, aber als Strukturelement grundsätzlich durch die Schaltfläche Nummerierung (links neben der Punktlisten- Schaltfläche) verfügbar. n WEITERE TEXTFORMATIERUNGEN Andere als die beschriebenen Textformatierungsbzw. Strukturierungs-Möglichkeiten sollen ganz bewusst nicht vorgenommen werden, um die Dokumentstruktur einfach, konsistent und lesbar zu halten! Die im Blockstil -Dropdown des Texteditors vorhandene Funktion Roter Kasten wird lediglich für den auf der Startseite und zwei BL-Seiten vorhandenen Kasten Kostenlos / Neutral / Vertraulich benutzt und ist nicht für andere Formatierungen zu verwenden. 8 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

9 TEXTE n BEREINIGEN VON KOPIERTEM/EIN- GEFÜGTEM TEXT Kopieren Sie Text aus anderen Programmen (z. B. einem Word-Dokument) in den TYPO3-Texteditor, können ggf. Formatierungen aus dem Quelldokument in den eingefügten Text gelangen, was in keinem Fall wünschenswert ist, da diese Formatierungen die Do ku ment - qualität und damit die Barrierefreiheit gefährden. TYPO3 stellt zwei Möglichkeiten bereit, Text aus anderen Quellen bereits beim Einfügen oder danach zu bereinigen. 1. Bereits beim Einfügen: Einfügen als einfachen Text Die Schaltfläche Einfügen als einfachen Text aktiviert/deaktiviert die Funktion: Die Funktion fügt Text aus der Zwischenablage bereits als einfachen Text ein, eine spätere Bereinigung entfällt in der Regel. Die Funktion ist standardmäßig für alle Redakteure aktiviert, d.h. im Normalfall muss dafür nichts gesondert ausgewählt werden. 2. Formatierung entfernen zum Bereinigen von vorhandenem oder kopiertem Text Im Texteditor vorhandener Text bzw. nach dem Einfügen: Formatierung entfernen Die Funktion, die sich unter der Schaltfläche mit dem Besen versteckt, stellt vielfältige Bereinigungsfunktionen für im Textfeld vorhandenen Text zur Verfügung. Gesamt + Alle HTML-Tags nimmt jede Struktur und Formatierung heraus und setzt sozusagen alles auf Null. TYPO3 Barrierefrei-Handbuch 9

10 VERLINKUNGEN (HYPERLINKS) Verlinkungen zu anderen Seiten können intern (auf Seiten innerhalb der Bildungsberatung-Online.at) oder extern (zu anderen Websites) gesetzt werden. Für die Barrierefreiheit zu beachten ist die Erkennbarkeit des Linkzwecks sowie die Ankündigung, wenn der Link auf eine externe Seite und/oder in einem neuen Fenster geöffnet wird: n Der Zweck eines Links soll durch den Linktext erkennbar sein. Bei Hier klicken ist nicht erkennbar, was den/die BenutzerIn erwartet, wenn er/sie auf den Link klickt. Ein erkennbarer Linktext ist z.b. Ihre erste Anlaufstelle ist die für Sie zuständige Geschäftsstelle des AMS oder auch Steirische Weiterbildungsdatenbank: n Ankündigung neuer Fenster: Das Öffnen neuer Fenster bzw. Tabs soll dem Benutzer unbedingt angekündigt werden. Dies kann im Titel des Links gemacht werden, auch wenn dies für Screenreader mit abgeschalteten Titel-Ausgaben nicht lesbar ist. Neue Fenster sollten daher, wenn überhaupt, höchstens bei Verlinkung zu externen Quellen geöffnet werden (derzeitige Praxis bei Bildungsberatung- Online.at). Visuell wird der Linktitel in einem gelben Kästchen angezeigt, wenn der Mauszeiger über dem Link steht. Die Eingabe des Titeltextes sowie das Festlegen, ob ein neues Fenster geöffnet werden soll, geschieht im TYPO3-Backend mit dem Verlinkungs - assistenten: Ändern des Zielfensters und Linktitels im Verlinkungsassistenten Nach der Eingabe der URL kann für externe Quellen als Zielfenster Neues Fenster gewählt werden. Wichtig: Wird neues Fenster gewählt, muss darunter als Stil external-link-new-window angeklickt werden, damit wird automatisch der Linktitel Externer Link in einem neuen Fenster gesetzt. Dieser vorgegebene Linktitel kann jedes Mal individuell überschrieben werden, beispielsweise mit Neues Fenster, externe Website Bildungsberatung-Online. 10 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange n Sonderfall Dateidownload Analog zur Ankündigung bzw. zur Regel Erkennbarkeit des Linkzwecks soll bei Links zu Dateien (PDF etc.) zumindest das Format, besser auch noch die Dateigröße angegeben werden. Format und Dateigröße sollten, noch besser, direkt im Linktext erkennbar sein. Der Linktext Herunterladen des Kursprogrammes [PDF, 3MB] ist eindeutiger als Kursprogramm, wovon auch mobile Nutzer profitieren, die den Titeltext in der Regel nicht zu Gesicht bekommen.

11 SPRACHWECHSEL Screenreader benutzen die Sprachauszeichnung des Dokuments sowie einzelner Teile des Dokuments zur korrekten Aussprache und Betonung der Worte. Einzelne, gebräuchliche Fremdworte, die aus z. B. aus dem Englischen oder Französischen hergeleitet sind, müssen deshalb nicht gesondert ausgezeichnet werden, da Screenreader gebräuchliche Wörter selbstständig erkennen und richtig aussprechen. Das Auszeichnen einzelner Wörter kann in dem für die Redakteur eingericheten TYPO3-Backend vorgenommen werden, allerdings ist das nicht immer ratsam, da der Lesefluss beim Vorlesen durch die Screenreader dadurch unterbrochen oder unverständlich werden kann. Gängige Begriffe wie oder Home sollten deshalb nicht ausgezeichnet werden. Ganze Zitate oder Wortgruppen in einer fremden Sprache sollten jedoch immer von der Redaktion ausgezeichnet werden. Sprachauszeichnung von Textpassagen Die Dokumentsprache der Bildungsberatung-Online.at (Deutsch) ist automatisch voreingestellt und muss vom Redakteur nicht selbst gesetzt werden. Sie gilt jeweils für die gesamte Seite. Sollen Wortgruppen, Zitate oder Wörter in einer fremden Sprache ausgezeichnet werden, ist dies im TYPO3 Text-Editor wie hier gezeigt möglich. Gesetzte Sprachänderungen im laufenden Text anzeigen lassen Zur besseren Übersicht können in TYPO3 die bestehenden Sprachmarkierungen eines Textes mit der Schaltfläche Sprachmarkierungen anzeigen sichtbar gemacht werden. TYPO3 Barrierefrei-Handbuch 11

12 ABKÜRZUNGEN / ZITATE / EINFACHE SPRACHE n ABKÜRZUNGEN Abkürzungen sollten wenn möglich sparsam eingesetzt werden, auch im Sinne einer guten Lesbarkeit für alle BenutzerInnen. Die Möglichkeit, Abkürzungen im HTML- Quelltext auszeichnen zu können, besteht bei Bildungsberatung-Online.at derzeit nicht (Kriterium ist AAA). n ZITATE Kurze Zitate können im TYPO3 Text Editor mit der q - Schaltfläche gekennzeichnet werden. Dazu den Text des Kurzzitats markieren und auf q klicken. Zur besseren Sichtbarkeit im Backend wird der Text des Zitats invertiert dargestellt, auf der Website erfolgt keine sichtbare Kennzeichnung, d.h. Anführungsstriche müssen manuell eingegeben werden. Auszeichnung von Zitaten im Text Editor n LESENIVEAU/EINFACHE SPRACHE Das Kriterium ist lt. WCAG 2.0 als AAA klassifiziert, beim gegenständlichen Barrierefrei-Level der Bildungsberatung-Online.at also im Prinzip nicht relevant. Die Bildungsberatung versucht dennoch, die Inhalte einfach zu formulieren, Abkürzungen und Fremdwörter wenn möglich zu vermeiden. 12 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

13 TABELLEN* n TABELLEN* * Derzeit nicht eingesetzt. Tabellen sind ausschließlich für tabellarische Daten einzusetzen, keinesfalls für Layoutzwecke jeglicher Art. Derzeit wird bei Bildungsberatung-Online.at keine Tabelle eingesetzt, da keine tabellarischen Daten dargestellt werden mussten. Die Tabellenfunktion steht dennoch allen Redakteuren zur Verfügung und ist für eine weitgehend barrierefreie Auszeichnung von einfachen Tabellen gerüstet. Tabelle als Seiteninhalt anlegen Zum Anlegen eines neuen Inhaltselements Tabelle wählen Sie als neues Inhaltselement den Typ Tabelle aus Tabellenassistent nach (erstmaligem) Speichern aufrufen Füllen Sie die Überschrift der Tabelle aus und speichern Sie den (ansonsten leeren) Datensatz. Danach erhalten Sie eine Schaltfläche, mit der Sie den Tabellenassistenten aufrufen können. (Weiter nächste Seite) TYPO3 Barrierefrei-Handbuch 13

14 TABELLEN Barrierefrei-Erweitungsoptionen im Tabellenassistenten In den nun im Backend vorhandenen Zellen können Zeilen und Spalten der Datentabelle eingegeben werden. Danach auf speichern klicken. Dann schließen Sie den Tabellenassistenten und geben Erweiterungsoptionen zur Vervollständigung der barrierefreien Auszeichnung an: Tabellenbeschriftung Die Tabellenbeschriftung ist gewissermaßen die Überschrift für die Tabelle. Sie kann daher auch weggelassen werden, sofern oberhalb der Tabelle ohnehin eine Überschrift (Überschrift des Inhaltselements Tabelle) eingegeben wurde. Öffnungszeiten nach Wochentagen könnte dort stehen: Öffnungszeiten nach Wochentagen, die Wochentage sind in der linken Spalte angegeben, Uhrzeiten in der rechten Spalte. Position der Kopfzeile Die Kopfzeile definiert die Spalten- oder Zeilenüberschriften, also entweder Zeilen oder Spalten. Komplexere Tabellen sind derzeit nicht geplant, diese würden ggf. verschiedene weitere, umfangreichere Auszeichnungen erfordern. Tabellenzusammenfassung In das Feld Tabellenzusammenfassung wird die Anleitung für die Tabelle geschrieben. In unserem Fall, einer Tabelle für Die Ausgabe der Tabelle auf der Website ist wiederum durch die Umsetzung fest implementiert und sieht folgendermaßen aus: 14 TYPO3 Barrierefrei-Handbuch 2014 Pixel Melange

15 BARRIEREFREIE PDF-DOKUMENTE Generell ist, aus Sicht der Barrierefreiheit, ein HTML-Inhalt dem PDF immer vorzuziehen, da auch vermeintlich barrierefreie PDF-Dateien ihre Tücken haben und es sich dabei auch um kein nativ im Browser lesbares Format handelt, was potenziell immer Probleme in der Darstellung mit sich bringt. HTML-Inhalte sind für ALLE Nutzer im Regelfall besser zu handhaben, d.h. wenn es keine triftigen Gründe für den Einsatz von PDF (Download von Broschüren mit entsprechendem Layout, längere Arbeiten mit entsprechender Struktur etc.) gibt, sollte wenn möglich ein Weg gesucht werden, den Inhalt innerhalb der Möglichkeiten der HTML-Ausgabe zu realisieren. Von Adobe steht ein ca. 120 Seiten starkes Dokument zur Verfügung, das die Erstellung von barrierefreien PDF-Dokumenten beschreibt: dfs/bro_howto_pdfs_barrierefrei_de_2005_09_abreader7.pdf Eine weitere Quelle zum Starten ist die Website der Aktion Mensch Einfach für Alle, wo in einer vierteiligen Artikelserie auf einige der Grundlagen eingegangen wird und weitere Linkquellen angegeben sind: PDF-Dokumente sind ein eigenständiges Format, sie werden nicht im Webbrowser direkt sondern in einem Viewer (PDF-Reader) bzw. einem entsprechenden Plugin im Browser angezeigt. Dementsprechend sind sie, was die Barrierefreiheit betrifft, gesondert zu behandeln und stellen für sich ein umfassendes, relativ komplexes Thema dar, das den Rahmen dieses kurzen Manuals deutlich sprengen würde. Dennoch versuchen wir, für das Thema zu sensibilisieren und weiterführende Linkquellen anzugeben. Das Erstellen von barrierefreien PDF-Dokumenten erfordert Know-How und erfordert zum Teil auch entsprechende (ggf. kostenintensive) Werkzeuge. Wir unterstützen Sie gerne bei der Umsetzung bzw. übernehmen auf Wunsch die Erstellung/Umwandlung bzw. Verbesserung von bestehenden PDF-Dateien. Zu beachten ist, dass PDF-Dokumente lt. den WCAG- Richtlinien einen Nicht-Text-Inhalt (Kriterium 1.1.1) darstellen, und dementsprechend bereits ein Single- A-Kriterium. D.h. stellen Sie PDF-Dokumente als primären Inhalt ohne Äquivalent bzw. unzugänglich auf die Website, schließt das bereits die Single-A- Konformität aus. Ebenso wie bei HTML-Dokumenten gibt es auch bei PDF- Dokumenten eine Reihe von Kriterien, die für den Abbau von Barrieren relevant sind: n Durchsuchbare Textdatei, keine eingescannten Gra - fiken n Barrierefreie Formularfelder n Dokumentstruktur, durch entsprechende Tags gekennzeichnet (ähnlich HTML) n Festlegung einer logische Lesereihenfolge n Beschreibender Text für Grafiken, Links und Formularfelder n Navigationshilfen können zur Verfügung gestellt werden n Dokumentsprache ist festgelegt n Korrekte Verwendung von Schriften n Sicherheitseinstellungen behindern Screen-Reader nicht TYPO3 Barrierefrei-Handbuch 15

16 WIEN HAMBURG PixelMelange MANUFAKTUR FÜR ANGEWANDTE IDEEN PIXEL MELANGE Schönlaterngasse 8/ Wien