2012-04-04 2 views
1

Ich muss Bilder von Text statt tatsächlichen Text für mein Menü anzeigen.Hintergrundbilder über versteckten Text schlecht für die Zugänglichkeit?

Ich habe eine Spanne in jede Menüverknüpfung eingefügt. Diese Spannen haben eine festgelegte Höhe und Breite, sind auf Block anzeigen eingestellt, der Text ist minus eingerückt, um ausgeblendet zu werden, und das Hintergrundbild ist auf das Bild eingestellt, das ich verwenden möchte.

<li> 
    <a href="site.com/page1"> 
    <span id="menu1"> 
     Link Text 
    </span> 
    </a> 
</li> 

Dies funktioniert gut Cross-Browser. Es funktioniert auch gut, wenn ich die Seite vergrößere und verkleinere. Gibt es Probleme mit der Zugänglichkeit, die zB für Bildschirmleseprogramme nicht offensichtlich sind?

Dank

Antwort

4

Screenreader: es wird mit ihren Nutzern (blind und einigen sehbehinderte Menschen) in Ordnung sein, weil Text Ansichtsfenster ausgeschaltet, aber nicht versteckt mit display: none; oder visibility: hidden; so ist es immer noch lesen.

High contrast mode: Unter Windows blendet dieser Modus Hintergrundbilder aus und verwendet benutzerdefinierte Farben zur Anzeige von Inhalten. CSS sind immer noch aktiviert, so dass Text visuell ausgeblendet ist, aber das Hintergrundbild ist weg: Ihr Menü ist für viele sehbehinderte Benutzer weg.

Bilder aus dem einen oder anderen Grund nicht geladen, wahlfrei oder nicht: dasselbe Problem wie bei High Contrast, solange CSS noch aktiv ist.

EDIT: viele Techniken beschrieben plus Pro und Nachteile von Chris Coyer hier erklärt: http://css-tricks.com/css-image-replacement/.
Obwohl die meisten zugänglich ist keine Hintergrundbilder verwenden, wenn, was Sie wirklich verwenden möchten mit alt HTML-Bilder sind :)

+1

+1 nichts falsch mit 'Link Text' und ich denke, die meisten SEO-Lore, die darauf besteht, dass Bildersatz ist besser als plain alt 'alt' für SEO ist trügerisch. – steveax

1

Ja, als ein CSS background nicht von Screenreadern gelesen werden, außerdem ist es schlecht für Ihre SEO. Was Sie tun können, verwenden Sie Text dort und dann verstecken sie entweder mit:

text-indent, opacity:0 

!!! Ich bin nicht sicher, ob es SEO considerd schwarzen Hut ist, wie Sie gerade etwas zu schreiben, schon da das ist !!!

+0

es, dass wird nicht der Hintergrund keine Rolle spielt Bild von Screenreadern gelesen werden? Der echte Text ist immer noch da. Mein Grund dafür, den Texteinzug zu verwenden, um ihn zu verstecken und nicht nur anzuzeigen, ist, dass ich gehört habe, dass Screenreader versteckte Elemente ignorieren. danke – Evans

+0

obwohl Sie gesagt hatten, dass Sie Bilder des Textes anstelle des tatsächlichen Textes verwenden müssen, nahm ich an, dass es keinen "wirklichen" Text gab. -> wird nicht von Google oder Bildschirmlesegeräten gesehen werden. Menuitem -> wird gesehen werden. Wie Sie die CSS mit dem Text zwischen den Spannen spielen, hat keine Auswirkungen auf Bildschirmleser. – Ray

+0

Entschuldigung, habe meine Antwort aktualisiert, um sie klarer zu machen. Screenreader sehen also immer noch Text, der nicht angezeigt wird? Danke – Evans