![Page 1: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/1.jpg)
Barrierefreie Websitesbarrierefrei erhalten!
Redaktionsarbeit, Qualitätssicherung und Zertifizierung im Zeitalter von Web 2.0
Brigitte Bornemann-Jeske
Workshop bei der mai-Tagung Karlsruhe, 11. Mai 2007
![Page 2: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/2.jpg)
Barrierefreie Websites - Redaktionsarbeit 211.05.07
Agenda
Barrierefreies WebdesignNutzeranforderungen - GestaltungsregelnStandardkonforme Programmierung: HTML & CSS
RedaktionsarbeitContent Management Systeme, Editoren, Know-How
QualitätssicherungVorlagen und Tools, Workflow, Konformitätsprüfung
Exkurse Umgang mit Fremdformaten: PDFWeb 2.0
![Page 3: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/3.jpg)
Leitfrage: Barrierefreiheit in Zeiten von
Web 2.0
![Page 4: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/4.jpg)
Barrierefreie Websites - Redaktionsarbeit 411.05.07
Barrierefreiheit in Zeiten von Web 2.0
Behinderung ist die Unfähigkeit, mit schlechtem Design umzugehen
Tomas Caspers, 2006
Barrierefrei ist doch ein Add-On, oder?O-Ton Webentwickler, 2007
Web 2.0 – das Mitmachweb –rennt den Behinderten davon. Dauerhaft?
![Page 5: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/5.jpg)
Barrierefreies Webdesign- Zielsetzung und Richtlinien -
![Page 6: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/6.jpg)
Barrierefreie Websites - Redaktionsarbeit 611.05.07
Barrierefreiheit = Design for All
„The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, Erfinder des Internet und Direktor des World Wide Web Consortiums(W3C)
Durchlässige Systeme haben wirtschaftliches Potential.„Test the Extremes” – Behinderung als
Testlabor für Mainstream-Anwendungen"Design for All" statt "Special Needs"
![Page 7: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/7.jpg)
Barrierefreie Websites - Redaktionsarbeit 711.05.07
Universal Usability
Accessibility = Usability in the widestrange of capabilities
ISO guide 71: Alle Normen auf Accessibility überprüfen
ISO 9241-171 CD Ergonomie an Büroarbeitsplätzen mit Bildschirmgeräten
![Page 8: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/8.jpg)
Barrierefreie Websites - Redaktionsarbeit 811.05.07
Richtlinien
WCAG 1.0 – Web Content Accessibility GuidelinesW3C Recommendation, 1999
BITV – Barrierefreie InformationsTechnik-VerordnungVerordnung zur Umsetzung von §11 BGG, 2002Verpflichtet Bundesbehörden und GleichgestellteBundesländer haben uneinheitlichen StandZielvereinbarungen für Privatwirtschaft
Testverfahren interpretieren die RichtlinieBIK-Test, BIENE-AwardDIN-Zertifikat August 2006
![Page 9: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/9.jpg)
Barrierefreie Websites - Redaktionsarbeit 911.05.07
BITV: 14 Anforderungen, 65 Regeln
1. Alternativtexte sind funktionell äquivalent3. Korrektes HTML - Semantik3. Skalierbarkeit durch relative Maßangaben5. Linearisierbarkeit trotz Tabellenlayout6. Auch ohne Skripte nutzbar – Fallbacklösungen8. Fremdformate mit Hilfstechniken bedienbar9. Tastaturbedienbarkeit von Skripten10. Neues Fenster ankündigen12. Orientierung in Frames durch Titel 13. Orientierung durch eindeutige Linkbegriffe14. Einfache Sprache
Technische Regeln für HTML und CSSGestaltungsregeln herausarbeiten
![Page 10: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/10.jpg)
Barrierefreie Websites - Redaktionsarbeit 1011.05.07
WCAG 2.0
4 Gestaltungsprinzipien wahrnehmbarbedienbarverständlichtechnologisch robust
Prüffähige IndikatorenTechnologie-übergreifend
HTML, XML, ECMA-Script,Flash, PDF, …
working draft www.w3.org/TR/WCAG20/Status: last call April 2006
![Page 11: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/11.jpg)
Barrierefreies Webdesign- Nutzeranforderungen -
![Page 12: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/12.jpg)
Barrierefreie Websites - Redaktionsarbeit 1211.05.07
Zielgruppen
Behinderte6,7 Mio Schwerbehinderte in Deutschland340.000 davon blind/sehbehindert35.500 erwerbsfähige Blinde
Sonstige8% der Männer sind farbfehlsichtigÄltere Menschen (50% > 40 Jahre)Menschen mit fremder Muttersprache Firmennetzwerke, ältere ComputerMobile Endgeräte (PDA, Handy, Bordcomputer)
![Page 13: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/13.jpg)
Barrierefreie Websites - Redaktionsarbeit 1311.05.07
Mobile Endgeräte
Hohe Wachstumsprognosen für M-Commerce und M-Banking in 2005
29% Zuwachs in 2004
Ausstattung vorhanden bei54% der Japaner9% der Deutschen Foto: Mobile Banking per PDA
Quelle: IPSOS, 24.03.05http://www.areamobile.de/news/3314.html
![Page 14: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/14.jpg)
Barrierefreie Websites - Redaktionsarbeit 1411.05.07
Blinde und Sehbehinderte
Technische Hilfen zur Computernutzung: Bildschirm
BraillezeileSprachausgabeScreenreaderVergrößerungssystem
InternetSprachbrowserTextbrowser/ Textfilter
![Page 15: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/15.jpg)
Barrierefreie Websites - Redaktionsarbeit 1511.05.07
Braillezeile
Foto: Audiodata www.audiodata.de
![Page 16: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/16.jpg)
Barrierefreie Websites - Redaktionsarbeit 1611.05.07
Vergrößerungssystem
Video: BIK-Projekt www.bik-online.info
![Page 17: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/17.jpg)
Barrierefreie Websites - Redaktionsarbeit 1711.05.07
Sprachbrowser
Beispiel: IBM Homepage Reader
Erkennt TextUnterscheidet HTML-ElementeBietet Orientierungshilfen
Sprung zum nächsten ElementLinkliste…
www-5.ibm.com/de/accessibility/hpr.html
![Page 18: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/18.jpg)
Barrierefreie Websites - Redaktionsarbeit 1811.05.07
Motorische Behinderung
Technische Hilfen zur Computernutzung: Tastatur/Maus
SpezialtastaturTrackballSaugblasrohrSpracheingabe
Windows EingabehilfenTastaturbedienung
![Page 19: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/19.jpg)
Barrierefreie Websites - Redaktionsarbeit 1911.05.07
Großfeldtastatur
Foto: www.barrierefrei-kommunizieren.de/datenbank
![Page 20: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/20.jpg)
Barrierefreie Websites - Redaktionsarbeit 2011.05.07
Gehörlose und Hörbehinderte
HörbehinderungText für Tondokumentevisuelle statt akustische Signale
Gehörlos vor dem SpracherwerbGebärdensprache
Videoaufnahmen: www.polizei.nrw.deGebärden-Avatar: gebaerden.hamburg.de
klare, allgemeinverständliche Sprachevisuelle Strukturierung – "gutes Design"
![Page 21: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/21.jpg)
Barrierefreie Websites - Redaktionsarbeit 2111.05.07
Lernbehinderte wollen "leichte Sprache"
www.lebenshilfe-angesagt.de
![Page 22: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/22.jpg)
Barrierefreie Websites - Redaktionsarbeit 2211.05.07
Was ist "einfache Sprache"?
BITV: "Für jegliche Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist."
Prägnanzrelativ je Thema, Zielgruppe, Vertiefungstrittig: Basisniveau Realschule?Problem: nicht testfähig
IndikatorenDuden-Worte (BIK BITV-Test)Glossar für notwendige Fachbegriffe (WCAG 2.0)
![Page 23: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/23.jpg)
Barrierefreie Websites - Redaktionsarbeit 2311.05.07
Kriterien für einfache Sprache (Auszug)
Gibt es Zusammenfassungen langer/komplexer Texte?Werden Fach- und Fremdwörter vermieden? Werden sie ggf. bei der ersten Verwendung erklärt?Werden abstrakte Begriffe vermieden?Werden praktische Beispiele eingesetzt?Werden vorwiegend aktive Verben benutzt?Wird nur ein Gedanke pro Satz vorgestellt?Werden kurze Sätze verwendet (10 Worte)?Werden vorwiegend kurze Worte verwendet (3 Silben)?
Astrid Hassenbach, "Einfache Sprache – einfach umsetzen?", in: IWP 8/2005
![Page 24: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/24.jpg)
Barrierefreies Webdesign- Gestaltungsregeln -
![Page 25: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/25.jpg)
Barrierefreie Websites - Redaktionsarbeit 2511.05.07
Bedienbar in jedem Browser: botmuc.de
Live-Demo mit HPR, IE, Opera, Lynx
![Page 26: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/26.jpg)
Barrierefreie Websites - Redaktionsarbeit 2611.05.07
Skalierbares Layout 1
Vergrößerung 200%
Kein Scrollbar, aber wenig Platz für Content
![Page 27: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/27.jpg)
Barrierefreie Websites - Redaktionsarbeit 2711.05.07
Skalierbares Layout 2
Vergrößerung 200%
www.willi-jennissen.de
![Page 28: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/28.jpg)
Barrierefreie Websites - Redaktionsarbeit 2811.05.07
Alternativtext für Grafiken
Alternativtexte sind funktionell äquivalentNavigationsgrafiken
Alternativtexte nennen das Ziel des Links
Informationsträger: Bilder, Fotos, Diagrammeknappe Benennung undausführliche Beschreibung
Dekoration, LayoutLeerer Alternativtext alt="" versteckt Grafiken vor Textbrowsern
![Page 29: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/29.jpg)
Barrierefreie Websites - Redaktionsarbeit 2911.05.07
Fehlende Alternativtexte – kein Zugang
www.hha.de (2003) Anzeige im IE bei ausgeschalteter Grafik
![Page 30: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/30.jpg)
Barrierefreie Websites - Redaktionsarbeit 3011.05.07
Bildbeschreibung
www.munchundberlin.org
![Page 31: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/31.jpg)
Barrierefreie Websites - Redaktionsarbeit 3111.05.07
Bildbeschreibung für Blinde - Richtlinien
Sei objektiv!Wie sieht das Objekt aus? - Keine Gefühle oder Bewertungen
Fasse Dich kurz!Obergrenze 250 bis 300 Wörter
Sei anschaulich!Muster, Formen, Anordnungen, Größenverhältnisse
Gehe logisch vor!Nachvollziehbarer Aufbau der Bildbeschreibung
Sei präzise!Genau, vollständig und tatsachenorientiert
Sei unabhängig!Kein Bezug auf andere Objekte der Sammlung
Dayton Art Institute, Projekt Access Art, 2001 http://tours.daytonartinstitute.org/accessart/
![Page 32: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/32.jpg)
Barrierefreie Websites - Redaktionsarbeit 3211.05.07
Regeln zur Orientierung bei linearer Anzeige
Gleichbleibende Inhalte überspringenSprungmarkenMenü als Liste
Kontext erschließenSeitenstruktur mit Überschriften darstellenBreadcrumb-Navigation (Pfad)Neues Fenster ankündigen
Prägnanz am FokusEindeutiger SeitentitelEindeutige Linkbegriffedas Wichtigste zuerst sagen
![Page 33: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/33.jpg)
Barrierefreie Websites - Redaktionsarbeit 3311.05.07
Seitenname in Titel, Überschrift, Menü, Pfad, URL
botmuc.de/forschung/renner.htmlPfad bei ausgeschaltetem CSS sichtbar
![Page 34: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/34.jpg)
Barrierefreie Websites - Redaktionsarbeit 3411.05.07
Sprungmarken
Sprungmarken erschließen die Struktur der Seite
„Zum Inhalt.“„Zur Suche.“„Zum Hauptmenü.“„Zum Bereichsmenü.“„Zur Werbung.“„Zum Seitenanfang.“
Achtung: sparsam verwenden, mit Überschriften-Struktur kombinieren
![Page 35: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/35.jpg)
Barrierefreie Websites - Redaktionsarbeit 3511.05.07
Sprungmarken im PDA
www.botmuc.de
![Page 36: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/36.jpg)
Barrierefreie Websites - Redaktionsarbeit 3611.05.07
Semantische Strukturierung der Seite - ohne Layout nutzbar -
www.bit-informationsdesign.de/webdesign/
![Page 37: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/37.jpg)
Barrierefreies Webdesign- standardkonforme Programmierung -
![Page 38: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/38.jpg)
Barrierefreie Websites - Redaktionsarbeit 3811.05.07
Standardkonforme Programmierung
Korrekte Verwendung von HTML und CSS
andere FormateVerwendung offener StandardsVerwendung angemessener FormateEinbindung: Fallbacklösungen, direkte Zugänglichkeit mit Hilfstechniken, HTML-Alternativen
![Page 39: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/39.jpg)
Barrierefreie Websites - Redaktionsarbeit 3911.05.07
Korrekte Verwendung von HTML und CSS
Neueste gültige HTML-VersionHTML 4.01 – XHTML 1.0Keine veralteten HTML-Elemente (font, ...)
Korrekte Syntax validator.w3.org überprüft HTML-Dokumente
Angemessene SemantikSinnentsprechende Auszeichnung der Inhalte
Trennung von Inhalt und FormFormate in separaten CSS-Dateien
![Page 40: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/40.jpg)
Barrierefreie Websites - Redaktionsarbeit 4011.05.07
Trennung von Inhalt und Form
HTML für semantische Struktur der InhalteText: <h1> bis <h6>, <p>, <ul>, <ol>, <strong>, <em>Menüs: <ul>Abschnitte: <div id=“menu“>, <div id=“content“>(Tabellen nur für tabellarische Daten)
CSS für optische GestaltungFarben, Schriften, DekorationLayout
![Page 41: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/41.jpg)
Barrierefreie Websites - Redaktionsarbeit 4111.05.07
Angemessene Semantik
Dies ist eine Überschrift
korrektes HTML: semantische Auszeichnung<h1> Dies ist eine Überschrift </h1>
falsch:veraltetes HTML 3: direkte Formatierung, <h1> fehlt
<td height="48"> <font family="arial" size="32" color="red"> <b> Dies ist eine Überschrift </b> </font> </td>
CSS-Missbrauch: "div-soup“, <h1> fehlt<div class="header"> Dies ist eine Überschrift </div>
![Page 42: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/42.jpg)
Barrierefreie Websites - Redaktionsarbeit 4211.05.07
HTML und CSS – Codierung
Dies ist eine Überschrift
HTML<h1> Dies ist eine Überschrift </h1>
CSSh1 {
font:arial 2em;color:red;margin: 1.33em 0 .67em 0;
}
![Page 43: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/43.jpg)
Barrierefreie Websites - Redaktionsarbeit 4311.05.07
Vergleich: Textverarbeitung
Abbildung: Microsoft Word Toolbar mit Bedienelementen für Formatvorlagen und für direkte Formatierung
Formatvorlagen machen Texte übertragbar„Strukturiertes Dokument“
![Page 44: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/44.jpg)
Barrierefreie Websites - Redaktionsarbeit 4411.05.07
CSS-Programmierung für einfachen Relaunch
www.csszengarden.com
![Page 45: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/45.jpg)
Barrierefreie Websites - Redaktionsarbeit 4511.05.07
Layout-Tabellen
HTML: Tabellen sind für Daten, nicht für Layout
WCAG: Layout-Tabellen werden als work around geduldet
BITV-Test: 2 Punkte Abzug
Gestaltungsregeln beachtenLinearisierbarkeit der InhalteTabellenmarkup <th> etc. nicht verwendensummary=""
für ältere Browser/Editoren/CMS nötigfür grafische Feinheiten heute meistens nicht mehr nötig
![Page 46: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/46.jpg)
Barrierefreie Websites - Redaktionsarbeit 4611.05.07
Tabellenlayout okay, wenn linearisierbar
-Tabelle für grobe Layoutbereiche
- semantische Auszeichnung der Inhalte
botmuc.de mit AIS Strukturanalyse
![Page 47: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/47.jpg)
Barrierefreies Webdesign- Schlussbetrachtung -
![Page 48: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/48.jpg)
Barrierefreie Websites - Redaktionsarbeit 4811.05.07
Nutzen aus Barrierefreiem Webdesign
Größere ReichweiteSenioren, Mobile Nutzer, Behinderte
Positive Nutzererfahrungschnell, übersichtlich, einfach
SuchmaschinentransparenzGoogle ist blind
Geringere UnterhaltskostenWeniger Traffic-VolumenEinfachere Wartung des Systems
Technologisch nachhaltigSauberer Code, Cross-Media-Publishing, Web 2.0
![Page 49: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/49.jpg)
Barrierefreie Websites - Redaktionsarbeit 4911.05.07
Was ist barrierefreies Webdesign?
1999: Alternativtexte für Bilder und kein Javascript
Mainstream2002: CSS-Programmierung,
Tabellenfreies LayoutWebentwickler
2005: Strukturierter ContentBarrierefrei-Experten
2007: Standardkonform? –kann ich nicht mehr hören!
blinde Product-Managerin
![Page 50: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/50.jpg)
Barrierefreie Websites - Redaktionsarbeit 5011.05.07
Stand 2007
Standardkonform = HTML+CSS ist Usus"barrierearm" ist ein Etikettenschwindel
Standardkonform = Semantische Strukturierung wird vernachlässigt
Kunstfehler!Barrierefrei = Gestaltungsregeln für universelles Design bleibt ein Expertenthema
Sprungmarken, flexibles Layout, sensible Linktitel, Alternativtexte, einfache Sprache ...
Neue Technik: Web Applications mit AJAX –Barrierefrei-Regeln sind in Erprobung
![Page 51: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/51.jpg)
Barrierefreie Websites - Redaktionsarbeit 5111.05.07
Literatur
Dirk Jesse: YAMLwww.yaml.de
Angie Radkte/Michael Charlier, Barrierefreies Webdesign, 2006 www.bad-seendorf.de
Jan Hellbusch/Thomas Mayer: Barrierefreies Webdesign, 4. Auflage 2006www.knowware.de/barrierefrei
IWP 56 (8/2005) Sonderheft "Barrierefreiheit im Internet“bit-informationsdesign.de/iwp-8-2005/
Jan Hellbusch et al.: Barrierefreies Webdesign, dpunkt.verlag 2005barrierefreies-webdesign.de/dpunkt/
![Page 52: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/52.jpg)
Barrierefreie Websites - Redaktionsarbeit 5211.05.07
Ausbildung
Lehrgang "Barrierefreies Webdesign" der Uni Linz2jähriger Lehrgang seit 2005, nächster ab Okt. 2007Online-Lehrgang mit Präsenzphasenwww.bfwd.at
Web-Ressourcen für Selbststudiumeinfach-fuer-alle.debik-online.info, bitvtest.deMailingliste WAI-DE access.fit.fraunhofer.de/waideinfo
Mailingliste CSS-Design webwriting-magazin.de/css-design/listhome.php
![Page 53: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/53.jpg)
Redaktionsarbeit
![Page 54: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/54.jpg)
Barrierefreie Websites - Redaktionsarbeit 5411.05.07
Produktion von barrierefreien Websites
Produzenten müssen zusammenwirkenDesigner, Programmierer, Redakteure, Autoren
Tools sind noch nicht perfektEditoren, CMS, Vorlagen, Qualitätssicherung
Know How aufbauenAusbildung, Beratung, Literatur
![Page 55: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/55.jpg)
Barrierefreie Websites - Redaktionsarbeit 5511.05.07
Nicht jedes Screendesign ist geeignet
![Page 56: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/56.jpg)
Barrierefreie Websites - Redaktionsarbeit 5611.05.07
Mangelndes Verständnis für Semantik
hamburg.de (Aug. 2006)Überschriftenstruktur
![Page 57: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/57.jpg)
Barrierefreie Websites - Redaktionsarbeit 5711.05.07
Standardkonform = sauberes HTML erleichtert Contentpflege ohne CMS
1 Online-RedakteurHTML-Editor
Dreamweaver, Hotmetal, Phase5
Vorlagenkatalogbotmuc.de/_muster/
<h1> Allgemeine Informationen für Besucher </h1>
<h2 class="wichtig">Neue Öffnungszeiten </h2>
<p> Ab 15. März gelten die Frühjahrs-Öffnungszeiten: </p>
![Page 58: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/58.jpg)
Barrierefreie Websites - Redaktionsarbeit 5811.05.07
CMS Content Management Systeme
Generieren von HTML-Seiten aus DatenbankBestandteile: Menüstruktur, Content, Templates für Layout
Nutzerverwaltung für geteilten WorkflowRollen: Admin, Redakteur, Autor
Bedienung online mit BrowserBereiche: Backoffice, Content-Editor
1500 Produkte am Marktwww.contentmanager.de
![Page 59: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/59.jpg)
Barrierefreie Websites - Redaktionsarbeit 5911.05.07
Mindestanforderungenfreie Gestaltung der Templates, HTML & CSSEingabehilfen für den Redakteur (Alternativtexte, Fremdsprachen, Styles ...)Generierung von korrektem HTML-Code
bekannte Beispiele Open Source: Typo3, Plone, WordPress, Webedition, Papoo, Joomla!CoreMedia Government Site Builder, RedDot
Mängel Programmierung: hoher Aufwand für barrierefreien Output, zu wenig barrierefreie VorlagenRedaktion: unfertige Editoren
CMS für barrierefreie Websites
![Page 60: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/60.jpg)
Barrierefreie Websites - Redaktionsarbeit 6011.05.07
Vorlagenkataloge
YAML: "Universelles Markup" für CSS-LayoutsVorlage für Seitengerüst und Navigation
standardkonform, weitgehend semantisch korrekt
Barrierefrei-Features müssen nachgetragen werdenSprungmarken etc
Benutzbar mit HTML-EditorenDreamweaver, Phase5, ...
CMS-ImplementierungenTypo3, Joomla, Papoo
Rich-Content-Vorlagen in Arbeit bei bit.informationsdesign
www.worldusabilityday.de/_muster/musterseite.html
![Page 61: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/61.jpg)
Barrierefreie Websites - Redaktionsarbeit 6111.05.07
Editor 1: Nur Text
www.bvmwsued.de
![Page 62: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/62.jpg)
Barrierefreie Websites - Redaktionsarbeit 6211.05.07
bvmwsued
www.bvmwsued.de
![Page 63: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/63.jpg)
Barrierefreie Websites - Redaktionsarbeit 6311.05.07
Editor 2: textile Tags
www.bik-online.info/test/95plus/
![Page 64: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/64.jpg)
Barrierefreie Websites - Redaktionsarbeit 6411.05.07
Editor 3: WYSIWYG Text
Beispiel: WordPress >>verbreitetes Blog-CMSstandardkonform, annähernd barrierefreies Default-Template
Editor tinyMCEvielfältig konfigurierbarDefault nicht auf komplexen Content eingerichtet
keine Zwischenüberschriften
Keine Eingabehilfe für CSS-Classes, SprachwechselHTML-Eingabe möglich
Seiten verwaltenSeiten zur Bearbeitung aus Liste auswählen
unübersichtlich bei größerem Umfang
![Page 65: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/65.jpg)
Barrierefreie Websites - Redaktionsarbeit 6511.05.07
wordPress
wordpress mit Editor tinyMCE(Default-Einstellungen nach Installation)
![Page 66: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/66.jpg)
Barrierefreie Websites - Redaktionsarbeit 6611.05.07
Editor 4: Strukturierter Content
Beispiel: Plone >>CMS für große Websites auf Zope / PythonStandardkonform, annähernd barrierefreies Default-Template
Editor KupuZwischenüberschriften 2-stufigStyle-Classes für TabellenHTML-Eingabe mit Filter für erlaubte Tags
Seitenverwaltung aus Site-Struktur
![Page 67: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/67.jpg)
Barrierefreie Websites - Redaktionsarbeit 6711.05.07
Plone CMS mit Kupu Editor
Plone CMS mit Kupu-Editor (bvwm-nord-it.de) >>
![Page 68: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/68.jpg)
Barrierefreie Websites - Redaktionsarbeit 6811.05.07
Know-How für Redakteure
Strukturierter ContentÜberschriften, Listen, Hervorhebungen, Sprachwechsel, TabellenEingaben in HTML, falls vom WYSIWYG-Editor nicht unterstützt
Layoutvorgabenverfügbare Style-ClassesGrenzen: Bildmaße, Zeichenzahl ...
Prägnante BezeichnerSeitentitel, Linktexte, Linktitel, BildunterschriftenDokumente richtig verlinken (PDF, ...)
Alternativtexte, Sprachniveau (?Autoren?)
![Page 69: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/69.jpg)
Qualitätssicherung
![Page 70: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/70.jpg)
Barrierefreie Websites - Redaktionsarbeit 7011.05.07
Testtools für Redakteure- Flüchtigkeitsfehler -
korrektes HTMLvalidator.w3.org, falls nicht vom CMS erledigt
unversehrtes LayoutBrowser: Fenstergröße und Schriftgröße verändern
AlternativtexteMouseover im IE – sofern keine title verwendetBilder ausschalten – browserabhängigThe Wave
![Page 71: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/71.jpg)
Barrierefreie Websites - Redaktionsarbeit 7111.05.07
Alternativtexte testen
Ausschnitt aus www.hha.deanalysiert mit The Wavewave.webaim.org
Symbole für alt-Attribute
Erläuterung der Symbole siehe wave.webaim.org/wave/explanation.htm
![Page 72: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/72.jpg)
Barrierefreie Websites - Redaktionsarbeit 7211.05.07
Testtools für Webentwickler- Design-/ Strukturfehler -
validator.w3.orgFirefox Developer's ToolbarAIS Web Accessibility ToolbarIBM aDesigner...siehe BITV-Test Werkzeugliste
www.bitvtest.de/werkzeugliste.php
![Page 73: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/73.jpg)
Barrierefreie Websites - Redaktionsarbeit 7311.05.07
AIS Web Accessibility Toolbar
Open-Source Toolbar für Internet ExplorerSammlung verschiedener automatischer Testsmacht technische Merkmale sichtbarBeurteilung erfordert SachverstandReferenztool für BITV-Test des BIK-Projekts
http://www.visionaustralia.org.au/ais/toolbar/
![Page 74: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/74.jpg)
Barrierefreie Websites - Redaktionsarbeit 7411.05.07
Tabellenlayout okay, wenn linearisierbar
-Tabelle für grobe Layoutbereiche
- semantische Auszeichnung der Inhalte
botmuc.de mit AIS Strukturanalyse
![Page 75: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/75.jpg)
Barrierefreie Websites - Redaktionsarbeit 7511.05.07
BITV-Test des BIK-Projekts
Anleitung für Expertentest3 exemplarische Seiten auswählen52 PrüfschritteTest Cases = Use Cases
BITV-Checkpunkt 3. 4 Relative Maßangaben (Skalierbare Darstellung)
Prüfschritt 3. 4. 2 Bei geringer Bildschirmauflösung lesbar. Bei 640 x 480:
Keine ÜberlagerungenFließtext ohne Seitwärtsscrollen lesbar
4-Augen-Prinzip95-100 Punkte = barrierefrei nach BITV
![Page 76: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/76.jpg)
Barrierefreie Websites - Redaktionsarbeit 7611.05.07
BITV-Test Einsatzgebiete
Abschließender KonformitätstestGütesiegel des BIK-ProjektsDurchführung: BIK-Projekt mit 2 unabhängigen Prüfern
Entwicklungsbegleitender TestBeratungsleistung zur internen Verwendung, keine VeröffentlichungAnbieter: BIK-Projekt, qualifizierte Webagenturen
Selbsttestwww.bitvtest.deNachtest durch BIK-Projekt möglichBasis für 95plus-Liste
![Page 77: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/77.jpg)
Barrierefreie Websites - Redaktionsarbeit 7711.05.07
DIN-Zertifikat
Offengelegtes Testverfahren– Bestandteile:
BITV-Test des BIK-ProjektsVerständlichkeitstest nach BIENENachhaltigkeitsnachweis für laufende Produktion (Qualifikation, Tools)
TestinstituteDIN CERTCOAbI-Partner, BIK-Beratungsstellen
Kosten: >= 3000 Euro
![Page 78: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/78.jpg)
Barrierefreie Websites - Redaktionsarbeit 7811.05.07
Beratungsangebote
Öffentliche Beratung: BIK-ProjektBeratungsstellen in Hamburg, Berlin, Hannover, Marburg, NRW
Qualifizierte Web-AgenturenAbI-Unterstützerabi-projekt.de/unterstuetzer.html
BIK 95plus-Listebik-online.info/test/95plus/
Barrierekompass Einkaufsführerbarrierekompass.de/agenturen-barrierefreies-internet.php
![Page 79: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/79.jpg)
Exkurs: Barrierefreies PDF
![Page 80: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/80.jpg)
Barrierefreie Websites - Redaktionsarbeit 8011.05.07
PDF – Portable Document Format
Nutzungbinäres Format für Druckansichten, Vorgänger Postscriptgenutzt auch für Austausch und Archivierung von DokumentenZusatz "tagged PDF" erlaubt Auszeichnung der Dokumentstruktur für barrierefreie AufbereitungHerstellung: Adobe Acrobat, und preiswerte Konverter für Druck-PDFs
offenes Dokumentformat?offengelegt von Adobe seit Version 1.4 (2001)ISO-Standard für Teile
Druckvorbereitung seit 2001, Archivierung seit 2005
ISO-Anmeldung für Version 1.7 angekündigt Jan 2007
![Page 81: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/81.jpg)
Barrierefreie Websites - Redaktionsarbeit 8111.05.07
Barrierefreies PDF - Anforderungen
Angemessenes Format für Web-Inhalte ??Gestaltung besser als in HTML: Fußnoten, Formeln, ...Identifikation über originales Druckbild – Rechnungen, Behördenformulare, ...
Anwendbare WCAG-RegelnText als Text, Alternativtext für BilderDokumentstruktur (Tags)
Überschriften, Absätze, Listen, Tabellen, ...
Inhaltsverzeichnis, LesezeichenLesereihenfolge, Schriftvergrößerung: UmfließenFarben anpassbarsiehe BITV-Test 11.1.1 "Angemessene Formate"
![Page 82: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/82.jpg)
Barrierefreie Websites - Redaktionsarbeit 8211.05.07
Barrierefreies PDF - Produktion
beste Basis: strukturiertes Dokumentz.B. Word: Formatvorlagen verwenden.
Konvertierung nach PDFEinstellungen: Tags, Lesezeichen, Umfließen, kein Kopierschutz ...
Nachbearbeitung der TagsBugs in Tag-Hierarchie, Lesereihenfolge, Hintergrundfarben, ...
SoftwareAcrobat Pro für Windows für NachbearbeitungOpenOffice: Konvertierung fehlerfrei nur für einfachste Dokumente
![Page 83: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/83.jpg)
Barrierefreie Websites - Redaktionsarbeit 8311.05.07
Barrierefreies PDF – wofür?
BITV-Test: 3 PunkteNutzen für Blinde und Sehbehinderte
Text und Links, Lesereihenfolge, Dokumentstruktur, Inhaltsverzeichnis, Schriftvergrößerung, Farben
Nutzen für jedermannteils wie oben, und Suchmaschinen-Transparenz
Diskussion "special need" oder "design for all"?Tools: ausgereifte PDF-Konvertierung abwartenWird PDF das Standard-Dokumentformat?
Konkurrenz PDF – ODF abwarten
![Page 84: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/84.jpg)
Barrierefreie Websites - Redaktionsarbeit 8411.05.07
Barrierefreies PDF - Referenzen
AnleitungenJan Eric Hellbusch: "Gestaltung barrierefreier PDF-Dokumente", in: IWP 8/2005, www.bit-informationsdesign.de/iwp-8-2005/
Adobe: Barrierefreie PDF-Dokumente ... erstellenadobe.com/enterprise/accessibility/pdfs/acro7_pg_ue.pdf
DiskussionBIK-Projekt: Fragen zu PDFs
www.bik-online.info/info/entwicklung/pdf.php
Brigitte Bornemann-Jeske: Weg mit der PDF-Prüfung im BITV-Test
www.bit-informationsdesign.de/blog/pdf-pruefung/
![Page 85: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/85.jpg)
Exkurs: Web 2.0
![Page 86: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/86.jpg)
Barrierefreie Websites - Redaktionsarbeit 8611.05.07
Web 2.0 Tagcloud
![Page 87: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/87.jpg)
Barrierefreie Websites - Redaktionsarbeit 8711.05.07
Web 2.0 Techniken
http://de.wikipedia.org/wiki/Web_2.0
![Page 88: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/88.jpg)
Barrierefreie Websites - Redaktionsarbeit 8811.05.07
Web 2.0 und Barrierefreiheit
gemeinsame Basis: WebstandardsBlogs und Wikis sind weitgehend barrierefrei.
Neue Anforderung: Web ApplicationsKomplexe Formulareingaben mit schneller Rückmeldung in Javascript: Nachladen von Content in bestehende Seite mit AJAX
Rückstand der Barrierefrei-TechnikScreenreader: Probleme mit Javascript/AJAXRichtlinien beziehen sich auf statische Websites
![Page 89: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/89.jpg)
Barrierefreie Websites - Redaktionsarbeit 8911.05.07
Web 2.0 – ein Massenphänomen
Mitmachweb, Amateure Content in Blogs ist oft unzureichend strukturiert, Bilder sind ohne Alternativtext
HypeNeue Webanwendungen werden oft ohne ausreichendes Usability- und Accessibility-Know-How programmiert.Bewusste Regelbrüche, Grenzen der Technik ausweiten
![Page 90: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/90.jpg)
Barrierefreie Websites - Redaktionsarbeit 9011.05.07
Barrierefreies Web 2.0 - ToDo
Blogs und WikisBedienbarkeit für Blinde optimieren
Projekte zu WordPress und MediaWiki
Screenreader-HerstellerUmgang mit Javascript und AJAX verbessern
Richtlinien für Web ApplicationsXHTML2, WAI-ARIA in Arbeit
NutzeranforderungenDesignstudien für Abläufe von AnwendungenBIENE: Neuer Kriterienkatalog für BIENE 2008
![Page 91: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/91.jpg)
Barrierefreie Websites - Redaktionsarbeit 9111.05.07
AJAX – Javascript und XMLHttpRequest
www.einfach-fuer-alle.de: Suchfeld mit Live-Search-Ergänzung
![Page 92: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/92.jpg)
Barrierefreie Websites - Redaktionsarbeit 9211.05.07
Barrierefreies Javascript für Formularverarbeitung
ProblemstellungenKomplexe Eingabeformulare mit Gliederung und Anleitung - übersichtlich machen für lineare DarstellungFehlermeldung - Sprung zum EingabefeldDaten nachladen mit AJAX, z.B. Postleitzahlen ...
Designstudienwww.bad-seendorf.de/seendorf_clean/kontakt.htmlichwill.net/ex_form.html
LösungenPolizei NRW – Online-Strafanzeige
https://service.polizei.nrw.de/egovernment/service/anzeige.html
![Page 93: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/93.jpg)
Noch Fragen?
Brigitte Bornemann-Jeske
BIT Design für Barrierefreie Informationstechnik GmbH
../ infobrief / ... # bestellen
![Page 94: Barrierefreie Websites barrierefrei erhalten! · 11.05.07 Barrierefreie Websites - Redaktionsarbeit 6 Barrierefreiheit = Design for All ΄The power of the Web is in its universality](https://reader035.vdocument.in/reader035/viewer/2022071417/6114deb7fa998177e402baff/html5/thumbnails/94.jpg)
Barrierefreie Websites - Redaktionsarbeit 9411.05.07
Der Vortrag wurde gehalten anlässlich der MAI-Tagung 2007am 10./11. Mai 2007 im ZKM | Zentrum für Kunst und Medientechnologie Karlsruhe
Die Tagung wurde veranstaltet durch das Fortbildungszentrum Abtei BrauweilerRheinisches Archiv- und MuseumsamtLANDSCHAFTSVERBAND RHEINLAND
Weitere Informationen unter:www.mai-tagung.de
Anmeldung für den Newsletter:www.mai-tagung.de/MAI-Ling