Barrierefreie Navigation

  • Hallo allerseits,

    ich muss die barrierefreie Navigation der Website https://kv-muster.drk-intern.de/ mit webEdition nachbauen.

    Das gelingt sehr gut, bis auf ein Problem, das mich zum Verzweifeln bringt.

    Die Navigation soll wie folgt funktionieren:

    Bei Klick auf die Hauptnavigation - beispielsweise auf "Angebote" - gelangt man zur Übersichtsseite "Angebote" und es erscheint dort ein Balken mit dem Punkt "Angebote". Klick man darauf, klappt die Unternavigation von "Angebote" auf. Darin kann man dann nochmals auf eine Ebene tiefer auf die Links zu den Einzelseiten kommen.

    Bei mir ist es so, dass die Unternavigation grundsätzlich mit der Hauptnavigation beginnt. Danach kann ich auch wunderbar in die nächsten Ebenen gelangen und auch zurück springen. Aber ich möchte ja mit dem zweiten Level beginnen. Ich habe mit einem ersten leeren "we:navigationEntry" begonnen, aber leider bringt das nichts. Hier der Code, wie ich es umgesetzt habe (ab der Übersichtsseite nach dem Klick auf einen Hauptnavigationspunkt):

    Nun habe ich schon verschiedene Varianten ausprobiert. Beispielsweise habe ich beim zweiten <we:navigationEntry type="folder" navigationname="untermenue"> auch mal ein current="true" hinzugefügt. Da ist dann nur noch der eine Hauptnavigationspunkt, den ich angeklickt habe, zu sehen und sonst kein weiterer Link. Mit der Angabe von Levels funktioniert es auch nicht.

    Ich würde mich über einen Tipp sehr freuen.

    Viele Grüße

    Silvia

    Edited 2 times, last by SiBl (September 25, 2023 at 4:05 PM).

  • Bei mir ist es so, dass die Unternavigation grundsätzlich mit der Hauptnavigation beginnt. Danach kann ich auch wunderbar in die nächsten Ebenen gelangen und auch zurück springen. Aber ich möchte ja mit dem zweiten Level beginnen. Ich habe mit einem ersten leeren "we:navigationEntry" begonnen, aber leider bringt das nichts.

    Verstehe ich noch nicht ganz, was möchtest du vom Verhalten anders als es gerade ist? Am Beispiel von Angebote. Eventuell hilft eine Zeichnung oder eine Baumstruktur um zu verstehen, was genau du brauchst.

  • Hier zur Verdeutlichung zwei Screenshots:

    Die Navigation, wie sie sein soll (Beispiel https://kv-muster.drk-intern.de/angebote.html)

    Und ein Screenshot aus meiner Entwicklungsumgebung (navi_falsch.jpg)
    Nur zur Info: die Unternavigation unterscheidet sich bei mir. Es gibt also nicht Alltagshilfen usw., sondern Rettungsdienst, Gesundheit und Pflege usw.. Diese Links müssten in der Unternavigation erscheinen, aber es erscheinen immer nur die Hauptpunkte.

  • Hallo Sivlia,

    Das mit der Navigation ist nicht ganz so trivial. Am Besten du definierst jede Navigationsebene separat, z.B. so:

    Startpunkt der Navigation festlegen:

    HTML
    <we:navigation navigationname="untermenue" parentid="204"/>

    Optional: Leere Ausgabe für Folder und Items als default definieren:

    HTML
    <we:navigationEntry type="folder" navigationname="untermenue"></we:navigationEntry>
    <we:navigationEntry type="item" navigationname="untermenue"></we:navigationEntry>

    1. Navigationsebene

    2. Navigationsebene

    Die Ausgabe kann davon unabhängig erfolgen:

    HTML
    <div class="sub-menu__nav-wrap" style="visibility: hidden">
      <nav class="sub-menu__nav" aria-label="Untermenü von <we:textarea wysiwyg="false" name="ueberschrift" htmlspecialchars="true" />">
        <div class="sub-menu__list-wrap">
          <ul class="sub-menu__list" style="display: block;">
            <we:navigationWrite navigationname="untermenue"/>
          </ul>
        </div>
      </nav>
    </div>

    Um den Code zu vereinfachen, habe ich einige deiner HTML-Strukturen ausgelassen. Ich hoffe der Lösungsansatz ist damit besser erkennbar.


    HTH,

    Sascha

  • Hallo Sascha,

    vielen Dank für Deine Mühe. Ich habe es nun ausprobiert. Leider funktioniert das auch nicht.

    Nun wird bei Klick auf "Angebote" wieder Level 1 ausgegeben und davon aber nur der aktive Navigationspunkt.

    Bei Klick auf das "Angebote" im Klappmenü erscheinen dann wie gewünscht die Menüpunkte von Level 2 (die ja eigentlich ein Schritt vorher angezeigt werden sollten). Klickt man dann auf einen Punkt bei Level 2, werden die Navigationspunkte von Level 3 gar nicht mehr angezeigt. Die Angabe level="2" current="false" oder level="2" current="true" scheinen hier nicht zu wirken.

    Hier der Code dazu:

    Ich bin irgendwie ratlos. Gib es noch eine Idee, wie ich die Navigation funktionsfähig machen kann?
    Bin für jeden Hinweis dankbar.


    Viele Grüße

    Silvia

  • Hallo Silvia,

    Jetzt sehe ich erst was du da machst. Da wird ja die selbe Navigation mit unterschiedlicher Bezeichnung zwei mal ausgegeben. Da kannst du denke ich wie folgt in einer Navigation zusammenfassen:

    Ich habe das jetzt nur schnell zusammengestückelt. Um exakt den benötigten Code zu erstellen, wirst du vermutlich noch etwas nachbessern müssen.


    HTH,

    Sascha

  • Hallo Sascha,

    durch Deinen Hinweis bin ich einen kleinen Schritt weiter - vielen Dank! Das Zusammenfassen der Navigationen hat schon mal etwas gebracht.

    Jetzt bin ich soweit, dass Level 2 bei Klick auf den aktiven Punkt bei Level 1 angezeigt wird. Man kann auch auf den Link klicken und gelangt zu dem Bereich, wo dann eigentlich die Links von Level 3 gezeigt werden müssten. Leider werden diese Links aber nicht ausgegeben. Im Screenshot sieht man, dass der angezeigte Bereich in <we:navigationEntry type="folder" navigationname="mainNav" level="2" current="false"> liegt.

    Hier noch ein paar Hinweise zu Deinem Vorschlag:

    • Bei Level 1 musste ich den ersten Teil weglassen, denn sonst hätte sich das Klappmenü gar nicht geöffnet und auch der Link-Text wurde nicht angezeigt.
    • Bei Level 2 musste ich im Bereich level="2" current="false" noch den gesamten Code von <we:ifHasEntries> hinzufügen, denn sonst wurde nur eine leere weiße Fläche angezeigt
    • Die Navigation ist bei mir mit drei Ebenen aufgebaut. Die ersten zwei Ebenen sind als Ordner angelegt und die der dritten Ebene als Einträge. Deshalb habe ich im Code in der 3. Navigationsebene type="item" gewählt und <we:ifHasEntries> weggelassen.

    Hier der momentane Code:

    Und dann stehe ich noch vor einem weiteren Problem: Denn auf der Musterseite https://kv-muster.drk-intern.de sieht man, dass in dem Balken, der das Klappmenü aufklappt bei der Darstellung einer Einzelseite (Level 3) der Navigationseintrag dieser Seite steht.

    Bei mir steht bei einer Level 3-Seite immer der Eintrag von Level 1 - was eigentlich logisch ist. Nur wie schaffe ich es, dass dann auf der Einzelseite der Navi-Eintrag der Seite steht?

    Sorry, dass ich nochmal frage, aber ich komme nicht dahinter, warum die Level 3-Einträge gar nicht angezeigt werden.

    Vielen Dank für Deine Hilfe!

    Grüße

    Silvia

  • Hallo Sascha,

    jetzt hat's eine Weile gedauert, bis ich hier weitermachen konnte.
    Vielen Dank für Deinen Tipp. Damit bin ich einen großen Schritt weiter gekommen.
    Allerdings bringt mich die Navigation trotzdem noch zum Verzweifeln.
    Es ist nun so, dass sie wunderbar funktioniert, solange ich Seiten auf Level 1 öffne.
    Wenn ich eine Übersichtsseite von Level 2 öffne oder eine Seite von Level 3, dann steht oben (im grün markierten Rahmen) immer der Navigationspunkt "Angebote".

    Hier ein Bild zur Verdeutlichung, wie es sein sollte:

    "Wohnen und Betreuung" ist der Folder von Level 2. Klappt man die Navi dann auf, sieht man die Unterpunkte aus Level 3 dieses Folders. Öffnet man dann eine Seite der dritten Ebene, ändert sich der "Hauptnavigationspunkt" in den Item-Namen und wenn man dann wieder die Navi aufklappt, sieht man wieder die Unterpunkte von Level 3.

    Hier auch ein Bild dazu

    Ich habe nun schon versucht, mit verschiedenen Navigations-Templates zu arbeiten und beispielsweise für die Übersichtsseiten von Level 2 die Navigation erst ab Level 2 anzeigen zu lassen, dann wird aber gar nichts mehr dargestellt.

    Hier noch den jetzigen Stand der Navigation:

    Wie erwähnt, kann man die Navigation, wie sie funktionieren soll, hier ausprobieren: https://kv-muster.drk-intern.de/

    Ich würde mich über weitere Tipps sehr freuen.

    LG,
    Silvia

  • Hallo Silvia,

    Wenn ich das richtig verstehe, dann soll in .sub-menu__topic-button immer der aktive Navigationspunkt angezeigt werden. Falls dem so ist, könntest du folgendes Konstrukt probieren (ungetestet):

    Wenn das nicht hilft, wäre es wohl das Beste die Erstellung in zwei Navigationen aufzuteilen.

    HTH,
    Sascha

  • Hallo Sascha,

    super, das ist eine geniale Lösung. So hat es geklappt. Ich habe nun aber tatsächlich für jedes Level ein separates Navi-Template gebaut und jetzt funktioniert alles.
    Ganz herzlichen Dank für die tolle Unterstützung!

    LG

    Silvia

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!