![Page 1: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/1.jpg)
CSS-Grafiken – wenn assistive Techniken nicht mehr greifen
Webmontag Kassel #118. November 2013
![Page 2: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/2.jpg)
Kerstin Probiesch• Accessibility, Social Media, Projektleitung• Gutachten nach WCAG 2.0 oder BITV 2.0• Schulung und Beratung• Barrierefreie PDF-Dateien• Fachautorin (u.a. Screenguide, PHPMagazin,
Fachbuch zur Barrierefreiheit)• Invited Expert beim W3C (WCAG Working Group)• 50% Webmontag Marburg Orga
![Page 3: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/3.jpg)
Assistive Techniken
z.B. Benutzerdefinierte Farbeinstellungen in Browser und /
oder Betriebssystem
![Page 4: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/4.jpg)
![Page 5: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/5.jpg)
![Page 6: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/6.jpg)
Oft gehen jedoch Informationen verloren
![Page 7: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/7.jpg)
![Page 8: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/8.jpg)
![Page 9: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/9.jpg)
![Page 10: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/10.jpg)
![Page 11: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/11.jpg)
![Page 12: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/12.jpg)
Ursache
Über CSS eingebundene Grafiken werden unter Windows OS
ausgeblendet
![Page 13: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/13.jpg)
Informative Grafiken gehören in das HTML und benötigen einen
Alternativtext
![Page 14: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/14.jpg)
Oder es wird eine gleichwertige Alternative zur Verfügung gestellt
![Page 15: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/15.jpg)
Oder es wird ein Workaround eingesetzt (z.B. für Sprites)
http://blog.paciellogroup.com/2012/08/notes-on-accessible-css-
image-sprites/
![Page 16: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/16.jpg)
WCAG 2.0
F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
![Page 17: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/17.jpg)
Prüfen in Windows OS mit Alt+Umschalt+Druck
Am besten im IE, da dort diese Systemeinstellung direkt greift
![Page 18: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/18.jpg)
Auch auf Formulare achten!
![Page 19: CSS-Hintergrundgrafiken - Wenn assistive Techniken nicht mehr greifen](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b348834a79594e7d8b45ed/html5/thumbnails/19.jpg)
Kontakt: [email protected]
Dieses Werk ist lizenziert unter einer Creative Commons: Namensnennung – Nicht kommerziell – Keine Bearbeitung