Barrierefreie Webseiten

Barriere­freie Widgets entwickeln

Wenn die HTML-Bordmittel nicht ausreichen, um barrierefreie Bedienmuster im Browser umzusetzen, gibt es ARIA (Accessible Rich Internet Applications). Mit diesem mächtigen Erweiterungs-Kit und JavaScript lassen sich individuelle und dennoch zugängliche Web-Oberflächen realisieren. Wird ARIA aber falsch eingesetzt, kann man das barrierefreie Nutzungserlebnis auch hervorragend ruinieren.

Anhand gängiger Beispiele wie Akkordeon, Karussell und Tab-Navigation lernen Sie in diesem Workshop, wie Sie ARIA verantwortungsvoll einsetzen, um komplexe Widgets zu planen und umzusetzen. Wesentliche Konzepte wie Tastaturbedienbarkeit oder die sinnvolle Benennung für assistive Technologien werden so vermittelt, dass Sie sie später auf eigene Projekte übertragen können.

Voraussetzungen für die Teilnahme:

• profunde HTML-Kenntnisse sowie CSS- und JavaScript-Grundwissen (Die Inhalte beziehen sich explizit nicht auf Frontend-Frameworks wie React, Vue.js, Angular und Co., sollten aber darauf übertragbar sein.)
• ein aktueller Desktop-Internetbrowser (Mozilla Firefox, Google Chrome o. Ä.)
• ein zur Programmierung geeigneter Texteditor bzw. eine Programmierumgebung (IDE), mit der Sie sicher umgehen können
• von Vorteil: ein installierter Screenreader (NVDA unter Windows, VoiceOver unter MacOS)

Barriere­freie Redaktion mit WordPress

Am Beispiel des Content-Management-Systems WordPress zeigt Detlef Girke Ihnen in diesem Workshop, welche Maßnahmen auf redaktioneller Ebene möglich und nötig sind, um die Barrierefreiheit von Internetseiten nachhaltig zu gewährleisten.

Sie lernen, wie Sie den Bedürfnissen von Menschen mit Behinderung mit den zur Verfügung stehenden Mitteln begegnen können. In praktischen Übungen erfahren Sie, wie Sie eine barrierefreie Semantik entwickeln, systematisch strukturieren, mit Tabellen und Schaubildern wie z. B. Tortendiagrammen umgehen, Teaser aufbauen etc. Sie werden sehen, dass Barrierefreiheit im redaktionellen Bereich weniger mit Technik zu tun hat, als man gemeinhin vermutet.

Alle Teilnehmenden erhalten einen Zugang für das verwendete Testsystem.

Barriere­freiheit testen – etablierte Verfahren und was Sie selbst tun können

In diesem Workshop stellen Ihnen Marc Haunschild und Jörg Morsbach verschiedene Testverfahren vor und geben Ihnen die Möglichkeit, selbst einige der Werkzeuge auszuprobieren, die in den meisten Verfahren zur Überprüfung eingesetzt werden. Daneben skizzieren sie den rechtlichen Rahmen, um zu klären, wer in welchem Umfang zur Barrierefreiheit verpflichtet ist. Neben Marc und Jörg kommen weitere Expert*innen mit Gastbeiträgen zu Wort.

So wechseln Theorie und Praxis einander ab und machen den Workshop zu einer lebendigen Präsentation unterschiedlicher Sichtweisen, in deren Anschluss die Teilnehmenden die Barrierefreiheit von Webseiten selbst einschätzen und Stolpersteine aufspüren können: Ist alles ohne Maus bedienbar, wie klingt die Umsetzung in einem Screenreader und wie steht es um Skalierbarkeit und Kontraste?

Voraussetzungen für die Teilnahme:

• Firefox und Google Chrome, sicherer Umgang mit dem Betriebssystem
• Color Contrast Analyser
• Firefox-Addon WAVE – alternativ a11yTools von Paul Adams für Safari (kostenpflichtig)

Leichte Sprache für barrierefreie Webtexte

Sprache, egal ob geschrieben oder gesprochen, kann Menschen mitnehmen oder sie ausgrenzen. Leichte Sprache stellt eine Verbindung zwischen möglichst vielen Menschen her. Sie ist ein wichtiges Instrument für Barrierefreiheit und Voraussetzung für eine uneingeschränkte Teilhabe.

In diesem Workshop lernen Sie mit Andrea Tischner und Nina Rademacher die Regeln für Leichte Sprache. Sie erstellen in praktischen Übungen gemeinsam erste Worterklärungen und Texte in Leichter Sprache. Frau Rademacher wird als Expertin in eigener Sache Ihre Ergebnisse prüfen. Sie wird dabei auch den Finger in die Wunde legen, um Ihnen zu zeigen: Leichte Sprache ist kein Leichtgewicht.

Barrierefreies UI-Design

Als Designer*in spielen Sie eine Schlüsselrolle beim Erstellen von barrierefreien digitalen Anwendungen. Ihre Entscheidungen haben massiven Einfluss auf die Entwicklung, das heißt, Sie können viele Probleme und Bugs von vornherein verhindern.

In diesem Workshop zeigen wir Ihnen, was Sie unbedingt wissen müssen, um eine Webseite barrierefrei zu machen: von der Farbwahl bis zur Auswahl der richtigen UI-Komponenten (Slider, Dropdown etc.). Außerdem lernen Sie, wie Sie in Figma Ihre Design-Entscheidungen in Sachen Barrierefreiheit am besten dokumentieren und an die Entwicklerinnen und Entwickler weitergeben. Nach dem Workshop wissen Sie also:

• wie Sie ein barrierearmes Design-System starten
• wie Sie barrierearme UI-Designs erstellen
• wie Sie Entscheidungen bezüglich Barrierefreiheit an Entwickler*innen kommunizieren
• wie Sie im Browser barrierefreies Design testen können

Voraussetzungen für die Teilnahme:

• ein (kostenloser) Figma-Account
• von Vorteil, aber nicht zwingend notwendig: eine Grundidee davon, wie man mit Figma UI-Designs erstellt

Barrierefreie Websites mit TYPO3 entwickeln

Als Entwickler*in schaffen Sie die Grundlage für zugängliche Webseiten. Darauf aufbauend müssen die Designs entsprechend barrierefrei umgesetzt werden. Und Sie können der Redaktion die barrierefreie Befüllung der Webseite mit Inhalten erleichtern.

In diesem Workshop lernen Sie, wie Sie mit TYPO3 den Grundstock für barrierefreie Webseiten legen. Wir zeigen Ihnen, welche Punkte bei der Entwicklung zu beachten sind, und geben Hinweise, welche Elemente Sie problemlos nutzen können und wo es Schwierigkeiten geben könnte. Außerdem erfahren Sie, wie Sie die Redaktion bei der Eingabe von barrierefreien Inhalten am besten unterstützen, um (Folge-)Probleme bei der Nutzung zu vermeiden.

Nach dem Workshop wissen Sie:

• was TYPO3 für Barrierefreiheit mitbringt
• wie man ein barrierefreies Basis-Frontend mit einer einfachen Extension erstellt
• welche TYPO3-Extensions gut für barrierefreie Websites geeignet sind
• wie man die eigene Umsetzung testen kann

Voraussetzungen für die Teilnahme:

• Wir setzen ein TYPO3-v12-Projekt auf, daher benötigen Sie eine lokale TYPO3-Entwicklungsumgebung (bevorzugt ddev).
• Kenntnisse im Umgang mit TYPO3, HTML, CSS und JavaScript 
• ein aktueller Browser
• von Vorteil: ein installierter Screenreader (NVDA für Windows, VoiceOver für MacOS)
   

Barrierefreie PDFs erstellen

Barrierefreie PDF-Dokumente aus Word und PowerPoint zu erstellen ist relativ unkompliziert und ohne großen Mehraufwand möglich. Doch was macht ein PDF überhaupt barrierefrei? Und wie wirkt sich das aus? Nach einem kurzen Einblick in die aktuelle und kommende Gesetzlage zeigt Ihnen Markus Erle in diesem Workshop, welche Schritte Sie gehen müssen, wie die Quelldateien gestaltet sein sollten und wie Sie sicherstellen, dass Ihre PDFs tatsächlich allen wichtigen Standards entsprechen.

Es reicht aber nicht, wenn im Unternehmen nur eine Person Dokumente barrierefrei umsetzt. Die Barrierefreiheit ist ein Gemeinschaftsprojekt. Markus Erle hat deshalb schon viele Organisationen bei der Implementierung des Workflows für Dokumente unterstützt, darunter beispielsweise den Deutschen Bundestag, aber auch kleinere Consultingfirmen und Marketingagenturen. Er wird mit Ihnen Wege für unterschiedliche Unternehmensgrößen und -ansätze durchsprechen, und es gibt dabei immer Raum für Ihre spezifischen Fragen. Gemeinsam lernt es sich am besten!

Voraussetzung für die Teilnahme:

• von Vorteil, aber nicht zwingend: Office Suite (Microsoft Word/Microsoft PowerPoint) sowie die kostenlose Demoversion von axesWord