CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript •...

22
Kompetenznetzwerk Informationstechnologie zur Förderung der Integration von Menschen mit Behinderungen CMS und Barrierefreiheit am Beispiel Typo3 CMS und Barrierefreiheit am Beispiel Typo3 Stefan Parker, Sonja Strohmaier Stefan Parker, Sonja Strohmaier

Transcript of CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript •...

Page 1: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

CMS und Barrierefreiheit am Beispiel Typo3

CMS und Barrierefreiheit am Beispiel Typo3

Stefan Parker, Sonja StrohmaierStefan Parker, Sonja Strohmaier

Page 2: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Typo3 - Allgemeines

• Open-Source Content Management System• Programmiert in PHP• Konfigurierbar über Typoscript• Voraussetzungen:

– Webserver (Apache, IIS)– PHP5 (vor Version 4.2.0 auch PHP4)– Datenbank (MySQL empfehlenswert)

Page 3: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Typo3 barrierefrei

• Sicht des Technikers– Template Erstellung– Code - Validität– Menüs– Sonstige Extensions– Editor– Probleme

• Sicht der Redaktion– Editieren von Webseiten– Überschriften, Links, Acronyme– Tabellen und Formulare

Page 4: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Template Erstellung

• Ein oder wenige HTML-Templates als Basis– Valides XHTML– Valides CSS– 100% barrierefrei– Aufbau einer solchen Seite: siehe „Workshop: Entwurfsmuster

im barrierefreien Webdesign / Shadi Abou-Zahra & Gerhard Nussbaum“ um 16:30 Uhr

• Manchmal eigenes Template für Extension

Page 5: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Code - Validität

• Seit Version 4.0 liefert Typo3 validen XHTML-Code• Zusätzliche Absicherung gegen eigene Fehler mit

XHTML-Cleaner: config.xhtml_cleaning = all• Extensions sehr unterschiedlich – manche gar nicht

valide• Extension: „qcom_htmlcleaner“ ist hilfreich• Bei Extensions teilweise „chirurgische Eingriffe“ nötig

Page 6: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Menüs

• TMenu (Text Menu) gekoppelt mit HMenu (HierarchicalMenu) verwenden (keine grafischen Menüs)

• Spezielle Wraps für Normalzustand (NO) und aktiven Zustand (ACT)

• Hierarchische Nummerierung in <dfn>-Tags via Extension „cron_accessiblemenus “ (aber: automatische accesskeys nicht benutzen!!)

Page 7: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Diverse Extensions für Barrierefreiheit (1/2)

• Css_styled_content– Entscheidend verbessert seit Typo3 4.0– Standardmäßig mitgeliefert– Erzeugt weitgehend tabellenfreien code– Kleines Manko: „Klassen-Overkill“

• Acronymmanager– automatisiert die Auszeichnung der Ausschreibung von

Abkürzungen und Akronymen– automatisiert die Auszeichnung von fremdsprachigen Begriffen

und Fachbegriffen

Page 8: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Diverse Extensions für Barrierefreiheit (2/2)

• Suche: indexed_search– Kann sei Typo3 4.0 mit einem Template gesteuert werden ->

somit leicht barrierefrei umsetzbar

• Login-Formular: new_loginbox und arotea_loginbox– Kann mit Template gestaltet werden

Page 9: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Der Editor - rtehtmlarea

• Standardmäßig mitgeliefert• Erscheinungsbild ähnlich bekannten Texteditoren• Unterstützt (einfache) barrierefreie Tabellen• Unterstützt Alternativtexte für Bilder• Beliebig anpassbar

Page 10: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Der Editor - Konfiguration

• Entfernen von Schaltelementen, die nicht-barrierefreie Tags benutzen

• Einführung zusätzlicher CSS-Klassen für barrierefreie Formatierung

• Automatisches Setzen von Icons vor Links: – Alt-Text der icons = Title der Icons = z.B.: „externer Link – öffnet

in neuem Fenster“– Versch. Icons für interne Links, externe Links und Email

Page 11: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Probleme mit Accessibility

• Tabellen– Einfache Tabellen OK– Komplexere nicht möglich („headers“-Attribut)

• Formulare– Unterschiedliche Fieldsets nicht definierbar

• Indexed Search– Paging der Suchergebnisse nur mit Javascript

Page 12: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Editieren von Webseiten

• Neue Seite erstellen / Text einfügen

– Vorsicht mit Copy / Paste, da Formatierungen ebenfalls teilweise übernommen werden (Editor)

– Vorsicht bei Sonderzeichen - richtigen HTML Code für Sonderzeichen verwenden(&amp; &euro; …)

Page 13: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Überschriften Formatieren

• Jede Seite soll eine Überschrift haben• Überschrift auch als solche ausweisen• Überschriften Hierarchie beachten

– <h1>Überschrift 1</h1>• <h2>Überschrift 2</h2>

– <h3> Überschrift 3 </h3>» <h4> Überschrift 4</h4>

Page 14: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Überschrift - Achtung

• Nicht aus Formatierungsgründen

– <h1> Überschrift 1 </h1>– <h3> Überschrift 3 </h3>

Hier entsteht ein Fehler bei der Überprüfung auf Accessibility in Priorität 2Reihenfolge einhalten

Page 15: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Bilder und Fotos im Typo3

• Bildtext ist optional verwendbar• Alternativ-Text für Bilder und Fotos verwenden, der Alt-

Text beschreibt Informationen die ein Bild liefert (Richtwert für Alt-Text: max. 150 Zeichen)

• Für längeren Alt-Text die Langbeschreibung verwenden:– zusätzlich D-Link anbieten (D=Description)– oder Langbeschreibung in den Text einbinden

• Alt-Text wird von Screenreadern standardmäßig vorgelesen

Page 16: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Foto Beispiel mit Alt-Text und Bildtext

Alt-Text (Mouse-Over), vom Screen-reader stanardmäßigvorgelesen

Bild-Text ist ständig sichtbar

Page 17: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Links

• Automatisierte barrierefreie Auszeichnung von Links mit standardmäßigem Text – „Öffnet einen internen Link im aktuellen Fenster“

• Innerhalb des Portals– „Öffnet einen externen Link in einem neuen Fenster“

• Auf externe Seiten

• Datei-Download (Angabe des Formats: .doc / .pdf)– „Startet den Datei-Download“

• Achtung bei benachbarten Links, diese sollten durch ein druckbares Zeichen getrennt sein (siehe WCAG 1.0)

Page 18: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Acronyme, Abkürzungen und Fremdsprachige Begriffe

• Acronym-Manager

– Tool für Eingabe von Acronymen, Abkürzungen und fremdsprachigen Begriffen

– Vorteil: einmalige Eingabe regelmäßige Auszeichnung der Begriffe auf allen Seiten

– Fremdsprachige Begriffe auszeichnen und Sprache angeben (Screenreader)

Page 19: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Beispiel Acronym-Manager

Eingabe Beispiel: IKT|Informations- und Kommuikations-technologie|de

Eingabe Beispiel: Lexikologie|Lehre von den Strukturierungen im Wortschatz

Page 20: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Tabellen im Typo3

• Erweiterung des Typo3 durch die Extension „AccessibleTables“

• Folgende Funktionen sind vorhanden:• Tabellen-Überschrift• Tabellen-Zusammenfassung• Auszeichnung von Spalten- oder Zeilenüberschriften

• Folgende Funktionen sind nicht vorhanden:• Komplexe Tabellen

– Zeilen und Spaltenüberschrift – Verschachtelte Tabellen

Page 21: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Formulare im Typo3

• Formular Assistent vorhanden

• generiert barrierefreie Formulare

• Eingabefelder (Textarea, normalesTextfeld, Select-Box, Radio-Buttons und Check-Buttons) brauchen Labels

Page 22: CMS und Barrierefreiheit am Beispiel Typo3€¦ · • Konfigurierbar über Typoscript • Voraussetzungen: – Webserver (Apache, IIS) – PHP5 (vor Version 4.2.0 auch PHP4) –

Kompetenznetzwerk Informationstechnologie zur Förderung derIntegration von Menschen mit Behinderungen

Typo3 und Barrierefreiheit - Fazit

Typo3 bietet eine Fülle von Erweiterungen an, die speziell die Barrierefreiheit von Webseiten unterstützenDie Installation dieser Extensions erzeugt noch keine barrierefreien Seiten. Es ist wichtig, dass der Redakteur die Funktionen auch verwendet und die erstellte Seite mit den entsprechenden Tools auch immer wieder auf Validität und Barrierefreiheit überprüft.