[HowTo] Barrierefreiheit

Diskutiere [HowTo] Barrierefreiheit im Webseitengestaltung, Programmierung, Suchmaschinenoptimierung Forum im Bereich Video, Bild, Grafik, Homepage; Guten Tag zusammen, in diesem HowTo geht es, wie der Titel schon sagt, um das in letzter Zeit viel Diskutierte Thema Barrierefreihet bzw. wie man ...



 
  1. [HowTo] Barrierefreiheit #1
    Volles Mitglied Avatar von NikthePig

    Mein System
    NikthePig's Computer Details
    CPU:
    Intel Core 2 Duo E6750 + Xigmatek HDT-S1283
    Mainboard:
    Gigabyte GA-P35-DS3R
    Arbeitsspeicher:
    4 x 1024MB OCZ Rev. 2 Platinium CL4 800Mhz
    Festplatte:
    1 x Seagate Barracuda 7200.10 16MB Cache
    Grafikkarte:
    nVidia GeForce 8800GTS (G92)
    Soundkarte:
    OnBord
    Gehäuse:
    Chieftec Mesh
    Netzteil:
    Seasonic S12II 500 Watt
    Betriebssystem:
    Windows XP Prof., SuSe LinuX 10.1
    Laufwerke:
    NEC DVD-RW ND-4571A

    Standard [HowTo] Barrierefreiheit

    Guten Tag zusammen,
    in diesem HowTo geht es, wie der Titel schon sagt, um das in letzter Zeit viel Diskutierte Thema Barrierefreihet bzw. wie man die eigene Homepage barrierefrei gestalten kann.
    Und los geht's...
    P.S.: Ich wusste nicht so richtig wo hinn damit, falls es hier falsch ist -> Verschieben

    1. Was ist Barrierefreihet?
    In der Barrierefreihet geht es darum, dass Internet denn vielen Menschen mit Behinderung leichter zugänglich zu machen. Mittlerweile müssen in Deutschland alle Seiten des Bundes die Barierrefreiheit-Standards (gesetzliche Regelung zum Aufbau von barrierefreien Webseiten, zusammengefasst in der Barrierefreie-Informationstechnik-Verordnung, kurz BITV²) erfüllen. Es wird erwartet, das diese Pflicht bald auch für Komerzielle Angebote gilt, was in den USA bereits der Falls ist.
    Vor dem Bund hatte sich der W3C mit diesem Thema auseinander gestzt und die Web Accessibility Initiative (WAI) gegründet, welche unter anderem im Jahre 1999 die "Web Content Accessibility Guidelines 1.0" veröffentlichte³.

    2. Für welche Gruppen ist die Barrierefreihet wichtig?
    Hauptsächlich geht es um folgende vier.

    2.1 Blinde und Sehbehinderte Menschen
    Viele Blinde nutzen mittlerweile das Internet, was dank sog. "Screenreader", eine Software, die z.B. als ein PlugIn in einen Browser installiert wird, die die Texte auf einer Seite vorliest, und mithilfe der Braille-Zeile kein großes Problem mehr darstellt. Sehbehinderte Personen, die (zwar eingeschränkt) sehen, benutzen häufig einen "Screen-Magnifier", Software, die bestimmte Abschnitte auf Wunsch größer darstellt, um lesen zu können. Hinzukommen farbfehlsichtige, die z.B Grün und Rot nicht unterscheiden können.

    2.2 Motorisch eingeschränkte Personen
    Bei dieser Gruppe handelt es sich um Menschen, die eine eingeschränkte Feinmotorik haben (z.B. wegen Parkinson). Diesen ist es oft nicht bzw nur mit großer Anstrengung möglich, mit der Maus zu arbeiten, weshalb von ihnen meistens nur die Tastatur genutzt wird.

    2.3 Kognitiv Behinderte Menschen (geistig Behinderte)

    2.4 Hörbehinderte Nutzer
    Auch diese Gruppe nutzt das Internet bereits sehr Stark, da für sie nur Audio-Dateien oder Videos mit Ton ein Problem darstellen.

    3 Warum die eigene Seite barrierefrei gestalten?
    Dafür gibt es mehrere Gründe. Zum einen ist es einfach Fair, zum anderen benutzen inzwischen 80% der Behinderten das Netz, weshalb sie durchaus eine Zielgruppe für kommerzielle Angebote darstellen. Hinzu kommt noch die schon erwähnte Gesetzgebung.

    4 Wie kann ich meine Homepage barrierefrei gestalten?
    Nun einige Probleme & Lösungen, die eigene Homepage barrierefrei zu gestalten.

    4.1 Screenreader
    Zu Achten ist unter anderen darauf, dass ein Screenreader aus dem Quelltext vorließt. Das heißt, das wen z.B. mit CSS die Reihenfolge des Textes geändert wird, es für den betreffenden Blinden bzw. Sehbehinderten ein Problem darstellt, da der Text dadurch möglicherweise dadurch unverständlich wird. Deshalb macht es Sinn, die eigene Seite zu testen.
    Dazu stehen folgende Möglichkeiten bereit:
    - Lynx (weit verbreiteter Screenreader)
    - Das Lynx PlugIn für Firefox (Lynx Viewer Tool, mehr dazu im "Anhang A")
    - Installationslose Lynx Emulation
    Um die Darstellung einer Homepage mit einer dieser Möglichkeiten zu verdeutlichen, hier zwei Screenshots, einmal normal und einmal mit dem Lynx Viewer Tool PlugIn für Firefox:



    4.2 Schriftformatierung & Tags
    Bei der Schriftformatierung sollte man darauf achten, dass vor allem Logische Tags verwendet werden (z.B. Zitate mittels <cite> usw.), da solche auch von Screenreadern ausgewertet werden. Deshalb sollten Überschriften mit dem <h> Tag, Tabellen mit Unterschriften (usw.) ausgezeichnet werden.
    Bei der Verwendung von CSS sollte nach Möglichkeit darauf geachtet werden, dass Text Größenangaben mit em statt pt festgelegt werden (font-size:12em;), was sichert, dass sich die Schrift der Schriftgrößen-Grundeinstellung anpasst.

    4.3 Farben
    Hierbei ist es wichtig, keine unbeschrifteten Schaltflächen zu nutzen (einen roten Button = stop, grünen = weiter), da diese schwer bzw. gar nicht für einen Farbenblinden zu verstehen sind. Außerdem sollten möglichst Kontrastreiche Farbkombinationen wie Weiß/Schwarz, Blau/Weiß oder Rot/Weiß verwendet werden.

    4.4 Grafiken
    Wichtig bei der Nutzung von Bilder ist auf jeden Fall, das alt-Attribut zu verwenden, da der darin enthaltene Text z.B. bei Lynx anstelle der Darstellung steht und bei nichtverwendung nur der Bild Name erscheint.
    Außerdem ist es hilfreich darauf zu achten, möglichst Informative Alternativ Texte zu verwenden (nicht den Bild Namen oder "Grafik").
    Falls das Bild keine Bedeutung hat, sollte das alt-Attribut leer gelassen werden (<img src="bildtest.gif" alt="" >).
    Auch sollte darauf geachtet werden, dass die Grafiken möglichst einfach sind. Generell gilt überhaupt, möglichst wenig Grafiken zu verwenden.

    4.5 Texte
    Diese sollten aus Rücksicht auf geistig Behinderte möglichst leicht zu verstehen sein, was allerdings durchaus ein Problem darstellen kann, da es unterschiedliche Stufen der Behinderung gibt, weshalb die Anpassung besonders schwer fällt.

    4.5 Das Alt-Attribut allgemein
    Auch bei anderen Tags spielt das alt-Attribut eine wichtige Rolle, und wieder ist darauf zu achten z.B. bei einer Schaltfläche etwas nützliches wie z.B. "Zum Gästebuch" statt "Hier klicken" zu verwenden.

    4.6 Animationen
    Zwar nicht mehr so häufig, doch immer noch anzutreffen: Animierte Gif's. Sehbehinderte können diese schlecht erfassen, vor allem wenn diese schnell ablaufen und viele Farbwechsel enthalten sind.
    Unter anderem sind diese auch in manchen Fällen Ursache für epileptische Anfälle.
    Falls also dringen blinkende Texte verwendet werden müssen, sollte das über CSS geschehen und auf animierte Gif's verzichtet werden.

    4.7 PDF-Dateien
    Zwar können die meisten Screenreader mit PDF's umgehen, doch Sehbehinderte haben bis heute häufig ein Probleme mit diesen.
    Deshalb sollte, falls möglich die PDF-Dateien auch als HTML-Seite oder normaler Text angeboten werden.

    4.8 Videos
    Laut der BITV müssen drei Verschiedene Versionen eines Videos bereitstehen. Eine für "normale" User, eine für Sehbehinderte Nutzer, nach Möglichkeit Video mit Beschreibung was zu sehen ist, oder reine Audiobeschreibung.
    Eine Textbeschreibung des Videos ist notfalls auch möglich.

    4.9 Sound
    Am besten ist, wenn dieser nicht genutzt wird. Falls darauf nicht zu verzichten ist, muss eine Erläuterung zu dem Abgespielten Ton gewährleistet sein.

    4.10 Frames, iFrames und neue Fenster
    Da noch nicht jeder Screenreader ein neues Fenster erkennt, kann dies für den Nutzer sehr verwirrend sein, was durchaus auch trotz Erkennung der Fall sein kann, wenn Inhalte auf unterschiedliche Fenster verteilt werden.
    Das gilt auch bei Frames, da eine Seite die Frames nutzt und mit einem Screenreader angeschaut wird, der Inhalt häufig verstreut vorgefunden wird. Aus diesen gründen ist auf die Nutzung oben genannter Grundsätzlich zu verzichten.

    ²= komplett nachzulesen unter: Barrierefreie Informationstechnik-Verordnung
    ³= wichtigen Punkte übersetzt & zusammengefasst: Web Accessibility Guidelines 1.0

    "Anhang A":
    Das Lynx Viewer Tool lässt sich volgendermaßen nutzen:
    Die betrefende Site wird aufgerufen, rechtsklick -> Yellowpipe Lynx Viewer Tool
    __________________

    Das wars dann, hoffe es war angenehm zu lesen und ein wenig informativ

  2. Standard

    Hallo NikthePig,

    schau Dir mal Diesen Ratgeber. an. Dort wirst du bestimmt fündig.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren
  3. [HowTo] Barrierefreiheit #2
    Foren-Guru Avatar von revealed

    Mein System
    revealed's Computer Details
    CPU:
    Intel Core 2 Duo E6600 (F6;B2) (nix OC)
    Mainboard:
    ASUS P5B (P/G965) (1803) (nix OC)
    Arbeitsspeicher:
    2048 MB Corsair PC2-800 6400C4 Pro 4-4-4-12 (nix OC)
    Festplatte:
    2x Seagate 80 GB Sata II (ST3808110AS) <- reicht
    Grafikkarte:
    ASUS EAX 1950 XTX (nix OC); Hauppauge WinTV-PVR 150;)
    Soundkarte:
    Soundmax 8-channel HD Audio
    Monitor:
    Image Quest Q995 und Medion MD19980B
    Gehäuse:
    3D Mark 06 -- |6935 3D Marks|
    Netzteil:
    BeQuiet 530 Watt (BQT P6-Pro)
    3D Mark 2005:
    12336
    Betriebssystem:
    Windows Vista Ultimate SB 32 bit Deutsch; openSUSE 10.3 32 bit
    Laufwerke:
    Toshiba DvD "SD-M1912" (TM01); PLEXTOR "PX-712A" (1.09)
    Sonstiges:
    Mein Schweiss!

    Standard

    Cool!

    Gibts das Lynx auch für den IE?

    Ich bin grad im SUSE da gibts auch einen Textbrowser der sich "Links" nennt :) Der ist auch ganz nett!

    Gruss

    R

  4. [HowTo] Barrierefreiheit #3
    Volles Mitglied
    Threadstarter
    Avatar von NikthePig

    Mein System
    NikthePig's Computer Details
    CPU:
    Intel Core 2 Duo E6750 + Xigmatek HDT-S1283
    Mainboard:
    Gigabyte GA-P35-DS3R
    Arbeitsspeicher:
    4 x 1024MB OCZ Rev. 2 Platinium CL4 800Mhz
    Festplatte:
    1 x Seagate Barracuda 7200.10 16MB Cache
    Grafikkarte:
    nVidia GeForce 8800GTS (G92)
    Soundkarte:
    OnBord
    Gehäuse:
    Chieftec Mesh
    Netzteil:
    Seasonic S12II 500 Watt
    Betriebssystem:
    Windows XP Prof., SuSe LinuX 10.1
    Laufwerke:
    NEC DVD-RW ND-4571A

    Standard

    Zitat Zitat von revealed Beitrag anzeigen
    Gibts das Lynx auch für den IE?
    Mh, hab ich noch nicht entdeckt, mal suchen...


[HowTo] Barrierefreiheit

Besucher kamen mit folgenden Begriffen auf die Seite:

barrierefreie website howto

Stichworte


Guides, Tipps und Mitspieler zu Citadel: Forged with Fire findest du auf Citadel Forum - Forged with Fire.
-
Trete der Nintendo Community bei und besuche das Nintendo Switch Forum.