Barrierefreiheit/Screenreader - „left:-9999px“ versus „width:0%“
1 
suit
0 
Matthias Apsel
0
0 
T-Rex
Barrierefreiheit/Screenreader - „left:-9999px“ versus „width:0%“
Moin Members,
ich schraube ja seit einiger Zeit an einem eigenen Dropdown mit CSS, dann wurde erklärt, dass man die Menüs nicht mit visibility: hidden ausblenden soll, da diese dann für Screenreader nicht zu lesen sein. Als bessere Alternative wurde auf "left: -9999px;" verwiesen, der die Container außerhalb des sichtbaren Bereiches verschiebt. Auch damit kann ich gut leben, nun heißt es auf einmal, das mit den -9999px ist auch nicht so gut, der Browser legt da einen ganz großen Bereich an, geht auf die Performanz:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Ich habe nun noch einen Weg gefunden:
.menue ul li ul {width: 0%; overflow: hidden; opacity: 0;}
.menue ul li:hover > ul {width: auto; overflow: visible; opacity: 1;}
Wäre das für Screenreader zu lesen? Zu „width: 0%“ habe ich nichts gefunden und was ist mit „opacity: 0“?
Guten Start in die Woche
Manuel
-
Ich glaube du missverstehst hier Image-Replacement-Techniken völlig. Image-Replacement-Techniken sind dafür da den Text aus dem sichtbaren Bereich zu verbannen um eine Grafik als Alternative anzuzeigen - das ist eine völlig andere Baustelle.
Wenn du ein Drop-Down-Menü hast, kannst du dessen Kinder problemlos ausblenden - per display: none;
Wenn du die Navigation per Tastatur bedienbar machst und die Unternavigation einblendest, hat auch kein Screenreader ein Problem damit es vorzulesen.
Es hat kaum einen Sinn, dass dir der Screenreader die komplette Navigation runterliest obwohl sie noch nichtmal "da" sein soll - bei Image-Replacement-Techniken will man aber genau das erreichen.
-
Om nah hoo pez nyeetz, suit!
Es hat kaum einen Sinn, dass dir der Screenreader die komplette Navigation runterliest obwohl sie noch nichtmal "da" sein soll
Da der Screenreader aber nicht hovern kann, macht es doch Sinn, die Menüs nicht per display: none auszublenden.
Matthias
--
1/z ist kein Blatt Papier.
-
Moin,
also es wird ein allgemeines Menü und soll natürlich keine unnötigen Barrieren aufbauen, wenn es sich vermeiden lässt.
Klar soll es auch über die Tastatur zu bedienen sein, aber soweit ich weiß, geht das nur über JavaScript.
Weiß nun wer, ob ein Container mit "width: 0%" vom Screenreader zu lesen ist?
Und was ist nun mit opacity?
Ich habe nun drei Wege, müsste nun noch den Besten wissen.
-
Om nah hoo pez nyeetz, nocheinPoet!
Ich habe nun drei Wege, müsste nun noch den Besten wissen.
JAWS gibt es als 30-Minuten-Demo. NVDA ist kostenlos.
Matthias
--
1/z ist kein Blatt Papier.
-
Moin Matthias
JAWS gibt es als 30-Minuten-Demo. NVDA ist kostenlos.
NVDA liest das Menü mit „width:0%“ sauber der Reihe nach vor, dann gehe ich mal davon aus, dass dies so ein gangbarer Weg ist.
Danke für den Tipp mit NVDA.
Gruß
Manuel
-
-
-
-
Ich glaube du missverstehst hier Image-Replacement-Techniken völlig. Image-Replacement-Techniken sind dafür da den Text aus dem sichtbaren Bereich zu verbannen um eine Grafik als Alternative anzuzeigen - das ist eine völlig andere Baustelle.
Wenn du ein Drop-Down-Menü hast, kannst du dessen Kinder problemlos ausblenden - per display: none;
Wenn du die Navigation per Tastatur bedienbar machst und die Unternavigation einblendest, hat auch kein Screenreader ein Problem damit es vorzulesen.
Es hat kaum einen Sinn, dass dir der Screenreader die komplette Navigation runterliest obwohl sie noch nichtmal "da" sein soll - bei Image-Replacement-Techniken will man aber genau das erreichen.
Nun es wird an vielen Stellen explizit ein Drop-Down-Menü erwähnt und das Container mit "display: none;" für Screenreader nicht zu lesen ist:
"For example, if you use the CSS declarations display: none or visibility: hidden, you’re hiding the content from a screen reader. If the showing or hiding of content is dependent on mouse input (like on hover), then a blind user has no way to access it."
http://tutorials.tessathornton.com/2011/08/08/screen-reader-accessible-dropdown-menus/
-
Hi,
Nun es wird an vielen Stellen explizit ein Drop-Down-Menü erwähnt und das Container mit "display: none;" für Screenreader nicht zu lesen ist:
Das gilt (nur) solange, wie sie auch per display:none versteckt sind.
"For example, if you use the CSS declarations display: none or visibility: hidden, you’re hiding the content from a screen reader. If the showing or hiding of content is dependent on mouse input (like on hover), then a blind user has no way to access it."
Deshalb sagte suit ja, dass das Menu auch per Tastatur bedienbar sein sollte. Dann kann auch ein Screenreader-Nutzer einen Menupunkt aktivieren, und wenn daraufhin die Unterlemente eingeblendet werden, gibt es auch das Problem nicht mehr.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Ich weiß, dass ist nicht das was du hören willst, aber wenn du etwas für eine bestimmte Technologie baust, dann sollte dir die Technologie bereits stehen um die Sachen zu testen. Ansonsten baust du ins Blinde hinein irgendwas zusammen und musst dem vertrauen was dir entweder irgendjemand sagt oder was du halt so liest.
Gruß
Nebelentwickler
T-Rex-
[...] ins Blinde hinein [...]
Ba Dum Tss!
-