"Navigation überspringen" in 4.10

[theking2]

Wieso erscheint "Navigation überspringen" und wie krieg ich das weg?

[fiedsch]

wie krieg ich das weg?

Per CSS:

Für

<a href="#skipNavigation1" class="sr-only">Navigation überspringen</a>

Mit

.sr-only { display: none; }

[MacKP]

Oder man macht es richtig (so wie es eigentlich gedacht ist), indem man das zum Beispiel so macht, wie hier beschrieben:
https://webaim.org/techniques/css/invisiblecontent/

In dem Artikel steht nicht nur wie, sondern auch warum. Viel Spaß beim lesen ;-)

Viele Grüße

[xchs]

Eigentlich weist Contao hier ja schon standardmäßig die CSS-Klasse invisible zu: https://github.com/contao/contao/blo...ation.html5#L9

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Wieso ist das bei Dir nicht der Fall?

[fiedsch]

Das HTML aus #2 stammt aus einer aktuellen 4.9er Version ohne angepasste Templates. Kann ich mir momentan nicht erklären. Mit eingeschaltetem Debug-Mode bekomme ich:

<!-- TEMPLATE START: vendor/contao/core-bundle/src/Resources/contao/templates/modules/mod_navigation.html5 -->

<!-- indexer::stop -->
<nav class="mod_navigation block" itemscope="" itemtype="http://schema.org/SiteNavigationElement">

  
  <a href="preview.php/#skipNavigation1" class="sr-only">Navigation überspringen</a>

[theking2]

Oder man macht es richtig (so wie es eigentlich gedacht ist), indem man das zum Beispiel so macht, wie hier beschrieben:
https://webaim.org/techniques/css/invisiblecontent/

In dem Artikel steht nicht nur wie, sondern auch warum. Viel Spaß beim lesen ;-)

Viele Grüße

Hmm, verstehe nicht. Wieso sollte eine Screen Reader den ein Menü nicht einblenden? Was hat man sich hier überlegt?

[xchs]

Das HTML aus #2 stammt aus einer aktuellen 4.9er Version ohne angepasste Templates. Kann ich mir momentan nicht erklären.

Verwendest Du dort das Bootstrap Framework?

https://getbootstrap.com/docs/4.4/ge...hidden-content
https://getbootstrap.com/docs/4.0/ut...screenreaders/

[fiedsch]

Verwendest Du dort das Bootstrap Framework?

Ja. Und Bootstrap für Contao. Ich habe nur noch nicht die Stelle gefunden, an der das von Dir zitierte Contao Template ändert wird.

[xchs]

Das passiert hier: https://github.com/contao-bootstrap/...tstrap.yml#L43

Dort sind die CSS-Klassen angeführt, welche durch die entsprechenden Bootstrap-Klassen ausgetauscht werden.

[MacKP]

Hmm, verstehe nicht. Wieso sollte eine Screen Reader den ein Menü nicht einblenden? Was hat man sich hier überlegt?

Ich verstehe gerade nicht, was du hiermit meinst.
Dieser Hinweis ist für Screenreader gedacht oder auch für Menschen, die eine Seite per Tastatur navigieren. Wenn das per display: none ausgeblendet wird, dann ist es so, als ob dieser Link gar nicht da wäre, was nicht so sinnvoll ist. Deswegen nimmt man andere Methoden um das Visuell auszublenden.
Das Menü an sich ist davon erst mal nicht betroffen.

Viele Grüße