50er Jahre Anzeige, Hausfrau beim Abwasch mit Prilpaket, mit Slogan: wenig Stil hilft viel
Inserat für "Pril", aus "Frau und Mutter", 47. Jahrgang, zweites Juniheft 1958, Seite 32, bearbeitet. (Originaltext: "Pril so sparsam - wenig Pril hilft viel", "Pril ohne Soda schont die Hände")

Accessibility Know-how

Für die BerufskollegInnen, die sich einen schnellen Überblick verschaffen wollen...

Die Inhalte sind nicht neu, aber weitgehend aktuell.

HTML / CSS Tipps

Bilder

13. Juni 2007

aktualisiert 2013

Textalternativen für blinde Menschen

  1. Screen-Reader BenutzerInnen brauchen eine Textalternative für Bilder, das alt Attribut bei Bildern ist allgemeiner Webstandard.
  2. Jedes Bild braucht zumindestens ein leeres alt Attribut  (alt=““). Es wird dann von Screen-Readern ignoriert.
  3. Manche aktuelle Screen-Reader ignorieren auch Bilder mit fehlendem alt Attribut, manche Screen-Reader geben den Bildnamen aus.
  4. Verlinkte Bilder benötigen unbedingt ein alt Attribut mit Angabe des Linkziels. Ziel des Links soll zuerst im alt stehen (ev. zusätzlich eine Bildinfo)
  5. Bei verlinkten Bildern mit leerem oder fehlendem alt Attribut wird ein Teil des Linkpfades oder ein eventuelles Link title Attribut oder nur „Hyperlink“ gelesen. Das Verhalten von Screen-Readern ist hier nicht einheitlich.
  6. Screen-Reader kündigen beim Vorlesen Bilder, die ein alt Attribut haben, an mit: „Grafik“ oder „Bild“.
  7. Inhaltlich wichtige Bilder soll man mit einer Beschreibung versehen, so kurz und aussagekräftig wie möglich.
  8. Platzhalterbilder, Dekobilder und inhaltlich unwichtige Bilder mit leerem alt=““ versehen, damit sie von Screen-Readern ignoriert werden können.
  9. Keine redundante Information (z.b. gleiche Info in alt und title Attribut und Bildunterschrift oder alt=“Bild:Beschreibung vom Bild“).
  10. Ausblendung des ev. störenden Tooltipps bei mouseover im Internet Explorer erreicht man durch leeren title=““.
  11. Das Auslesen des Bild title Attributs ist oft deaktiviert in Screen-Readern, deshalb keine zentral wichtige Info dort.
  12. Copyrightangaben: Verstecken von © Angaben im alt Attribut ist eine missbräuchliche Verwendung, es genügt nicht dem Copyright und nützt Screen-Reader BenutzerInnen nichts, © Angaben besser im title Attribut (nicht für Touch Screens geeignet!) oder am besten als immer sichtbare Bild Caption.
  13. Inhaltlich nicht wichtige Icons neben Textlinks und grafische Listenpunkte besser im CSS als Hintergrundbilder definieren, ansonsten mit leerem alt=““
  14. Keine wichtige Information nur über Hintergrundbilder allein transportieren (z.B. CSS Sprites für Icons, die als Bedienelemente fungieren, ohne grafisch versteckten Textersatz).

Optimierung für Menschen mit Sehschwächen

  1. Textgrafiken wenn möglich vermeiden, weil sie beim Zoomen schlechter lesbar sind als richtiger Text.
  2. Text in Grafikform muss zumindestens groß und gut lesbar sein und muss ein alt Attribut, das die Textinformation enthält, haben.
  3. Textgrafiken besser nicht mit transparentem Hintergrund abspeichern, bzw. kontrollieren, ob man sie im Kontrastmodus (z.b. auf schwarzem Hintergrund) noch lesen kann.
  4. Den Kontrastmodus testen kann man in Windows unter Systemsteuerung / Eingabehilfen / Anzeige. Im Opera auch sehr gut im Benutzermodus.
  5. Im Kontrastmodus von Windows werden Hintergrundbilder ausgeblendet.
  6. Vorsicht bei Image Replacement Techniken (d.h. Auslagerung von Bildern als Hintergrundbilder ins CSS + verstecktem Text).
    Verstecken von Text mit display:none ist nicht screen-reader-tauglich. Für Screen-Reader kann die Textinformation gegeben werden, in dem man sie außerhalb des Viewports positioniert (z.B. left:-1000px;) oder mit „clip“ beschneidet und damit grafisch versteckt.
    Menschen mit Sehbehinderungen, die nicht Zoomsoftware verwenden, sondern die Benutzereinstellungen im Browser verändern (z.b. den Kontrastmodus von Windows verwenden oder Farbinformationen wegschalten – unter Extras / Internetoptionen / Eingabehilfen) schalten damit Hintergrundbilder aus. Sie verlieren durch das aus dem Sichtfeldschieben des Textes jede Information. Text sollte für diese Zielgruppe besser unterhalb des Hintergrundbildes versteckt werden, in gleicher Farbe wie Hintergrund (gibt Validierungsfehler) oder außerhalb des zugehörigen Containers.

Optimierung für Menschen mit motorischen Einschränkungen

  1. Verlinkte Bilder / Icons sollten groß genug sein, ev. transparenten Rahmen rundherum lassen, damit die Klickfläche größer wird.

Eine Reaktion zu “Bilder”

  1. Siegfried

    Ich gehöre auch zu denen, die eine, wenn auch noch leichte, Sehschwäche haben (hängt wohl mit dem Alter zusammen). Und ich hasse es, wenn Webdesigner meinen, mir vorschreiben zu können, dass ich die derzeit stark in Mode gekommenen winzigen Schriften lesen können muss. Die Voreinstellungen der Browserhersteller sind da schon besser. Noch einen Tick größer, und ich kann die Seiten prima lesen. Aber diese Mode, im Stylesheet body { font-size: 60%; } zu setzen versaut Alles.

    Daher mein Ratschlag: Finger weg von einer Veränderung der Schriftgröße des Hauptinhalts. Diese Schriftgröße darf nur vom Benutzer selber eingestellt werden.

    Alle anderen Schriftgrößen relativ zu dieser Standardschriftgröße.

    Und aus Gründen der Berechenbarkeit bei sogenanntem „elastischen Layout“: Finger weg von einer Schriftgrößenänderung der Haupt-divs. Dadurch kann man die Breiten und Abstände der Haupt-divs in em angeben, und die Angaben bleiben wegen überall gleicher Schriftgrößen immer problemlos berechenbar. Wenn Schriftgrößenänderungen, dann in den untergeordneten Containern.