Frage vor dem Kauf: Barrierefrei

Detlef's Avatar

Detlef

11 Oct, 2016 09:56 AM

Produkt: Tao Contao
Contao-Version: 3.5.17

Hallo Rocksolid Team,

habe soeben die Demo TAO ausgetestet und dabei feststellen müssen, dass die Navigation nicht mit der Tastatur zu bedienen ist. ist dem so oder habe ich etwas übersehen?

Detlef Lucks
intekos OHG

  1. Support Staff 1 Posted by RockSolid Theme... on 11 Oct, 2016 12:44 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Die Tao-Navigation ist grundsätzlich über die Tastatur bedienbar, jedoch öffnet sich das Dropdown-Menü nur per Maus oder Touchscreen.

  2. 2 Posted by landzone on 14 Dec, 2019 09:15 AM

    landzone's Avatar

    Und kann man das Theme so ändern, dass sich das Dropdown Menü auch per Tastatur öffnet?

  3. Support Staff 3 Posted by RockSolid Theme... on 16 Dec, 2019 07:05 AM

    RockSolid Themes's Avatar

    Das lässt sich grundsätzlich über JavaScript nachrüsten, oder alternativ über den neuen CSS-Selektor :focus-within, dieser wird jedoch noch nicht von allen Browser unterstützt: https://caniuse.com/#feat=css-focus-within

  4. 4 Posted by landzone on 16 Dec, 2019 07:21 AM

    landzone's Avatar

    Können Sie den Einsatz von :focus-within kurz beispielhaft am Mega-Menu darstellen?

  5. Support Staff 5 Posted by RockSolid Theme... on 16 Dec, 2019 07:43 AM

    RockSolid Themes's Avatar

    Im Theme Tao kann der CSS-Code dafür z. B. folgendermaßen aussehen:

    li:focus-within > .mega-dropdown {
        z-index: 1;
        max-height: 9999px;
        overflow: visible;
        padding: 1.57143em 3.7037%;
        opacity: 1;
        transition: opacity 0.2s;
        pointer-events: auto;
    }
    
  6. 6 Posted by landzone on 16 Dec, 2019 04:42 PM

    landzone's Avatar

    Danke, das funktioniert bestens.

  7. 7 Posted by Silvia Reins on 20 Dec, 2019 07:20 AM

    Silvia Reins's Avatar

    Sehr geehrtes Supportteam,

    jetzt muss ich doch nochmal nachfragen, eigentlich funktioniert es
    wunderbar, aber beim Klicken mit der Tastatur hat sich ein unerwünschter
    Effekt eingestellt, man kommt erst beim 2. Klick auf die erste
    Unterseite, lässt sich das noch beheben?

    Theme: Oneo
    Contao: 4.4

    Mein css-Code:

    li:focus-within > .level_2 {
         z-index: 1;
         max-height: 9999px;
         overflow: visible;
         padding: 1.57143em 3.7037%;
         opacity: 1;
         transition: opacity 0.2s;
         pointer-events: auto;
    }
    

    Danke für einen Hinweis.

  8. Support Staff 8 Posted by RockSolid Theme... on 20 Dec, 2019 07:54 AM

    RockSolid Themes's Avatar

    Wir konnten das Problem nicht nachvollziehen. Beim durchschalten der Links via Tabulator-Taste wird ein Menüpunkt nach dem anderen angesprungen und beim betätigen der Enter-Taste wird direkt die Seite geöffnet.

    Können Sie das Verhalten genauer beschreiben oder uns ein Bildschirmvideo davon senden?

  9. 9 Posted by Silvia Reins on 20 Dec, 2019 08:31 AM

    Silvia Reins's Avatar

    Die Tastaturnavigation funktioniert einwandfrei, es geht um den Mausklick.
    Wenn man mit der Maus auf die erste Unterseite in der Hauptnavigation
    klickt muss man 2x klicken, damit sich die Seite öffnet.

    Gibt es dafür eine Lösung.

    Herzlichen Dank.

  10. Support Staff 10 Posted by RockSolid Theme... on 20 Dec, 2019 08:35 AM

    RockSolid Themes's Avatar

    Versuchen Sie es bitte mit folgendem CSS-Code:

    .main-navigation > ul > li:focus-within > ul {
        z-index: 1;
        max-height: 9999px;
        opacity: 1;
        transition: opacity 0.2s;
        pointer-events: auto;
    }
    
  11. 11 Posted by Silvia Reins on 20 Dec, 2019 08:59 AM

    Silvia Reins's Avatar

    Perfekt, vielen Dank!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac