Barrierefreie Internet-Seiten Wolfgang Wiese 7. – 8. März 2008.

Präsentation zum Thema: "Barrierefreie Internet-Seiten Wolfgang Wiese 7. – 8. März 2008."—  Präsentation transkript:

1 Barrierefreie Internet-Seiten Wolfgang Wiese 7. – 8. März 2008

2 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese2 Organisation  Zeitplan 7. März 2008  09.00 – 09.10Organisatorisches  09.10 – 10.30 Theorie Einführung: Was bedeutet Barrierefreiheit? Gesetzeslage, Wirtschaftlichkeit  10.30 – 10.45Pause  10.45 – 12.15Fallbeispiele: Gute und schlechte Lösungen, Testmethoden: Checkliste FAU/München, BITV-Test (Selbsttest und ausführlich), BIENE-Checkliste, Durchführung des BITV-Selbsttests zur Demonstration

3 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese3 Organisation  Zeitplan 8. März 2008  09.10 – 10.30 Besprechung und Ergebnisse der BITV-Tests; Praxisbeispiele: Navigationsmenüs Sprungmarken Struktur einer Webseite / Gliederung von Inhalten Links Tabellen Formulare Einbindung von Medien  10.30 – 10.45Pause  10.45 – 12.15Hilfsmittel Vorlagenkatalog: Vorstellung und Nutzung

4 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese4 Warm-Up  Was bedeutet Barrierefreiheit?  Meinungen der Teilnehmer… :  Für Menschen mit Behinderungen  Logische Navigation  Verständlicher Inhalt, klare Sprache  Skalierbarer Text  Übersichtlichkeit  Browsercompatible Formate  Nutzbare Ausgabe auf Drucker  Geringe Ladezeiten  Bekannte Schnittstellen (Standards)

5 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese5 Einführung  Was bedeutet Barrierefreiheit?  „Barrierefreies Webdesign zielt darauf ab, Inhalte und Interaktionen im Netz für (möglichst) alle Nutzergruppen und Endgeräte zugänglich zu machen“ (Quelle: Charlier/Radtke, Buch „Barrierefreies Webdesign“)  „Barrierefreies Internet bezeichnet Internet-Angebote, die von allen unabhängig von ihren körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können. Dies schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z. B. Textbrowser) oder altersbedingten Einschränkungen (z. B. Sehschwächen) sowie automatische Suchprogramme ein.“ (Quelle: Wikipedia)

6 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese6 Einführung  Das ganze Geheimnis: Jeder,  unabhängig von der jeweiligen Auffassungsgabe,  unabhängig von der jeweiligen Methodik,  unabhängig vom Gerät,  unabhängig vom Betriebssystem,  unabhängig von der Software, bekommt beim Zugriff auf  dieselbe Seite  dieselben Inhalte. Jeder hat die Freiheit selbst zu entscheiden, mit welchem Gerät, welcher Software und welchem Leseverhalten er, sie oder es unterwegs ist.

7 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese7 Einführung  Für wen eigentlich?  Menschen mit „Behinderungen“:  Sehbehinderte  Motorisch Behinderte  Gehörlose  Lernbehinderte  „Gruppe 50+“  Aber auch Menschen in besonderen Situationen:  Fachfremde  Handy- oder Handheld-Nutzer  Reisende mit Routenplaner  Andere Geräten mit Zugriff auf das Internet…  Und auch besondere Ausgabemedien:  Drucker  Projektoren  Suchmaschinen  Software-Agentensysteme

8 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese8 Einführung  Menschen mit „Behinderungen“: Sehbehinderte  Blinde (ca. 150.000-200.000 Menschen in D; benötigen Möglichkeit zur Ausgabe auf Braille oder auf Screenreader)  Farbenblinde (10% aller Menschen in D. Benötigen kontraststarke Farben)  „Tunnelblick“ (benötigen die Möglichkeit zur Textverkleinerung)  „Altersweitsichtige“ (benötigen die Möglichkeit zur Textvergrößerung) Folge: Menschen mit Sehbehinderungen müssen in der Lage sein, alle Darstellungsparameter selbst zu beeinflussen. Seiten müssen klar und logisch strukturiert sein. Auflösung des Bildschirms muss flexibel einstellbar sein. Hinweise im Text nicht auf Sehende einschränken (kein: „Klicken Sie hier“ oder „Der rot markierte Text ist wichtig“).

9 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese9 Einführung  Menschen mit „Behinderungen“: Sehbehinderte  Geräte: Braillezeile (Bildquelle: Katholisches Blindenwerk Norddeutschland e.V.)

10 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese10  Menschen mit „Behinderungen“: Sehbehinderte  Geräte: Vergrößerungssystem (Bildquelle: BAUM Retec AG)

11 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese11 Einführung  Menschen mit „Behinderungen“: Gehörlose  Ca. 60.000 – 100.000 in D  Teilweise Deutsch als Fremdsprache (Wissenstand entspricht 4. – 6. Schuljahr)  Videos (z.B. Vorlesungen) können nur teilweise erfasst werden  Warnsignale über Tonausgaben werden nicht beachtet  Übrigens: Es gibt auch Leute, die keinen PC-Lautsprecher (aktiviert) haben! Folge: Bilder und Videos sollten zusätzlich mit verständlichen Texterklärungen beschrieben werden. (So wie es in Publikationen, wie z.B. in Studien- und Diplomarbeiten, auch üblich ist) Warnsignale nicht über ein Tonausgaben allein, sondern immer auch durch optisch Warnsignale ergänzen.

12 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese12 Einführung  Menschen mit „Behinderungen“: Motorisch Behinderte  Arme und Finger bewegungsunfähig – oder bewegen sich spontan und schwer kontrollierbar  Tastatur und/oder Maus können nicht als Standardeingabegerät verwendet werden  Nutzung von Spezialgeräten:  Verschiedene Signalgeber  Eyetracker  Klein- und Großfeldtastaturen, Einhandtastaturen  Motorische Behinderungen meist Folge von Erkrankungen und Unfällen. Z.B. Schlaganfall. Aber auch vom Alter. Oder auch nur einer „Sehnenscheidenentzündung“… Folge: Webseiten müssen klar strukturiert sein und geräteunabhängig. Navigationselemente müssen ausreichend groß sein. Auflösung des Bildschirms muss flexibel einstellbar sein.

13 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese13 Einführung  Menschen mit „Behinderungen“: Motorisch Behinderte  Geräte: Groß- und Kleinfeldtastaturen (Bildquelle: ABP – Gesellschaft für angewandte Kybernetik mbH)

14 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese14  Menschen mit „Behinderungen“: Motorisch Behinderte  Geräte: Mundmaus (Bildquelle: LifeTool Computer aided Communication)

15 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese15 Einführung  Menschen mit „Behinderungen“: Lernbehinderte  Verschiedene Arten von kognitiven, psychischen oder anderen geistigen Behinderungen  Fachtexte und Fachbegriffe oft unverständlich  Große Gefahr der Ablenkung durch „Gimmicks“ auf einer Webseite Folge: Notwendigkeit von übersichtlichen und leicht durchschaubaren Navigationen Keine ausschweifenden Texte: Kurze Texte aus kurzen Sätzen und möglichst ohne „schwierige“ Wörter Hilfreich ist u.U. die Verwendung von eindeutigen Farbcodierungen, Ideogrammen und Symbolen

16 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese16 Einführung  Menschen mit „Behinderungen“: „Gruppe 50+“  Steigende Zahl an Menschen in D in dieser Gruppe  Nachlassende Sehkraft (schon ab 40)  Nachlassendes Gehör  Unerfahrenheit in der Nutzung neuer digitaler Medien (noch)  Einbußen in der Feinmotorik (ab etwa 60)  Konzentrations- und Gedächtnisschwächen (im höheren Alter) Folge: -wie alle vorherigen Gruppen-

17 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese17 Einführung  Besondere Situationen: Fachfremde  Verständnisprobleme:  Fachbegriffe  Organisatorisches Vorwissen  Vorausgesetztes Fachwissen des Textes  Uneindeutige oder nicht gebräuchliche Abkürzungen (aber auch: Ausschreibungen von gängigen Fachbegriffen. Z.B. „ISDN“, „DSL“, „MP3“)  Prozessdiagramme und Schaubilder ohne Erklärungen  Symbole Folge: Bei Seiten, die nicht speziell auf eine Zielgruppe bezogen sind, sind Texte allgemein verständlich zu halten. Es gelten dieselben didaktischen Regeln, die auch bei klassischen Print-Publikationen etabliert sind.

18 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese18 Einführung  Besondere Situationen: Handy- oder Handheld Nutzer  Kleine Bildschirmauflösung – „Small Screen Devices“  Je nach Gerätegeneration nur eingeschränkter Funktionsumfang bei der Nutzung von Webtechniken:  JavaScript und Java nicht oder nur eingeschränkt nutzbar  Maussteuerung bei Handys oft nicht möglich  Bilder teilweise nicht oder in schlechter Qualität sichtbar  Videos nur in neuen Handygenerationen abspielbar  Langsame Internet-Verbindung Folge: Webseiten müssen skalierbar sein in Layout und Schrift; Tabellen, Textelemente und Bereiche müssen „linearisierbar“ sein. Bilder auch im verkleinerten Zustand noch erkennbar.

19 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese19 Einführung  Besondere Situationen: Handy- oder Handheld Nutzer  Handys allein im Netz… (Bildquelle: Rainer Schlegel, Agentur 52eins, Webkongress Erlangen 2006)

20 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese20 Einführung  Besondere Situationen: Reisende mit Routenplaner  Steigende Funktionsvielfalt bei Routenplaner / Multifunktionsgeräten. Nicht mehr nur allein Verkehrsfunk, sondern auch:  Abspielen von Videos und Musik  Radio  Terminkalender  Integration von Webseiten  usw.  Trend zur Verschmelzung mit Handys und Handhelds Folge: - wie Handy- und Handheld-Nutzer-

21 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese21 Einführung  Besondere Situationen: Geräte mit Zugriff auf das Internet  Immer größere Vielfalt von Geräten, die aus dem Internet aktuelle Informationen erhalten und nutzen:  Fernseher  Videogeräte und DVD-Player  Musikanlagen  Kühlschränke  Moderne Systeme für Gebäudeautomation Folge: Strukturierter und logischer Aufbau von Webseiten. Notwendigkeit zur Einhaltung von Standards bei der Gestaltung von Webauftritten

22 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese22 Einführung  Besondere Situationen: Geräte mit Zugriff auf das Internet  Geräte für Gebäudeautomation (Bildquelle: CIBEK technology + trading GmbH)

23 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese23 Einführung  Besondere Ausgabemedien: Drucker  Farb- oder SW-Drucker  Links und Navigationsmechanismen im Ausdruck unsinnig  Mangelnde Kontraste (auch bei Farbdruck) können Probleme machen  Spezielle Anforderungen an das Layout der Druckausgaben möglich (z.B. in Form einer „Corporate Identity“ für Print) Folge: Für Druckausgaben sollten eigene Stylesheets bereit gestellt werden. Navigation und andere Elemente, die bei der Druckausgabe keine Funktion erfüllen können, sollten ausgeblendet werden.

24 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese24 Einführung  Besondere Ausgabemedien: Projektoren  Problematik der Farben und Helligkeiten; Unterschiedliche Raumbeleuchtung und lichtschwache Projektoren sorgen für eine schlechtere Farb- und Bildqualität  Oft nur kleinere Bildschirmauflösungen möglich  Schriften müssen oft vergrößert werden Folge: Webseiten müssen skalierbar sein in Layout und Schrift Farben müssen ausreichend kontrastreich sein. Für besondere Seiten (Tutorien und Vorlesungsskripten, die als Webseiten erstellt wurden) macht ein eigenes Stylesheet Sinn.

25 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese25 Einführung  Besondere Ausgabemedien: Suchmaschinen  Durchsuchen alle Webseiten, sofern diese über Links erreichbar und zugänglich  Interessieren sich für Texte und verlinkte Mediendokumente (z.B. PDF, Office-Dateien, usw.)  Ignorieren Texte, Funktionen oder Links, die mit JavaScript generiert wurden  Interpretieren keine Bildinhalte  Beispiele:  Google-Spider  MnGoSearch Suchspider Folge: Texte und Verlinkungen müssen auch als Texte im Quellcode vorliegen. Notwendigkeit zur Einhaltung von Standards bei der Gestaltung von Webauftritten. Logischer und strukturierter Aufbau von Webseiten hilfreich.

26 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese26 Einführung  Besondere Ausgabemedien: Software-Agentensysteme  Durchsuchen vorgegebene Webseiten nach definierten Bereichen und Semantiken  Ignorieren Texte, Funktionen oder Links, die mit JavaScript generiert wurden  Können u.U. auch Bilder interpretieren  Beispiele:  Kalender-Agenten;  Adressbuch-Sammler  News-Digest / Feedreader  Bilder- und Text-Suchdienste; (Spezielle Suche nach urheberrechtlich relevanten Materialien oder Plagiaten) Folge: Notwendigkeit zur Einhaltung von Standards bei der Gestaltung von Webauftritten. Logischer und strukturierter Aufbau von Webseiten sehr hilfreich!

27 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese27 Einführung  Zusammenfassung:  Sichtweise auf klassische „Behinderte“ (Menschen die man als solche zu erkennen glaubt) nicht ausreichend: Je nach Situation und Lebensabschnitt ist jeder betroffen. „Barrierefreiheit ist nicht nur für Behinderte. Barrierefreiheit ist für alle“ (Dr. Polzin, ehem. Leiter des Arbeitsstabs der Beauftragtem der Bundesrgierung für die Belange behinderter Menschen)  Wenige, aber nachhaltige Grundregeln:  Strukturierter und logischer Aufbau von Seiten  Trennung von Layout und Inhalt  Skalierbarkeit  Einhaltung von Standards  Verständliche Inhalte

28 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese28 Gesetzeslage  Bund  1. Mai 2002: Gesetz zur Gleichstellung behinderter Menschen  Löste veraltetes Behindertengesetz ab  „Barrierefreiheit nicht mehr nur eine nette Geste sondern für die Behörden des Bundes Pflicht“  17. Juli 2002: Barrierefreie Informationstechnik-Verordnung (BITV), basiert auf WCAG 1.0 und Diskussionen mit Behindertenverbänden  Gilt für:  Intranetauftritte und –angebote die öffentlich zugänglich sind  Graphische Programmoberflächen, die öffentlich zugänglich sind von Behörden der Bundesverwaltung  Prioritäten I (zwingend einzuhaltende Standards) und Priorität II (zusätzliche Standards bei zentralen Navigations- und Einstiegsangeboten: Portalen)  „Nur-Text-Lösungen“ sind „nicht wünschenswert“ und nicht barrierefrei.  Umsetzungsfristen:  31.12.2003: Priorität I für alle Seiten die sich an Behinderte richten  31.12.2005: Priorität I musste erfüllt sein für alle  Klagemöglichkeit für Verbände

29 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese29 Gesetzeslage  Bayern  1. August 2003: Bay. Gesetz zur Gleichstellung, Integration und Teilhabe von Menschen mit Behinderungen  1. Januar 2007: Bayerische Verordnung zur Schaffung barrierefreier Informationstechnik (BayBITV)  Inhalte der Verordnung koppelt sich an BITV  Eigene Fristen:  Neue Angebote sind sofort barrierefrei zu halten  Großzügige Übergangsfrist für alte Webauftritte:  31.12.2010 für Seiten die sich an Behinderte richten,  31.12.2012 alle Priorität I und  31.12.2013 alle auch Priorität II.  Enthält Ausnahmen:  Unverhältnismäßigkeit bei finanziellen, wirtschaftlichen oder verwaltungsorganisatorischen Gründen  Gemeinden, Gemeindeverbände und sonstigen juristischen Personen des Öff. Rechts wird die Einhaltung nur empfohlen.  Keine Möglichkeit für Klagen

30 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese30 Kosten & Wirtschaftlichkeit  Zwei Vorurteile:  „Barrierefreie Internetseiten sehen langweilig aus“  Keine Gestaltungsmöglichkeiten (Farben, Typographie, feste Positionen,...)  Verzicht auf Animationen und Multimedia (Keine Textticker, Filme, Introseiten, …)  „Barrierefreiheit kostet mehr als herkömmliche Webprogrammierung“  Aufwendige Erstellung  Testen mit unterschiedlichen Browsern / Betriebsystemen  Zusatzkosten für Schulungen  (Agentur will für Option „Barrierefreiheit“ viel mehr Geld)

31 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese31 Kosten & Wirtschaftlichkeit  Langweiliges Design?  Richtig ist: Barrierefreiheit fordert Trennung von  Design (CSS),  Semantik (Aufbau der HTML-Dateien) und  Inhalt (Texte, die in der definierten Semantik strukturiert sind). Ausgabemedien sollen und können getrennt voneinander angesprochen werden.  Folgen davon:  Design und Inhalt sind voneinander unabhängig  Medienabhängige Designs sind möglich (z.B. für „handheld“, „print“, „aural“ und „screen“)  Art der Inhalts- und Semantikerstellung unabhängig vom Design  „Universelles Design“: Festgelegte und standardisierte Semantiken

32 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese32 Kosten & Wirtschaftlichkeit  Langweiliges Design?  Designs der Vorlagenkatalogs - http://www.vorlagen.uni-erlangen.dehttp://www.vorlagen.uni-erlangen.de  Designs der BIENE-Gewinner - http://www.biene-award.de/award/preistraeger/http://www.biene-award.de/award/preistraeger/  CSS-Zengarden - http://www.csszengarden.com (Nur als Beispiel für Gestaltungsmöglichkeiten mit CSS; Semantik vom CSS- Zengarden könnte dagegen zugänglicher sein)http://www.csszengarden.com  Nicht nur Sites, die ihr soziales Image aufpolieren wollen:  Postbank – http://banking.postbank.dehttp://banking.postbank.de  Tagesschau – http://www.tageschschau.dehttp://www.tageschschau.de  Bundeswehr – http://www.styleguide.bundeswehr.dehttp://www.styleguide.bundeswehr.de  …

33 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese33 Kosten & Wirtschaftlichkeit  Mehrkosten  Längere und sorgfältigere Planungsphase mit Einbindung der Zielpersonen eines Webauftritts  Zwang zum strukturierten Arbeiten  Schulung der Autoren Im wesentlichen:  Durchsetzung von im Printbereich längst etablierten didaktischen Standards bei Publikationen  Vergessen der bisherigen Komplexität von Webseiten und Rückbesinnung/Reduzierung auf einfache HTML-Tags  Größere Überzeugungsarbeit (insb. das Verändern der Sichtweise für wen ein Webauftritt ist; herkömmliche Webseiten meist „Chef- oder CI-gerecht“. Barrierefreie Webseiten jedoch Kundengerecht) „Wir sind hier etwa 60 – 80 Mitarbeiter. Welchen Wert haben unsere persönlichen Ansichten und Gewohnheiten gegenüber den Anforderungen unserer 34.000 Kunden?“ (Eigenes Zitat während der Diskussionen zum Relaunch des RRZE-Webauftritts)

34 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese34 Kosten & Wirtschaftlichkeit  Ersparnisse  Reduzierte Wartungskosten  Änderungen  Relaunches (große Kostenersparnis!)  Reduzierte Betriebskosten  Serverkapazität  Traffic  Kompatibilität  Eine Version für alle Ausgabegeräte und Browser, keine verschiedene nebeneinander gepflegten Webauftritte (Normal, „Nur- Text“, Handy, Druckausgabe,…)  Weiterverwendbarkeit der Inhalte (Sowohl in anderen Medien, als auch über Relaunches hinweg)  Nachhaltigkeit  Qualitätssicherung

35 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese35 Kosten & Wirtschaftlichkeit Zeit Kosten Konzept Design und Umsetzung SchulungBetrieb Relaunch Konzept Design, Umsetzung Integration SchulungBetrieb Schulung geringer: Keine komplexen HTML- Strukturen mehr notwendig HTML + CSS HTML + CSS* Herkömmlicher Webauftritt Integrations- aufwand kommt hinzu Altes Konzept kann bleiben Nur CSS- Änderung notwendig Moderner oder Universeller Webauftritt Herkömmlicher, auf Barrierefreiheit nachgebesserter Webauftritt

36 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese36 Kosten & Wirtschaftlichkeit  Nachhaltigkeit  Konzept der Trennung von Inhalt, Semantik und Design („Universelles Design“) sorgt für Unabhängig von CMS-Lösungen oder von eingesetzten Editoren  Geringe Kosten bei Relaunches  Bewährte Strukturen für Webseiten entwickeln sich zu Standards  Entwickler und Agenturen können die neue Standards auch bei anderen Webauftritten nutzen (=> Wegfall eigener Entwicklungszeit)  Geringere Einarbeitungs- und Schulungszeit für Mitarbeiter, Entwickler und Agenturen  Geringere Kosten für Pflege (wegen Modularität)  Bessere Arbeitsteilung bei Entwicklung  Designer  Entwickler  Programmierer, Modul- oder CMS-Anbieter  Unterstützung von Webportalen (Personalisierbarkeit) durch definierte, optional schaltbare Strukturen

37 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese37 Zeit für Fragen und eine Pause…

38 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese38 Fallbeispiele  Gute und schlechte Lösungen  Gemeinsame Diskussion und Analyse von 4 ausgesuchten Webseiten  Zwei Gute, zwei schlechte  Je Website nicht mehr als 10 Minuten

39 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese39 Testmethoden  Checkliste zur Gestaltung barrierefreie Webanwendungen und Webauftritte  http://www.vorlagen.uni-erlangen.de/regeln/checkliste.shtml http://www.vorlagen.uni-erlangen.de/regeln/checkliste.shtml  Basierend auf Vorlage der Stadt München  Im Winter 2006/2007 mit Experten weiterentwickelt  Zukünftig vorgesehen als Checkliste für Beschaffungen an der Universität Erlangen  Erfordert kein Vorwissen seitens der universitären Auftraggeber  Schafft Rechtssicherheit gegenüber Agenturen

40 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese40 Testmethoden  BITV Checklisten  Priorität I - http://www.rrze.uni- erlangen.de/dienste/web/barrierefreiheit/bitv-prioritaet-i.shtmlhttp://www.rrze.uni- erlangen.de/dienste/web/barrierefreiheit/bitv-prioritaet-i.shtml  Priorität II - http://www.rrze.uni- erlangen.de/dienste/web/barrierefreiheit/bitv-prioritaet-ii.shtmlhttp://www.rrze.uni- erlangen.de/dienste/web/barrierefreiheit/bitv-prioritaet-ii.shtml  „Rohe“ Regeln. Erfordern Hintergrundwissen und Lektüre der BITV; Als Grundlage für den Einsatz von Nicht-Experten nicht sinnvoll.

41 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese41 Testmethoden  BITV-Test und BITV-Selbstbewertung  http://www.bitvtest.de http://www.bitvtest.de  Angebot von BIK – Projekt des dt. Blinden- und Sehbehindertenverbands, des dt. Verein für Blinden und Sehbehinderten in Studium und Beruf, DIAS GmbH  Anerkanntes Testverfahren, basierend auf Punktwertung  Wird als Grundlage für ein TÜV Zertifikat verwendet  Zwei Varianten:  BITV-Selbstbewertungen  Eine beliebige Person testet einen Webauftritt, der auch der eigene sein kann  Keine Festlegung auf einzelne Seiten  Prüfberichte werden angelegt; ggf. werden Erläuterungen festgehalten  Beispiel: http://www.bitvtest.de/selbstbewertung/http://www.bitvtest.de/selbstbewertung/  Fragebogennummer: 1199, Passwort: RRZEWebTest  BITV-Test  2 erfahrene Experten prüfen unabhängig und parallel voneinander; Ergebnisse werden zum Abschluss zusammen bewertet und abgeglichen  3 (oder mehr) repräsentative Seiten werden geprüft  Prüfberichte werden angelegt; ggf. werden Erläuterungen festgehalten  Beispiel: http://www.bitvtest.de/index.php?a=ti&sid=482&prid=2http://www.bitvtest.de/index.php?a=ti&sid=482&prid=2

42 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese42 Testmethoden  Demonstration: BITV-Selbstbewertung  Am Beispiel einer ausgewählten Website  Staatlichen Bauamt Landshut - http://www.stbala.bayern.de/index.php http://www.stbala.bayern.de/index.php  BITV Selbstbewertung:  http://www.bitvtest.de/selbstbewertung/ http://www.bitvtest.de/selbstbewertung/  Fragebogennummer: 1200  Passwort: RRZEWebTest

43 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese43 Zweiter Kurstag

44 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese44  Zeitplan 8. März 2008  09.10 – 10.30 Besprechung und Ergebnisse der BITV-Tests; Praxisbeispiele: Navigationsmenüs Sprungmarken Struktur einer Webseite / Gliederung von Inhalten Links Tabellen Formulare  10.30 – 10.45Pause  10.45 – 12.15Hilfsmittel Vorlagenkatalog: Vorstellung und Nutzung

45 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese45 Besprechung und Ergebnisse  Ergebnisse BITV-Selbstbewertungen  Gemeinsame Diskussion der Ergebnisse …  Staatlichen Bauamt Landshut - http://www.stbala.bayern.de/index.php http://www.stbala.bayern.de/index.php  BITV Selbstbewertung:  http://www.bitvtest.de/selbstbewertung/ http://www.bitvtest.de/selbstbewertung/  Fragebogennummer: 1200  Passwort: RRZEWebTest

46 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese46 Besprechung und Ergebnisse  Zur Erinnerung: Jeder,  unabhängig von der jeweiligen Auffassungsgabe,  unabhängig von der jeweiligen Methodik,  unabhängig vom Gerät,  unabhängig vom Betriebssystem,  unabhängig von der Software, bekommt beim Zugriff auf  dieselbe Seite  dieselben Inhalte.

47 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese47 Praxisbeispiele  Struktur einer Webseite / Gliederung von Inhalten  Klassisches Aufbau:  Kopfteil  Inhalt  Fussteil  Zum Vergleich: Print-Publikation (Brief)  Briefkopf  Text  Fussnote und/oder Fusszeile

48 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese48 Praxisbeispiele  Struktur einer Webseite / Gliederung von Inhalten  Klassisches Aufbau:  Kopfteil  -Bereich, mit:   Sprachangaben  Stylesheet-Angaben  (optional) JavaScript-Angaben  Titel oder Logo des Webauftritts  (optionale) Breadcumb-Navigation  Sprungmarken  (Haupt-) Navigation  (optionale) Schnellsuche  Inhalt  Fussteil

49 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese49 Praxisbeispiele  Struktur einer Webseite / Gliederung von Inhalten  Klassisches Aufbau:  Kopfteil  Inhalt  Normaler Inhalt mit Gliederung über Überschriften  Verwendung von Basis-HTML:,,,,,,,,  Optional zusätzlich: ,,  Verwendung von Microformats  Fussteil

50 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese50 Praxisbeispiele  Struktur einer Webseite / Gliederung von Inhalten  Klassisches Aufbau:  Kopfteil  Inhalt  Fussteil  Statusinformationen zur jeweiligen Seiten (z.B. Datum der letzten Änderung und Autor)  (optionales) technisches Menü  (optional) weitere Metainformationen zum Inhalt (z.B. Hinweise auf das Urheberrecht und Lizenzen zur Nutzung)

51 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese51 Praxisbeispiele  Struktur einer Webseite / Gliederung von Inhalten Projekt Vorlagenkatalog : Beispielsseite Projekt Vorlagenkatalog Beispielseite Menu Hallo erstmal… Lirum Larum Löffelstiehl... </div Statusinformationen zur Seite Letzte Änderung:

52 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese52 Praxisbeispiele  Navigationsmenüs  Verwendung von Listen: Menu Startseite Kapitel 1 Seite 1 Seite 2

53 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese53 Praxisbeispiele  Navigationsmenüs  Verwendung von Listen: Menu Startseite Kapitel 1 Unterseite 1 Unterseite 2 Seite 1 Seite 2

54 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese54 Praxisbeispiele  Navigationsmenüs  Verwendung von Listen  Optische Gestaltung über CSS  Unterpunkte erweiterbar mit CSS-Klassen  Beispiel: http://www.vorlagen.uni-erlangen.de/vorlagen/http://www.vorlagen.uni-erlangen.de/vorlagen/  Aktive Menupunke nicht klickbar machen!  Optional: Ergänzung von Definitionsnummern 1 Musterseite  Optional: Ergänzung von Access-Keys Kontakt [Alt + 9]  i-Tüpfelchen: Vorleseeigenschaft für Screenreader verbessern Kontakt.

55 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese55 Praxisbeispiele  Navigationsmenüs  Beispiele und Anleitungen:  Tutorium: Barrierefreie Navigationsmenüs - http://www.einfach-fuer-alle.de/artikel/menues/ http://www.einfach-fuer-alle.de/artikel/menues/  Vier kreative Menüs - http://www.drweb.de/weblog/weblog/?p=770 http://www.drweb.de/weblog/weblog/?p=770

56 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese56 Praxisbeispiele  Sprungmarken  Hilfreich bei komplexen Webauftritten mit einem tiefen Inhaltsbaum Sie befinden sich hier: Startseite. Bedienungshinweise  Auch hier wichtig: Aktive Seite nicht klickbar machen!

57 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese57 Praxisbeispiele  Links  Interne Links:  Kapitel 1  Relative Linkangaben verwenden; Allenfalls bei Sprung zur Startseite auf „/“ verlinken oder wenn eine tiefe Verlinkung genutzt wird.  Icons nur bei Mediendateien (Office, PDF, usw.)  Externe Links  Deklarieren mit Symbol: Optisch und via Text  Beispiel Website  Beispiele:  http://www.rrze.uni- erlangen.de/hilfe/dokumentation/tutorial/website/styleguide.shtml#link s http://www.rrze.uni- erlangen.de/hilfe/dokumentation/tutorial/website/styleguide.shtml#link s  http://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/linkicons.shtml http://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/linkicons.shtml

58 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese58 Praxisbeispiele  Tabellen  Einfache Tabellen  Lange Tabelle  Komplexe Tabellen

59 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese59 Praxisbeispiele  Tabellen  Einfache Tabellen Beispiel1: Tabelle mit th Name: Telefon: Abel 12345 Bebel 34567  Lange Tabelle  Komplexe Tabellen

60 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese60 Praxisbeispiele  Tabellen  Einfache Tabellen  Lange Tabelle Beispiel2: Tabelle mit th Name: Telefon: Abel 12345 Bebel 34567  Komplexe Tabellen

61 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese61 Praxisbeispiele  Tabellen  Einfache Tabellen  Lange Tabelle  Komplexe Tabellen Beispiel2: Tabelle mit th Name: Telefon: Abel 12345 Bebel 34567

62 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese62 Praxisbeispiele  Tabellen  Beispiele und Tutorien:  Leitfaden des BSI, Seite 63ff  Vorlagenkatalog: http://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/tabellen.shtmlhttp://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/tabellen.shtml

63 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese63 Praxisbeispiele  Formulare  Grundsätzlich: Bezeichnung/Titel im HTML vor Eingabefeld  Optisch kann über CSS umpositioniert werden  Verwendung von  Vorname  Absendebutton nicht vergessen! (Auch nicht, wenn es mit >>Return<< klappt)  Reset-Button eher vermeiden

64 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese64 Praxisbeispiele  Formulare  Längere oder komplexe Formulare über gruppieren Angaben zur Person Vorname Familienname

65 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese65 Praxisbeispiele  Formulare  Beispiele und Tutorien:  Leitfaden des BSI, Seite 45 ff  Tutorial: Bessere Formulare - http://www.einfach-fuer- alle.de/artikel/formulare/http://www.einfach-fuer- alle.de/artikel/formulare/  Vorlagenkatalog - http://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/formulare.shtmlhttp://www.vorlagen.uni- erlangen.de/vorlagen/html/elemente/formulare.shtml

66 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese66 Praxisbeispiele  Weitere Hilfen und Vertiefung  Ausführlich im Leitfaden des BSI  Im Vorlagenkatalog (jedoch nur Einsatz, ohne Begründung): http://www.vorlagen.uni-erlangen.de/vorlagen/html/elemente/ http://www.vorlagen.uni-erlangen.de/vorlagen/html/elemente/  Artikel bei „Einfach für Alle“: http://www.einfach-fuer-alle.de/artikel/#konzeption http://www.einfach-fuer-alle.de/artikel/#gestaltung http://www.einfach-fuer-alle.de/artikel/#konzeption http://www.einfach-fuer-alle.de/artikel/#gestaltung  Die 66 Gebote der WCAG1: http://www.barrierefreies-webdesign.de/wcag1/checkpunkte.php http://www.barrierefreies-webdesign.de/wcag1/checkpunkte.php

67 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese67 Hilfsmittel  Plugins, Browsererweiterungen und Programme  Gute Übersicht: Werkzeugliste des BITV-Tests: http://www.bitvtest.de/werkzeugliste.php http://www.bitvtest.de/werkzeugliste.php  BSI-Leitfaden: Seite 106ff  Programm „IBM aDesigner“ zur Simulierung von Webseiten für Fehlsichtige: http://www.alphaworks.ibm.com/tech/adesignerhttp://www.alphaworks.ibm.com/tech/adesigner  Browsererweiterungen für Firefox und Internet Explorer. Insbesondere:  Web Developer Toolbax (Firefox) http://chrispederick.com/work/firefox/webdeveloper/ http://chrispederick.com/work/firefox/webdeveloper/  Document Map (Firefox) https://addons.mozilla.org/firefox/475/ https://addons.mozilla.org/firefox/475/  Accessibar (Internet Explorer) http://www.nils.org.au/ais/web/resources/toolbar/ http://www.nils.org.au/ais/web/resources/toolbar/  Weitere Erweiterungen Erweiterungen:  Übersicht des RRZE: http://www.rrze.uni-erlangen.de/dienste/internet-zugang/shi/internet- software/firefox/erweiterungen-1.shtml http://www.rrze.uni-erlangen.de/dienste/internet-zugang/shi/internet- software/firefox/erweiterungen-1.shtml  Mozilla:  http://addons.mozilla.org http://addons.mozilla.org

68 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese68 Hilfsmittel  Vorstellung einiger empfehlenswerter Browsererweiterungen für den Firefox:  Web Developer Toolbar https://addons.mozilla.org/firefox/60/ https://addons.mozilla.org/firefox/60/  Firebug https://addons.mozilla.org/firefox/1843/ https://addons.mozilla.org/firefox/1843/  Document Map https://addons.mozilla.org/firefox/475/ https://addons.mozilla.org/firefox/475/  ColorZilla https://addons.mozilla.org/firefox/271/ https://addons.mozilla.org/firefox/271/  MeasureIt https://addons.mozilla.org/firefox/539/ https://addons.mozilla.org/firefox/539/  Operator https://addons.mozilla.org/firefox/4106/ https://addons.mozilla.org/firefox/4106/  Tails Export https://addons.mozilla.org/firefox/2240/ https://addons.mozilla.org/firefox/2240/  ShowIP https://addons.mozilla.org/firefox/590/ https://addons.mozilla.org/firefox/590/  Stylish https://addons.mozilla.org/firefox/2108/ https://addons.mozilla.org/firefox/2108/

69 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese69 Hilfsmittel  Firefox auf CIP-Pool-Rechnern anpassen zur Installation: (Notwendig bei Fehlermeldung: „Die Software-Installation ist momentan deaktiviert. Klicken Sie auf “Einstellungen bearbeiten…” um sie zu aktivieren.”)  about:config in der Adresszeile angeben  In das Eingabefeld “Filter” “ xpinstall.enabled ” eingeben  Den angezeigten Eintrag xpinstall.enabled mit der rechten Maustaste doppelt anklicken. Der Inhalt in der Spalte „Wert“ muss „ true “ lauten

70 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese70 Vorlagenkatalog  „Webbaukasten“ zur Erstellung von Webauftritten an der Universität:  Eine vordefinierte Struktur und Semantik  Verschiedene Designs (CSS-Layouts zur Auswahl)  Verschiedene nutzbare Anwendungen  Navigation  Breadcrumb  Index und Übersicht  UnivIS-Ausgaben  …  Verschiedene nutzbare Inhaltsvorlagen  Impressum  Kontaktseiten  Bilder  Anfahrtsbeschreibung mit Google Maps

71 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese71 Linksammlung & Leseempfehlungen  Bücher  „Barrierefreies Webdesign“, Radtke, Charlier, Addisson Wesley, ISBN: 978-3-8273- 2379-8  „Barrierefrei kommunizieren“, Technischer Jungendfreizeit- und Bildungsverein (tjfbv), http://www.barrierefrei-kommunizieren.dehttp://www.barrierefrei-kommunizieren.de  Linksammlung  Wikipedia: Barrierefreies Internet - http://de.wikipedia.org/wiki/Barrierefreies_Internethttp://de.wikipedia.org/wiki/Barrierefreies_Internet  BSI-Leitfaden „Barrierefreies E-Government“ - http://www.bsi.bund.de/fachthem/egov/download/4_Barriere.pdf http://www.bsi.bund.de/fachthem/egov/download/4_Barriere.pdf  Gleichstellungsgesetze im Bund und in den Ländern - http://www.einfach-fuer- alle.de/artikel/bitv/bgg/http://www.einfach-fuer- alle.de/artikel/bitv/bgg/  Bayerische Behindertenpolitik - http://www.stmas.bayern.de/behinderte/politik/http://www.stmas.bayern.de/behinderte/politik/  Tutorium: Barrierefreie Navigationsmenüs - http://www.einfach-fuer- alle.de/artikel/menues/http://www.einfach-fuer- alle.de/artikel/menues/  Tutorial: Bessere Formulare - http://www.einfach-fuer-alle.de/artikel/formulare/http://www.einfach-fuer-alle.de/artikel/formulare/  Dr. Web: Vier Navigationsmenüs - http://www.drweb.de/weblog/weblog/?p=770http://www.drweb.de/weblog/weblog/?p=770  Vorlagenkatalog der Universität – http://www.vorlagen.uni-erlangen.dehttp://www.vorlagen.uni-erlangen.de  Werkzeugliste BITV-Test - http://www.bitvtest.de/werkzeugliste.phphttp://www.bitvtest.de/werkzeugliste.php  IBM aDesigner - http://www.alphaworks.ibm.com/tech/adesignerhttp://www.alphaworks.ibm.com/tech/adesigner  Firefox Browserweiterungen - http://addons.mozilla.orghttp://addons.mozilla.org

72 Barrierefreie Internet-Seiten07/08.03.2008Wolfgang Wiese72 Vielen Dank für Ihre Aufmerksamkeit (Scheine und Evaluation?) http://www.kurse.rrze.uni-erlangen.de/umfrage/