SlideShare ist ein Scribd-Unternehmen logo
Barrierefreies WebDesign

        Eine Einführung

  Brigitte Bornemann-Jeske

         Präsentation beim
   Usability Roundtable Hamburg
          am 4. April 2005
Barrierefreies WebDesign


       Gesetzliche Grundlagen
       Zielgruppen
       Gestaltungsregeln
       Testverfahren
       Aufwand und Nutzen




04.04.05         Barrierefreies WebDesign   2
Vorstellung

    BIT Design für Barrierefreie
       Informationstechnik GmbH
       Hamburg - München

    Barrierefreies WebDesign
    BITV-Beratung
    Computerhilfsmittel für
       Behinderte



04.04.05            Barrierefreies WebDesign   3
Barrierefreies WebDesign


       Gesetzliche Grundlagen
           Zielgruppen
           Gestaltungsregeln
           Testverfahren
           Aufwand und Nutzen




04.04.05             Barrierefreies WebDesign   4
Gesetzliche Grundlagen
BGG Behindertengleichstellungsgesetz
  Bundesbehörden: aktive Verpflichtung
  Wirtschaft: Zielvereinbarungen
BITV Barrierefreie Informationstechnik-
  Verordnung
   Technische Regeln nach WCAG 1.0
   Bund: Umsetzung bis 2005
Behindertengleichstellungsgesetze und
  Durchführungsverordnungen der Länder
   NRW: Umsetzung bis 2008
Arbeitsplatzausstattungen nach SGB IX

  04.04.05        Barrierefreies WebDesign   5
Barrierefreiheit
    „Barrierefrei sind bauliche und sonstige Anlagen,
    Verkehrsmittel, technische Gebrauchsgegen-
    stände, Systeme der Informationsverarbeitung,
    akustische und visuelle Informationsquellen und
    Kommunikationseinrichtungen sowie andere
    gestaltete Lebensbereiche, wenn sie für behinderte
    Menschen in der allgemein üblichen Weise, ohne
    besondere Erschwernis und grundsätzlich ohne
    fremde Hilfe zugänglich und nutzbar sind“.
    (§ 4 BGG)


 Design for All
 Eine Website mit Textversion ist
    nicht barrierefrei

04.04.05              Barrierefreies WebDesign           6
Barrierefreies WebDesign


           Gesetzliche Grundlagen
       Zielgruppen
           Gestaltungsregeln
           Testverfahren
            Aufwand und Nutzen




04.04.05              Barrierefreies WebDesign   7
Blinde und Sehbehinderte

           Technische Hilfen zur
             Computernutzung: Bildschirm
               Braillezeile
               Sprachausgabe
               Screenreader
               Vergrößerungssystem
           Internet
              Sprachbrowser
              Textbrowser/ Textfilter



04.04.05               Barrierefreies WebDesign   8
Braillezeile




   Foto: Audiodata
   www.audiodata.de

04.04.05              Barrierefreies WebDesign   9
Vergrößerungssystem




             Video: BIK-Projekt

             www.bik-online.info



04.04.05             Barrierefreies WebDesign   10
Sprachbrowser

 IBM Homepage Reader


      Erkennt Text
      Unterscheidet HTML-Elemente
      Bietet Orientierungshilfen
            Sprung zum nächsten Element
            Linkliste
            …

     www-5.ibm.com/de/accessibility/hpr.html




04.04.05               Barrierefreies WebDesign   11
Motorische Behinderung

 Technische Hilfen zur
    Computernutzung: Tastatur/Maus
      Spezialtastatur
      Trackball
      Saugblasrohr
      Spracheingabe
 Windows Eingabehilfen




04.04.05           Barrierefreies WebDesign   12
Integra Mouse




           Video: ORF

           www.lifetool.at



04.04.05            Barrierefreies WebDesign   13
Großfeldtastatur




Foto: www.barrierefrei-kommunizieren.de/datenbank



04.04.05            Barrierefreies WebDesign        14
Gehörlose und Hörbehinderte

 Text für Tondokumente

 Einfache, allgemeinverständliche
    Sprache

 Gebärdensprache
     
    Videoaufnahmen
    www.polizei.nrw.de
     
    Gebärden-Avatar
    gebaerden.hamburg.de



04.04.05       Barrierefreies WebDesign   15
Lernbehinderte




www.lebenshilfe-angesagt.de


04.04.05            Barrierefreies WebDesign   16
Zielgruppen

Behinderte
   
   5 (8) Mio in Deutschland
   
   davon 35.500 erwerbsfähige Blinde
Sonstige
   
   Ältere Menschen
   
   Nutzer älterer Computerausstattungen
   
   Nutzer mobiler Endgeräte (Reisende)
   
   Menschen mit fremder Muttersprache

Insgesamt 57 % der Computernutzer

   www.microsoft.com/enable/research
04.04.05          Barrierefreies WebDesign   17
„The power of the Web is in its universality“


  Barrierefrei = Universelles Design
     
     multimodal (Text, Bild und Ton)
     
     ergonomisch (bedienbar, übersichtlich,
     verständlich)
     
     geräteunabhängig (Braillezeile, PDA, Tastatur …)
     
     standardkonform = kompatibel




   04.04.05         Barrierefreies WebDesign            18
Barrierefreies WebDesign


           Gesetzliche Grundlagen
           Zielgruppen
       Gestaltungsregeln
           Testverfahren
            Aufwand und Nutzen




04.04.05              Barrierefreies WebDesign   19
BITV: 14 Anforderungen

 1.  Texthinterlegung für Bild und Ton
 3.  Korrekte Verwendung von HTML und
     CSS
 4. Skalierbarkeit
 5. Linearisierbarkeit
 6. Auch ohne neuere Technologien nutzbar
 9. Geräteunabhängigkeit
 12. Information zu Kontext und Orientierung
 13. Klare Navigationsmechanismen
 14. Einfaches Verständnis der Inhalte




04.04.05          Barrierefreies WebDesign     20
WCAG 2.0


        4 Gestaltungsprinzipien
            wahrnehmbar
            bedienbar
            verständlich
            technologisch robust
        Technologie-übergreifend
            HTML, XML, ECMA-Script,
             Flash, PDF, …

           working draft www.w3.org/TR/WCAG20/



04.04.05             Barrierefreies WebDesign    21
Alternativtext für Grafiken

   Alternativtexte sind funktionell
      äquivalent

            Navigationsgrafiken
               Alternativtexte geben das Ziel des Links
                wieder
            Bilder, Fotos, Diagramme
               knappe Benennung und
               ausführliche Beschreibung
            Dekoration, Layout
               Leerer Alternativtext alt=quot;quot;




04.04.05                 Barrierefreies WebDesign          22
Fehlende Alternativtexte




www.hha.de (2003)


     04.04.05       Barrierefreies WebDesign   23
Bildbeschreibung




www.munchundberlin.org


04.04.05           Barrierefreies WebDesign   24
HTML-Strukturelemente

 Logische Struktur der Inhalte
     
    <h1> bis <h6>
     
    <p>, <ul>, <ol>, …

 Navigationsblöcke
     
    Hierarchische Listen <ul>

 Struktur der Seite
     
     Hauptüberschrift als <h1>
     
     Layoutbereiche als <h …>
     
     alternativ: Sprungmarken

04.04.05         Barrierefreies WebDesign   25
Sprungmarken

 Sprungmarken erschließen die
    Struktur der Seite
      „Zum Inhalt.“
      „Zur Suche.“
      „Zum Hauptmenü.“
      „Zum Bereichsmenü.“
      „Zur Werbung.“
      „Zum Seitenanfang.“
     Beispiel: www.botmuc.de




04.04.05            Barrierefreies WebDesign   26
Navigation in großen Websites

Position der aktuellen Seite kennzeichnen
  Breadcrumb
  Seitentitel = Menübegriff


Inhaltsverzeichnis - Suchfunktion - Hilfe




04.04.05         Barrierefreies WebDesign    27
Skalierbare Schriften




Text und grafische Schrift in Vergrößerung


   04.04.05               Barrierefreies WebDesign   28
Skalierbares Layout




Vergrößerung 200%

    04.04.05         Barrierefreies WebDesign   29
Dynamik - Animation

 Programmierte Objekte benötigen
    eine Sonderbehandlung
      „Stelle sicher, dass die Website auch
           funktioniert, wenn der Nutzer Skripte
           und Plug-Ins ausgeschaltet hat.“
          „Stelle sicher, dass programmierte
           Objekte mit Hilfstechniken bedienbar
           sind.“
          „Biete den Inhalt / die Funktionalität von
           programmierten Objekten auch in einer
           zugänglichen Form an, z.B. als
           Textäquivalent in HTML.“


04.04.05                Barrierefreies WebDesign        30
Anleitungen

 Einführung in die Programmierung
     
     Jan Hellbusch: Barrierefreies
     Webdesign, Neuauflage 2005
           www.knowware.de/barrierefrei
      www.akademie.de
 Standardwerke
     
    Jan Hellbusch et al.: Barrierefreies
    Webdesign, dpunkt.verlag 2005
           www.2bweb.de
      E-Government-Handbuch
           http://www.bsi.bund.de/fachthem/egov/6.htm




04.04.05                Barrierefreies WebDesign        31
Best Practices


            www.polizei.nrw.de
            www.biene-award.de/shortlist.html
            www.barrierefreies-webdesign.de
            www.einfach-fuer-alle.de


04.04.05             Barrierefreies WebDesign    32
Barrierefreies WebDesign


           Gesetzliche Grundlagen
           Zielgruppen
           Gestaltungsregeln
       Testverfahren
           Aufwand und Nutzen




04.04.05              Barrierefreies WebDesign   33
AbI Testempfehlungen

   3-stufiger Test auf BITV-Konformität

            Vorprüfung
            BITV-Kurztest
               BIK-Projekt: www.bitvtest.de


            Hauptprüfung
               geplant: Zertifikat DIN CERTCO Mai 2005



   www.wob11.de/publikationen/testempfehlungen/

04.04.05                 Barrierefreies WebDesign         34
BIK BITV-Kurztest

 Anleitung für Test durch Experten

     Beispiel:
      BITV-Checkpunkt 3. 4 Relative
      Maßangaben (Skalierbare Darstellung)

           Prüfschritt 3. 4. 2 Bei geringer
           Bildschirmauflösung lesbar.
            Bei 640 x 480:
             Keine Überlagerungen
             Fließtext ohne Seitwärtsscrollen lesbar




04.04.05                 Barrierefreies WebDesign       35
Online Testtools

           Automatischer Test (mit
             Hinweis auf Benutzertests)

              validator.w3.org
              bobby.watchfire.com
              wave.webaim.org
              www.barrierefinder.de


04.04.05             Barrierefreies WebDesign   36
Automatische Prüfung

   Automatischer Test der gesamten
      Website

        Fraunhofer: imergo
            www.fit.fraunhofer.de/projekte/imergo

        RedDot Web Compliance Manager
            www.reddot.de

        LIFT Machine
            www.usablenet.com



04.04.05               Barrierefreies WebDesign     37
Barrierefreies WebDesign


           Gesetzliche Grundlagen
           Zielgruppen
           Gestaltungsregeln
           Testverfahren
       Aufwand und Nutzen




04.04.05              Barrierefreies WebDesign   38
Aufwand für Barrierefreies Webdesign

   Erstellung des Systems
       
      Handwerkliche CSS-Programmierung
       
      Test mit verschiedenen Endgeräten
       
      Geeignetes CMS
       
      Altlasten aufarbeiten

   Pflege der Inhalte
       
       Alternativtexte für Bilder
       
       Sprachauszeichnungen
       
       Einfache Sprache



  04.04.05           Barrierefreies WebDesign   39
Nutzen aus Barrierefreiem Webdesign

    Größere Reichweite
        
       Behinderte, Ältere, Mobile Nutzer
    Positive Nutzererfahrung
        
       schnell, übersichtlich, einfach
    Optimiert für Suchmaschinen
        
       Google ist blind
    Geringere Unterhaltskosten
        
       Geringerer Traffic
        
       Einfachere Pflege des Systems
    Technologisch überlegen
        
       Sauberer Code, Cross-Publishing

  04.04.05         Barrierefreies WebDesign   40
bit.informationsdesign


       Unsere Dienstleistungen

             Barrierefreies WebDesign
             BITV-Test
             Relaunch Projektbetreuung
             Inhouse-Seminare



04.04.05            Barrierefreies WebDesign   41
Vielen Dank für Ihre
   Aufmerksamkeit

  Brigitte Bornemann-Jeske

 BIT Design für Barrierefreie
 Informationstechnik GmbH

www.bit-informationsdesign.de

Weitere ähnliche Inhalte

Ähnlich wie Barrierefreies Webdesign

SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMU
Martin Koser
 
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
Frank Rahn
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Stephan Hamberger
 
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Markus Erle
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
Jürg Stuker
 
Adobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignAdobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignanthesis GmbH
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
Jens Grochtdreis
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itBelsoft
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Adobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesignAdobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesignanthesis GmbH
 
Firmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AGFirmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AG
Roland Löffler
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichten
MartinKolb5
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Adobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignAdobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignanthesis GmbH
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
Jens Grochtdreis
 
Workshop Adobe Formulare für SAP Business ByDesign
Workshop Adobe Formulare für SAP Business ByDesignWorkshop Adobe Formulare für SAP Business ByDesign
Workshop Adobe Formulare für SAP Business ByDesignanthesis GmbH
 
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystDigicomp Academy AG
 

Ähnlich wie Barrierefreies Webdesign (20)

SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Erfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMUErfolgsfaktoren der Wikieinführung in KMU
Erfolgsfaktoren der Wikieinführung in KMU
 
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
 
Adobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignAdobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesign
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Adobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesignAdobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesign
 
Firmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AGFirmenvorstellung der Navigate AG
Firmenvorstellung der Navigate AG
 
Vortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichtenVortrag E-Commerce unterrichten
Vortrag E-Commerce unterrichten
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Adobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesignAdobe Formulare für SAP Business ByDesign
Adobe Formulare für SAP Business ByDesign
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Workshop Adobe Formulare für SAP Business ByDesign
Workshop Adobe Formulare für SAP Business ByDesignWorkshop Adobe Formulare für SAP Business ByDesign
Workshop Adobe Formulare für SAP Business ByDesign
 
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
 

Mehr von uxHH

Web-Analytics für UXler
Web-Analytics für UXlerWeb-Analytics für UXler
Web-Analytics für UXler
uxHH
 
VR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William LindleyVR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William Lindley
uxHH
 
Gamified Customer Experiene
Gamified Customer ExperieneGamified Customer Experiene
Gamified Customer Experiene
uxHH
 
Kontinuierliche User Research und UX Design
Kontinuierliche User Research und UX DesignKontinuierliche User Research und UX Design
Kontinuierliche User Research und UX Design
uxHH
 
Lebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtigLebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtig
uxHH
 
UX Communities - Skopos Nova
UX Communities - Skopos NovaUX Communities - Skopos Nova
UX Communities - Skopos Nova
uxHH
 
Conversational UX & Shopping-Convenience
Conversational UX & Shopping-ConvenienceConversational UX & Shopping-Convenience
Conversational UX & Shopping-Convenience
uxHH
 
UXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-HippUXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-Hipp
uxHH
 
Werkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements EngineeringWerkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements Engineering
uxHH
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
uxHH
 
UXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote AppsUXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote Apps
uxHH
 
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte InnovationGrounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
uxHH
 
Riding the Wave of Exponential Innovation
Riding the Wave of Exponential InnovationRiding the Wave of Exponential Innovation
Riding the Wave of Exponential Innovation
uxHH
 
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
uxHH
 
Gamified Nachbarschaft
Gamified NachbarschaftGamified Nachbarschaft
Gamified Nachbarschaft
uxHH
 
Neue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach ResearchNeue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach Research
uxHH
 
Virtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment ExperienceVirtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment Experience
uxHH
 
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales HochschulrankingU-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
uxHH
 
Enhancing the Touch
Enhancing the TouchEnhancing the Touch
Enhancing the Touch
uxHH
 
Mastering SCRUM & UCD
Mastering SCRUM & UCDMastering SCRUM & UCD
Mastering SCRUM & UCD
uxHH
 

Mehr von uxHH (20)

Web-Analytics für UXler
Web-Analytics für UXlerWeb-Analytics für UXler
Web-Analytics für UXler
 
VR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William LindleyVR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William Lindley
 
Gamified Customer Experiene
Gamified Customer ExperieneGamified Customer Experiene
Gamified Customer Experiene
 
Kontinuierliche User Research und UX Design
Kontinuierliche User Research und UX DesignKontinuierliche User Research und UX Design
Kontinuierliche User Research und UX Design
 
Lebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtigLebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtig
 
UX Communities - Skopos Nova
UX Communities - Skopos NovaUX Communities - Skopos Nova
UX Communities - Skopos Nova
 
Conversational UX & Shopping-Convenience
Conversational UX & Shopping-ConvenienceConversational UX & Shopping-Convenience
Conversational UX & Shopping-Convenience
 
UXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-HippUXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-Hipp
 
Werkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements EngineeringWerkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements Engineering
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
 
UXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote AppsUXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote Apps
 
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte InnovationGrounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
 
Riding the Wave of Exponential Innovation
Riding the Wave of Exponential InnovationRiding the Wave of Exponential Innovation
Riding the Wave of Exponential Innovation
 
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
 
Gamified Nachbarschaft
Gamified NachbarschaftGamified Nachbarschaft
Gamified Nachbarschaft
 
Neue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach ResearchNeue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach Research
 
Virtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment ExperienceVirtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment Experience
 
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales HochschulrankingU-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
 
Enhancing the Touch
Enhancing the TouchEnhancing the Touch
Enhancing the Touch
 
Mastering SCRUM & UCD
Mastering SCRUM & UCDMastering SCRUM & UCD
Mastering SCRUM & UCD
 

Barrierefreies Webdesign

  • 1. Barrierefreies WebDesign Eine Einführung Brigitte Bornemann-Jeske Präsentation beim Usability Roundtable Hamburg am 4. April 2005
  • 2. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 2
  • 3. Vorstellung BIT Design für Barrierefreie Informationstechnik GmbH Hamburg - München Barrierefreies WebDesign BITV-Beratung Computerhilfsmittel für Behinderte 04.04.05 Barrierefreies WebDesign 3
  • 4. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 4
  • 5. Gesetzliche Grundlagen BGG Behindertengleichstellungsgesetz Bundesbehörden: aktive Verpflichtung Wirtschaft: Zielvereinbarungen BITV Barrierefreie Informationstechnik- Verordnung  Technische Regeln nach WCAG 1.0  Bund: Umsetzung bis 2005 Behindertengleichstellungsgesetze und Durchführungsverordnungen der Länder  NRW: Umsetzung bis 2008 Arbeitsplatzausstattungen nach SGB IX 04.04.05 Barrierefreies WebDesign 5
  • 6. Barrierefreiheit „Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegen- stände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind“. (§ 4 BGG) Design for All Eine Website mit Textversion ist nicht barrierefrei 04.04.05 Barrierefreies WebDesign 6
  • 7. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 7
  • 8. Blinde und Sehbehinderte Technische Hilfen zur Computernutzung: Bildschirm  Braillezeile  Sprachausgabe  Screenreader  Vergrößerungssystem Internet Sprachbrowser Textbrowser/ Textfilter 04.04.05 Barrierefreies WebDesign 8
  • 9. Braillezeile Foto: Audiodata www.audiodata.de 04.04.05 Barrierefreies WebDesign 9
  • 10. Vergrößerungssystem Video: BIK-Projekt www.bik-online.info 04.04.05 Barrierefreies WebDesign 10
  • 11. Sprachbrowser IBM Homepage Reader  Erkennt Text  Unterscheidet HTML-Elemente  Bietet Orientierungshilfen  Sprung zum nächsten Element  Linkliste  … www-5.ibm.com/de/accessibility/hpr.html 04.04.05 Barrierefreies WebDesign 11
  • 12. Motorische Behinderung Technische Hilfen zur Computernutzung: Tastatur/Maus  Spezialtastatur  Trackball  Saugblasrohr  Spracheingabe Windows Eingabehilfen 04.04.05 Barrierefreies WebDesign 12
  • 13. Integra Mouse Video: ORF www.lifetool.at 04.04.05 Barrierefreies WebDesign 13
  • 15. Gehörlose und Hörbehinderte Text für Tondokumente Einfache, allgemeinverständliche Sprache Gebärdensprache  Videoaufnahmen www.polizei.nrw.de  Gebärden-Avatar gebaerden.hamburg.de 04.04.05 Barrierefreies WebDesign 15
  • 17. Zielgruppen Behinderte  5 (8) Mio in Deutschland  davon 35.500 erwerbsfähige Blinde Sonstige  Ältere Menschen  Nutzer älterer Computerausstattungen  Nutzer mobiler Endgeräte (Reisende)  Menschen mit fremder Muttersprache Insgesamt 57 % der Computernutzer www.microsoft.com/enable/research 04.04.05 Barrierefreies WebDesign 17
  • 18. „The power of the Web is in its universality“ Barrierefrei = Universelles Design  multimodal (Text, Bild und Ton)  ergonomisch (bedienbar, übersichtlich, verständlich)  geräteunabhängig (Braillezeile, PDA, Tastatur …)  standardkonform = kompatibel 04.04.05 Barrierefreies WebDesign 18
  • 19. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 19
  • 20. BITV: 14 Anforderungen 1. Texthinterlegung für Bild und Ton 3. Korrekte Verwendung von HTML und CSS 4. Skalierbarkeit 5. Linearisierbarkeit 6. Auch ohne neuere Technologien nutzbar 9. Geräteunabhängigkeit 12. Information zu Kontext und Orientierung 13. Klare Navigationsmechanismen 14. Einfaches Verständnis der Inhalte 04.04.05 Barrierefreies WebDesign 20
  • 21. WCAG 2.0  4 Gestaltungsprinzipien  wahrnehmbar  bedienbar  verständlich  technologisch robust  Technologie-übergreifend  HTML, XML, ECMA-Script, Flash, PDF, … working draft www.w3.org/TR/WCAG20/ 04.04.05 Barrierefreies WebDesign 21
  • 22. Alternativtext für Grafiken Alternativtexte sind funktionell äquivalent  Navigationsgrafiken  Alternativtexte geben das Ziel des Links wieder  Bilder, Fotos, Diagramme  knappe Benennung und  ausführliche Beschreibung  Dekoration, Layout  Leerer Alternativtext alt=quot;quot; 04.04.05 Barrierefreies WebDesign 22
  • 23. Fehlende Alternativtexte www.hha.de (2003) 04.04.05 Barrierefreies WebDesign 23
  • 25. HTML-Strukturelemente Logische Struktur der Inhalte  <h1> bis <h6>  <p>, <ul>, <ol>, … Navigationsblöcke  Hierarchische Listen <ul> Struktur der Seite  Hauptüberschrift als <h1>  Layoutbereiche als <h …>  alternativ: Sprungmarken 04.04.05 Barrierefreies WebDesign 25
  • 26. Sprungmarken Sprungmarken erschließen die Struktur der Seite  „Zum Inhalt.“  „Zur Suche.“  „Zum Hauptmenü.“  „Zum Bereichsmenü.“  „Zur Werbung.“  „Zum Seitenanfang.“ Beispiel: www.botmuc.de 04.04.05 Barrierefreies WebDesign 26
  • 27. Navigation in großen Websites Position der aktuellen Seite kennzeichnen Breadcrumb Seitentitel = Menübegriff Inhaltsverzeichnis - Suchfunktion - Hilfe 04.04.05 Barrierefreies WebDesign 27
  • 28. Skalierbare Schriften Text und grafische Schrift in Vergrößerung 04.04.05 Barrierefreies WebDesign 28
  • 29. Skalierbares Layout Vergrößerung 200% 04.04.05 Barrierefreies WebDesign 29
  • 30. Dynamik - Animation Programmierte Objekte benötigen eine Sonderbehandlung  „Stelle sicher, dass die Website auch funktioniert, wenn der Nutzer Skripte und Plug-Ins ausgeschaltet hat.“  „Stelle sicher, dass programmierte Objekte mit Hilfstechniken bedienbar sind.“  „Biete den Inhalt / die Funktionalität von programmierten Objekten auch in einer zugänglichen Form an, z.B. als Textäquivalent in HTML.“ 04.04.05 Barrierefreies WebDesign 30
  • 31. Anleitungen Einführung in die Programmierung  Jan Hellbusch: Barrierefreies Webdesign, Neuauflage 2005 www.knowware.de/barrierefrei  www.akademie.de Standardwerke  Jan Hellbusch et al.: Barrierefreies Webdesign, dpunkt.verlag 2005 www.2bweb.de  E-Government-Handbuch http://www.bsi.bund.de/fachthem/egov/6.htm 04.04.05 Barrierefreies WebDesign 31
  • 32. Best Practices  www.polizei.nrw.de  www.biene-award.de/shortlist.html  www.barrierefreies-webdesign.de  www.einfach-fuer-alle.de 04.04.05 Barrierefreies WebDesign 32
  • 33. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 33
  • 34. AbI Testempfehlungen 3-stufiger Test auf BITV-Konformität  Vorprüfung  BITV-Kurztest  BIK-Projekt: www.bitvtest.de  Hauptprüfung  geplant: Zertifikat DIN CERTCO Mai 2005 www.wob11.de/publikationen/testempfehlungen/ 04.04.05 Barrierefreies WebDesign 34
  • 35. BIK BITV-Kurztest Anleitung für Test durch Experten Beispiel: BITV-Checkpunkt 3. 4 Relative Maßangaben (Skalierbare Darstellung) Prüfschritt 3. 4. 2 Bei geringer Bildschirmauflösung lesbar. Bei 640 x 480:  Keine Überlagerungen  Fließtext ohne Seitwärtsscrollen lesbar 04.04.05 Barrierefreies WebDesign 35
  • 36. Online Testtools Automatischer Test (mit Hinweis auf Benutzertests)  validator.w3.org  bobby.watchfire.com  wave.webaim.org  www.barrierefinder.de 04.04.05 Barrierefreies WebDesign 36
  • 37. Automatische Prüfung Automatischer Test der gesamten Website  Fraunhofer: imergo www.fit.fraunhofer.de/projekte/imergo  RedDot Web Compliance Manager www.reddot.de  LIFT Machine www.usablenet.com 04.04.05 Barrierefreies WebDesign 37
  • 38. Barrierefreies WebDesign Gesetzliche Grundlagen Zielgruppen Gestaltungsregeln Testverfahren Aufwand und Nutzen 04.04.05 Barrierefreies WebDesign 38
  • 39. Aufwand für Barrierefreies Webdesign Erstellung des Systems  Handwerkliche CSS-Programmierung  Test mit verschiedenen Endgeräten  Geeignetes CMS  Altlasten aufarbeiten Pflege der Inhalte  Alternativtexte für Bilder  Sprachauszeichnungen  Einfache Sprache 04.04.05 Barrierefreies WebDesign 39
  • 40. Nutzen aus Barrierefreiem Webdesign Größere Reichweite  Behinderte, Ältere, Mobile Nutzer Positive Nutzererfahrung  schnell, übersichtlich, einfach Optimiert für Suchmaschinen  Google ist blind Geringere Unterhaltskosten  Geringerer Traffic  Einfachere Pflege des Systems Technologisch überlegen  Sauberer Code, Cross-Publishing 04.04.05 Barrierefreies WebDesign 40
  • 41. bit.informationsdesign Unsere Dienstleistungen  Barrierefreies WebDesign  BITV-Test  Relaunch Projektbetreuung  Inhouse-Seminare 04.04.05 Barrierefreies WebDesign 41
  • 42. Vielen Dank für Ihre Aufmerksamkeit Brigitte Bornemann-Jeske BIT Design für Barrierefreie Informationstechnik GmbH www.bit-informationsdesign.de