DRUPAL-SCHULUNG. Einsteigerschulung und Basisinformationen zur Barrierefreiheit

DRUPAL-SCHULUNG Einsteigerschulung und Basisinformationen zur Barrierefreiheit Alexander Winterstein (Zentraler Webkoordinator) Einsteigerschulun...
17 downloads 4 Views 2MB Size
DRUPAL-SCHULUNG

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

Alexander Winterstein (Zentraler Webkoordinator)

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

INHALTE Web-Content-Management-System

Grundlegende Bearbeitung

Barrierefreiheit

Inhalte formatieren und strukturieren

Übungen Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

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. 20.000 Seiten im System, ca. 2.400 Redakteure Alexander Winterstein (Zentraler Webkoordinator)

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 36.500 vollwertige Drupal-Module  davon 6.900 für Drupal 6 kompatibel  (12.600 für Drupal 7, 2.600 für Drupal 8) Alexander Winterstein (Zentraler Webkoordinator)

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  …

Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

Web-Content-Management-System Drupal

FRAGEN?  Redaktionssystem  Webbasiert  Drupal Version 6.x

 Core mit Grundfunktionen  Module für Erweiterungen  3 Drupal-Instanzen

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

LOGIN INS WEBCMS  Login erfolgt mittels Shibboleth-Authentifizierung  Zentrales Uni-Login  Login-Link im Footermenü: http://tu-freiberg.de/login

 Heutiges Schulungssystem:  http://drupal3.hrz.tu-freiberg.de

 Hinweis:  Vorheriges Login ist erforderlich für Berechtigungen. Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

REDAKTIONSMODUS

Inhalts- und Gruppenverwaltung Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

GRUPPENVERWALTUNG

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

INHALTSVERWALTUNG

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

REDAKTIONSMODUS

Bearbeitungsleiste

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

VERSIONEN

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

UNTERSEITE HINZUFÜGEN

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

NEUE SEITE ERSTELLEN

Alexander Winterstein (Zentraler Webkoordinator)

Grundlegende Bedienung

FRAGEN?  Login über Fußzeile  Inhalts- und Gruppenverwaltung  Funktionen im Bearbeitungsmodus

 Neue Inhalte anlegen

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

BARRIEREFREIHEIT

„Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann.“ Quelle: http://www.barrierefreies-webdesign.de/

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

WER IST BETROFFEN? 4 Hauptkategorien  Sehbehinderung  Hörbehinderung  Motorische Beeinträchtigung  Kognitive Beeinträchtigung

Weitere Segmente  Silver Surfer (Alter 50+)  Mobile- und TabletNutzer  Suchmaschinen (Google ist blind)

Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

BEHINDERTEN-GLEICHSTELLUNGSGESETZ  BGG definiert Standard zur Barrierefreiheit  2016 überarbeitet:  Öffentliche Einrichtungen

 Barrierefreie Infrastruktur  Inhalte in Leichter Sprache anbieten

Alexander Winterstein (Zentraler Webkoordinator)

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.“ Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

WEITERE REGELUNGEN  Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Freistaat Sachsen (Sächsisches Integrationsgesetz – SächsIntegrG), gültig ab 2005.  § 7 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.“ Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

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

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

TYPISCHE PROBLEME: TASTATURBEDIENBARKEIT

Einige Bereiche über Tastatur nur schwer oder gar nicht erreichbar

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

TYPISCHE PROBLEME: BILDER OHNE BESCHREIBUNG

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

TYPISCHE PROBLEME: ÄNDERUNGEN DER WEBSEITE

Änderungen werden nicht bemerkt, Webseite gesperrt

Alexander Winterstein (Zentraler Webkoordinator)

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) Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

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

Alexander Winterstein (Zentraler Webkoordinator)

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“

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

CHECKLISTE FÜR REDAKTEURE  Überschriften  Listen  Tabellen

 Bilder  Links  Navigation  Einfache und klare Sprache Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

ÜBERSCHRIFTEN  BITV Bedingung 2.4.6 Beschreibungen  Überschriften und Label (Beschriftungen) kennzeichnen das Thema oder den Zweck.

 BITV Bedingung 2.4.10 Abschnittsüberschriften  Es sind Abschnittsüberschriften zu verwenden, die den Inhalt weiter strukturieren.

Alexander Winterstein (Zentraler Webkoordinator)

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.

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

TABELLEN  BITV Bedingung 1.3.2 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 1.3.3 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.

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

BILDER  BITV Bedingung 1.1.1 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 1.4.9 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. Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

LINKS  BITV Bedingung 2.4.9 Zweck eines Links  Ziel und Zweck eines Links sind aus dem Linktext selbst ersichtlich.

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

NAVIGATION  BITV Bedingung 3.2.3 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.

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

EINFACHE UND KLARE SPRACHE  BITV Bedingung 3.1.5 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 3.2.4 Einheitliche Bezeichnung  In einem Webangebot und innerhalb verbundener Webseiten werden Elemente mit gleicher Funktionalität einheitlich bezeichnet. Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

Alexander Winterstein (Zentraler Webkoordinator)

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) Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

COBRA (SCREENREADER) Funktionsweise

 Alle dargestellten Elemente (Fenster, Menüs, Auswahlboxen, aktuelle Eingabeposition…) werden eingelesen  Elemente werden interpretiert und sprachlich ausgegeben  Z.B.

 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 Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

COBRA (SCREENREADER) Name

Funktion

Max Mustermann

Otto Normalverbraucher

Erika Mustermann

Personalausweisbeauftragte

Maria Musterfrau

Führerscheinbeauftragte

Vorgelesener Text: (Überschrift 2) Name (Überschrift 2) Funktion Max (fett) Mustermann (fett Ende) – Otto Normalverbraucher – Erika Mustermann – Personalausweisbeauftragte – Maria Musterfrau – Führerscheinbeauftragte

Alexander Winterstein (Zentraler Webkoordinator)

Barrierefreiheit

FRAGEN?  Wer ist betroffen?  Barrierearmes Internet  Prinzipien der Barrierefreiheit

 Behinderten-Gleichstellungsgesetz  Typische Probleme und Tipps  Checkliste für Redakteure  Screenreader Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

DER WYSIWYG-EDITOR

WYSIWYG = What You See Is What You Get Erstellen und Bearbeiten von Web-Inhalten Zentrales Element

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

FUNKTIONEN DES EDITORS  Redakteur benötigt keinerlei Vorkenntnisse über HTML & Co.  Angelehnt an Textverarbeitungsprogramme

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

LISTEN  Unsortierte Listen  Sortierte Listen von 1..n  Unterlisten durch Einrücken möglich

 Verwendung einer Liste >= drei Aufzählungspunkten

Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

LINK EINFÜGEN – DATEIBROWSER

Alexander Winterstein (Zentraler Webkoordinator)

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 Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

TRENNSTRICH  Dient zur optischen Abgrenzung  Beginnt auf neuer Zeile  Löscht Fließtext

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

INHALTSVERZEICHNIS  Erstellt automatisch Übersicht  Generiert Sprungmarken vorhandener Überschriften  Zeigt Überschriften hierarchisch an

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

ZUM SEITENANFANG – ANKER  Erstellt Sprungmarke zurück zum Seitenanfang  Kombinierbar mit Inhaltsverzeichnis Schnelleres Navigieren auf langen Seiten

Alexander Winterstein (Zentraler Webkoordinator)

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

SEITE EINBETTEN  Interne Seiten einbinden  [[nid:1234]]  Vollständige Darstellung der Inhalte  Änderungen an Originalseite  automatisch sichtbar

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

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

Alexander Winterstein (Zentraler Webkoordinator)

WYSIWYG-Editor

ACCORDION  Erzeugt Container für aufklappbare Inhalte  Überschrift + Text

Alexander Winterstein (Zentraler Webkoordinator)

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

ÜBUNGEN  Word-Dokument herunterladen  http://drupal2.hrz.tu-freiberg.de/schulungsbereich  Drupal 2  Meine Gruppen  Schulungsbereich

 Übungsaufgaben selbstständig bearbeiten  Bei Fragen oder Unklarheiten umgehend melden

Alexander Winterstein (Zentraler Webkoordinator)

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

WEITERFÜHRENDE INFORMATIONEN  Webportal: http://tu-freiberg.de/webportal/  Informationen zum Webauftritt, Anleitungen und Support

 Fragen und Probleme: [email protected]  Weitere Weiterbildungen:  Drupal für Fortgeschrittene  Einführung in das Bloggen mit WordPress  Bloggen für Fortgeschrittene  Webinhalte gestalten  Online-Umfragen erstellen mit LimeSurvey Alexander Winterstein (Zentraler Webkoordinator)