Hilfe bei JavaScript

[Gunnar Bittersmann]

@@Matthias Apsel

Die Beschriftung kannst du visuell verstecken

Wobei ich das als Hilfestellung problematisch finde:

.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}
body:hover .visually-hidden a,
body:hover .visually-hidden input, 
body:hover .visually-hidden button { 
  display: none !important; 
}

• die vielen importants sollten nicht notwendig sein

Doch, sind sie.

Beispiel: <foo class="bar visually-hidden"> mit foo.bar { position: relative } Die Regel für einen spezifischeren Selektor soll ja überschrieben werden.

Vermutlich wurde !important bei clip und overflow vergessen.

• display: none; versteckt auch vor Screenreadern

Soll auch. “The idea is to rely on the pseudo-class :hover to remove all focusable elements in the hidden container from the tabbing sequence.” (unter Tabbing Navigation)

• warum muss ein übergeordnetes Element (welches?) visuell versteckt werden?

Was meinst du damit?

• body kann auch deutlich kleiner als der Viewport werden.

Hm, ja. Das sollte wohl besser html:hover heißen.

Ich muss gestehen, dass ich den Sinn so nicht verstehe.

Da war ich auch mal.

LLAP 🖖