DRUPAL-SCHULUNG. Einsteigerschulung und Basisinformationen zur Barrierefreiheit

Transkript

1 DRUPAL-SCHULUNG Einsteigerschulung und Basisinformationen zur Barrierefreiheit

2 Einsteigerschulung und Basisinformationen zur Barrierefreiheit INHALTE Web-Content-Management-System Grundlegende Bearbeitung Barrierefreiheit Inhalte formatieren und strukturieren Übungen

3 Web-Content-Management-System Drupal WAS IST EIN CONTENT-MANAGEMENT-SYSTEM? Software zur einfachen Erstellung und Verwaltung von Webinhalten Redaktionssystem Trennung von Inhalt und Layout/Design Redakteur muss sich nur noch mit Einpflegen und Aktualisieren der Inhalte befassen

4 Web-Content-Management-System Drupal WAS SIND DIE VORTEILE EINES CMS? Keine Vorkenntnisse in HTML, CSS, JavaScript, Arbeitsplatz benötigt keine zusätzliche Software Webbrowser ist ausreichend Bedienfreundliche Umgebung Durchsetzung eines einheitlichen Corporate Designs

5 Web-Content-Management-System Drupal KURZVORSTELLUNG DRUPAL Drupal 6.x (freie Software OpenSource) PHP-basiert unter Verwendung MySQL Flächendeckende Einführung im April 2014 Ursprünglich 2010/2011 Relaunch: neues Webdesign und Umstellung der zentralen Seiten Stand 2017: ca Seiten im System, ca Redakteure

6 Web-Content-Management-System Drupal AUFBAU VON DRUPAL Core mit Grundfunktionalität User, Node, System Module für zusätzliche Funktionen Galerie, Editor, Dateibrowser, über vollwertige Drupal-Module davon für Drupal 6 kompatibel ( für Drupal 7, für Drupal 8)

7 Web-Content-Management-System Drupal EIGENSCHAFTEN VON DRUPAL Menschen- und maschinenlesbare Adressen Inhaltstypen für verschiedenartige Seiten Rollenbasiertes Rechtesystem Versionierung der Inhalte Anbindung an LDAP-Server

8 Web-Content-Management-System Drupal SYSTEMLANDSCHAFT Drupal 3 Testsystem Drupal 2 Qualitätssystem Drupal 1 Produktivsystem o Tests von Patches und Updates o Testsystem für Erweiterungen, Module o Ausbildungs- und Schulungssystem o Kopie des Produktivsystems o Zielsystem für das gesamte Webangebot o Pflege der Inhalte o Webkoordinator o Entwickler o Redakteure o Webkoordinator o Entwickler o Nutzer o Redakteure o Webkoordinator o Entwickler

9 Web-Content-Management-System Drupal FRAGEN? Redaktionssystem Webbasiert Drupal Version 6.x Core mit Grundfunktionen Module für Erweiterungen 3 Drupal-Instanzen

10 Grundlegende Bedienung LOGIN INS WEBCMS Login erfolgt mittels Shibboleth-Authentifizierung Zentrales Uni-Login Login-Link im Footermenü: Heutiges Schulungssystem: Hinweis: Vorheriges Login ist erforderlich für Berechtigungen.

11 Grundlegende Bedienung REDAKTIONSMODUS Inhalts- und Gruppenverwaltung

12 Grundlegende Bedienung GRUPPENVERWALTUNG

13 Grundlegende Bedienung INHALTSVERWALTUNG

14 Grundlegende Bedienung REDAKTIONSMODUS Bearbeitungsleiste

15 Grundlegende Bedienung VERSIONEN

16 Grundlegende Bedienung UNTERSEITE HINZUFÜGEN

17 Grundlegende Bedienung NEUE SEITE ERSTELLEN

18 Grundlegende Bedienung FRAGEN? Login über Fußzeile Inhalts- und Gruppenverwaltung Funktionen im Bearbeitungsmodus Neue Inhalte anlegen

19 Barrierefreiheit BARRIEREFREIHEIT Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann. Quelle:

20 Barrierefreiheit WER IST BETROFFEN? 4 Hauptkategorien Sehbehinderung Hörbehinderung Motorische Beeinträchtigung Kognitive Beeinträchtigung Weitere Segmente Silver Surfer (Alter 50+) Mobile- und Tablet- Nutzer Suchmaschinen (Google ist blind)

21 Barrierefreiheit BARRIEREARMES INTERNET Schneller und unkomplizierter Zugriff auf gewünschte Informationen Informationen frei von Barrieren anbieten Zugänglichkeit für: Menschen mit Behinderungen Menschen ohne Behinderungen Webcrawler

22 Barrierefreiheit VIER PRINZIPIEN DER BARRIEREFREIHEIT 1. Wahrnehmbar: Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. 2. Bedienbar: Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein. 3. Verständlich: Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein. 4. Robust: Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können. Web Content Accessibility Guidelines (WCAG) 2.0

23 Barrierefreiheit BEHINDERTEN-GLEICHSTELLUNGSGESETZ BGG definiert Standard zur Barrierefreiheit 2016 überarbeitet: Öffentliche Einrichtungen Barrierefreie Infrastruktur Inhalte in Leichter Sprache anbieten

24 Barrierefreiheit BGG 4 Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind.

25 Barrierefreiheit WEITERE REGELUNGEN Barrierefreie-Informationstechnik-Verordnung Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV 2.0) Ergänzung des BGG Zugang für behinderte Menschen im Sinne des 3 bzw. 4 des Behindertengleichstellungsgesetzes Sachsen ist BITV-freie Zone

26 Barrierefreiheit WEITERE REGELUNGEN Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Freistaat Sachsen (Sächsisches Integrationsgesetz SächsIntegrG), gültig ab Barrierefreie Informationstechnik Die Behörden und sonstigen öffentlichen Stellen des Freistaates Sachsen gestalten ihre Internetauftritte und - angebote sowie die von ihnen zur Verfügung gestellten graphischen Programmoberflächen, die mit Mitteln der Informationstechnik dargestellt werden, schrittweise technisch so, dass sie auch von Menschen mit Behinderungen grundsätzlich uneingeschränkt genutzt werden können.

27 Barrierefreiheit UMSETZUNG DER BARRIEREFREIHEIT Layout & Design Zusammenspiel von Farben und Kontrasten Anordnung, Darstellung und Strukturierung der Elemente Qualitätssicherung Redakteure verantwortlich, Inhalte barrierearm anzubieten Regelmäßige Schulungen für Redakteure

28 Barrierefreiheit TYPISCHE PROBLEME: FORMULAR AUSFÜLLEN Blinde haben keinen Gesamtüberblick Formulare ausfüllen wird Geduldsprobe

29 Barrierefreiheit TYPISCHE PROBLEME: TASTATURBEDIENBARKEIT Einige Bereiche über Tastatur nur schwer oder gar nicht erreichbar

30 Barrierefreiheit TYPISCHE PROBLEME: BILDER OHNE BESCHREIBUNG

31 Barrierefreiheit TYPISCHE PROBLEME: ÄNDERUNGEN DER WEBSEITE Änderungen werden nicht bemerkt, Webseite gesperrt

32 Barrierefreiheit TIPP: MEHRKANAL-PRINZIP Informationen über mindestens zwei Sinne zugänglich Beispiele: Informationen nicht nur grafisch, sondern auch textlich vermitteln Videos mit Untertiteln für Gehörlose Alle Nicht-Textinhalte brauchen alternative Beschreibung (insbesondere Bilder)

33 Barrierefreiheit TIPP: STÖRENDE INHALTE VERMEIDEN Grelle, flackernde Inhalte vermeiden Animationen, Audio und Video nicht automatisch starten Mögliche Fehler reduzieren: Nicht funktionierende Links Missverständliche Texte Flash-Webseiten

34 Barrierefreiheit TIPP: SEMANTISCHE STRUKTURIERUNG Texte semantisch auszeichnen Programme (z.b. Screenreader) müssen erkennen, was Überschrift, Liste oder Zitat ist

35 Barrierefreiheit TIPP: AUS NUTZERSICHT DENKEN Wichtigste Ziel des Nutzers Schnell das Ziel erreichen Konventionen gut zur Orientierung Wiederkehrende Bedien-Elemente und Inhalte immer an gleichen Stelle weniger ist mehr

36 Barrierefreiheit CHECKLISTE FÜR REDAKTEURE Überschriften Listen Tabellen Bilder Links Navigation Einfache und klare Sprache

37 Barrierefreiheit ÜBERSCHRIFTEN BITV Bedingung Beschreibungen Überschriften und Label (Beschriftungen) kennzeichnen das Thema oder den Zweck. BITV Bedingung Abschnittsüberschriften Es sind Abschnittsüberschriften zu verwenden, die den Inhalt weiter strukturieren.

38 Barrierefreiheit LISTEN Anlage 2 der BITV 2.0, Teil 2 Inhalte sind durch Absätze und Überschriften logisch zu strukturieren. Aufzählungen mit mehr als drei Punkten sind durch Listen zu gliedern.

39 Barrierefreiheit TABELLEN BITV Bedingung Aussagekräftige Reihenfolge Wenn die Reihenfolge, in der der Inhalt präsentiert wird, Auswirkungen auf dessen Bedeutung hat, ist die richtige Lese-Reihenfolge durch Programme erkennbar. BITV Bedingung Sensorische Merkmale Anweisungen zum Verständnis und zur Nutzung des Inhalts stützen sich nicht ausschließlich auf sensorische Merkmale der Elemente wie z. B. Form, Größe, visuelle Platzierung, Orientierung oder Ton.

40 Barrierefreiheit BILDER BITV Bedingung Nicht-Text-Inhalte Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der Nutzerin präsentiert wird, ist eine Text-Alternative bereitzustellen, die den Zweck dieses Inhalts erfüllt. BITV Bedingung Schriftgrafiken Schriftgrafiken werden ausschließlich zur Dekoration verwendet oder in Fällen, in denen eine bestimmte Textpräsentation eine wesentliche Voraussetzung für die Vermittlung der Informationen ist.

41 Barrierefreiheit LINKS BITV Bedingung Zweck eines Links Ziel und Zweck eines Links sind aus dem Linktext selbst ersichtlich.

42 Barrierefreiheit NAVIGATION BITV Bedingung Einheitliche Navigation Navigationsmechanismen, die innerhalb eines Webangebots wiederholt werden, treten bei jeder Wiederholung in der gleichen Reihenfolge auf, es sei denn, die Nutzerin oder der Nutzer veranlasst eine Änderung.

43 Barrierefreiheit EINFACHE UND KLARE SPRACHE BITV Bedingung Einfache Sprache Für alle Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist. Bei schwierigen Texten werden zusätzliche erklärende Inhalte oder grafische oder Audio-Präsentationen zur Verfügung gestellt. BITV Bedingung Einheitliche Bezeichnung In einem Webangebot und innerhalb verbundener Webseiten werden Elemente mit gleicher Funktionalität einheitlich bezeichnet.

44 Barrierefreiheit WOZU DAS GANZE? Texte werden überflogen Lesen auf Bildschirmen anstrengender Darstellung, Strukturierung und Stil Aussagekräftige Überschriften wichtige Begriffe hervorheben Kernaussagen in Boxen zusammenfassen

45 Barrierefreiheit BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

46 Barrierefreiheit BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

47 Barrierefreiheit SCREENREADER Bildschirmleseprogramm für Blinde und Sehbehinderte Vermittelt Informationen akustisch oder taktil über Braillezeile Screenreader für Windows-Systeme NVDA (=NonVisual Desktop Access, OpenSource) Cobra (kostenpflichtig) Screenreader für Linux-Systeme Orca (OpenSource)

48 Barrierefreiheit COBRA (SCREENREADER) Funktionsweise Alle dargestellten Elemente (Fenster, Menüs, Auswahlboxen, aktuelle Eingabeposition ) werden eingelesen Elemente werden interpretiert und sprachlich ausgegeben Z.B. <img src= Bildquelle alt= Alternativer Titel /> Navigation zwischen Überschriften mittels H-Taste möglich Navigation zwischen Blöcken mittels Tab-Taste möglich Tabellen werden von links nach rechts und von oben nach unten gelesen; kein Hinweis beim Zeilenwechsel

49 Barrierefreiheit COBRA (SCREENREADER) Name Funktion Max Mustermann Otto Normalverbraucher Erika Mustermann Personalausweisbeauftragte Maria Musterfrau Führerscheinbeauftragte Vorgelesener Text: (Überschrift 2) Name <Pfeil nach unten> (Überschrift 2) Funktion <Pfeil nach unten> Max (fett) Mustermann (fett Ende) Otto Normalverbraucher Erika Mustermann Personalausweisbeauftragte Maria Musterfrau Führerscheinbeauftragte

50 Barrierefreiheit FRAGEN? Wer ist betroffen? Barrierearmes Internet Prinzipien der Barrierefreiheit Behinderten-Gleichstellungsgesetz Typische Probleme und Tipps Checkliste für Redakteure Screenreader

51 WYSIWYG-Editor DER WYSIWYG-EDITOR WYSIWYG = What You See Is What You Get Erstellen und Bearbeiten von Web-Inhalten Zentrales Element

52 WYSIWYG-Editor FUNKTIONEN DES EDITORS Redakteur benötigt keinerlei Vorkenntnisse über HTML & Co. Angelehnt an Textverarbeitungsprogramme

53 WYSIWYG-Editor FETT, KURSIV UND UNTERSTRICHEN Um gezielt Worte oder Wortgruppen hervorzuheben Keine kompletten Texte formatieren Nicht erlaubt ist Verwendung für Gliederungspunkte

54 WYSIWYG-Editor LISTEN Unsortierte Listen Sortierte Listen von 1..n Unterlisten durch Einrücken möglich Verwendung einer Liste >= drei Aufzählungspunkten

55 WYSIWYG-Editor LINK EINFÜGEN Verweis auf eine andere Seite, Anker auf derselben Seite oder auf ein Dokument Interne Seite: relativer Link ohne tu-freiberg.de davor oder /node/node_id Externe Seite: vollständige Web-Adresse mit http Dokument kann über Dateibrowser hochgeladen werden Beschreibungstext für Link eintragen

56 WYSIWYG-Editor LINK EINFÜGEN DATEIBROWSER

57 WYSIWYG-Editor BILD EINFÜGEN Bild kann sich im Internet befinden oder lokal auf dem Computer Über Dateibrowser hochladen/auswählen Beschreibung und Titel des Bildes eintragen Drei Größen zur Auswahl: 112px, 192px und 544px Automatische Umrechnung auf ausgewählte Breite Ausrichtung links- oder rechtsbündig

58 WYSIWYG-Editor ZITATBLOCK Zitatblock = Box für optische Hervorhebung Mehrere Inhalte in einer Box möglich Rahmen umrandet Box Box geht über gesamte Seitenbreite Sinnvoller Einsatz, kein übermäßiger

59 WYSIWYG-Editor TRENNSTRICH Dient zur optischen Abgrenzung Beginnt auf neuer Zeile Löscht Fließtext

60 WYSIWYG-Editor ÜBERSCHRIFTEN Überschriften dienen zur Gliederung der Inhalte Automatische Formatierung Drei Stufen wählbar: Größe 2, 3 und 4 Hierarchisch verwenden

61 WYSIWYG-Editor INHALTSVERZEICHNIS Erstellt automatisch Übersicht Generiert Sprungmarken vorhandener Überschriften Zeigt Überschriften hierarchisch an

62 WYSIWYG-Editor ZUM SEITENANFANG ANKER Erstellt Sprungmarke zurück zum Seitenanfang Kombinierbar mit Inhaltsverzeichnis Schnelleres Navigieren auf langen Seiten

63 WYSIWYG-Editor TABELLEN Tabelle nur als Datentabellen verwenden Beliebig viele Spalten und Zeilen Tabellenbreite explizit festlegbar Ansonsten automatisch über gesamte Seitenbreite Zeilen und Spalten hinzufügen/löschen/verbinden Formatierung künftig über zentrales Design

64 WYSIWYG-Editor MULTIMEDIA Einbinden von multimedialen Elementen möglich Diverse Formate [Flash, HTML5, Quicktime, ] Datei kann auch über Dateibrowser hochgeladen/ausgewählt werden

65 WYSIWYG-Editor SEITE EINBETTEN Interne Seiten einbinden [[nid:1234]] Vollständige Darstellung der Inhalte Änderungen an Originalseite automatisch sichtbar

66 WYSIWYG-Editor VISITENKARTE Mitarbeiter einheitlich darstellbar Bild im Quer-/Hochformat oder Platzhalter Eingabemaske für Personendaten

67 WYSIWYG-Editor ACCORDION Erzeugt Container für aufklappbare Inhalte Überschrift + Text

68 Einsteigerschulung und Basisinformationen zur Barrierefreiheit ÜBUNGEN Word-Dokument herunterladen Drupal 2 Meine Gruppen Schulungsbereich Übungsaufgaben selbstständig bearbeiten Bei Fragen oder Unklarheiten umgehend melden

69 Einsteigerschulung und Basisinformationen zur Barrierefreiheit WEITERFÜHRENDE INFORMATIONEN Webportal: Informationen zum Webauftritt, Anleitungen und Support Fragen und Probleme: Weitere Weiterbildungen: Drupal für Fortgeschrittene Einführung in das Bloggen mit WordPress Bloggen für Fortgeschrittene Webinhalte gestalten Online-Umfragen erstellen mit LimeSurvey