Lars: php mit aria-current

Ich will ein Menu bzw. auch Untermenus per PHP einbinden, allerdings möchte ich ebenfalls die aktuelle Seite markieren. Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per aria-current möglich sein soll. Leider kann ich nirgendwo eine Eeklärung finden wie genau das Attribut anzuwenden ist.

--
Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :)
  1. Hallo

    Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per aria-current möglich sein soll. Leider kann ich nirgendwo eine Erklärung finden wie genau das Attribut anzuwenden ist.

    Das Attribut aria-current kann mehrere Werte annehmen. Um die aktuell angezeigte Seite zu markieren, wird das Attribut mit dem Wert page auf dem Link zur Seite gesetzt.

    <nav>
        <ul>
            <li><a tabindex="0" aria-current="page">home</a></li></ul>
    </nav>
    

    Auf die aktuelle Seite sollte aber nicht verlinkt werden, weshalb außerdem das href‐Attribut von dem a‐Element entfernt werden sollte. Damit das Element noch per Tastatur erreichbar ist, wird das tabindex‐Attribut auf 0 gesetzt.

    <nav>
        <ul>
            <li><a href="#main" aria-current="page">home</a></li></ul>
    </nav>
    <main id="main>
    ⋮
    </main>
    

    Alternativ kann der Hauptinhalt der Seite verlinkt werden, der mit einem main‐Element ausgezeichnet sein sollte. In diesem Fall ist das tabindex‐Attribut überflüssig.

    [aria-current] {
      font-weight: bolder;
      color: grey;
    }
    

    Im Stylesheet kann das Attribut dazu genutzt werden, den Verweis auf die aktuelle Seite erkennbar von den anderen Links abzugrenzen.

    1. hallo

      Auf die aktuelle Seite sollte aber nicht verlinkt werden,

      Warum denn nicht?

      1. @@beatovich

        Auf die aktuelle Seite sollte aber nicht verlinkt werden,

        Warum denn nicht?

        Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. hallo

          @@beatovich

          Auf die aktuelle Seite sollte aber nicht verlinkt werden,

          Warum denn nicht?

          Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

          Ich denke es gibt gute Gründe, diesen Punkt aus dem Jahre 2003 in der Tat zu missachten.

          1. @@beatovich

            Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

            Ich denke es gibt gute Gründe, diesen Punkt aus dem Jahre 2003 in der Tat zu missachten.

            Das kannst du gerne denken. Solange du keine Gründe anführst, ist es nichts weiter als das: nur so ein Gedanke.

            Und dass Nielsen das bereits 2003 geschrieben hat, ist kein Grund, warum das nicht mehr so sein sollte.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. hallo

              @@beatovich

              Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

              Ich denke es gibt gute Gründe, diesen Punkt aus dem Jahre 2003 in der Tat zu missachten.

              Das kannst du gerne denken. Solange du keine Gründe anführst, ist es nichts weiter als das: nur so ein Gedanke.

              aria-current="page"

              Und dass Nielsen das bereits 2003 geschrieben hat, ist kein Grund, warum das nicht mehr so sein sollte.

              Dass es damals aria-current="page" nicht gab, ist sehr relevant für die Bewertung dieser alten Richtlinien.

              1. @@beatovich

                Dass es damals aria-current="page" nicht gab, ist sehr relevant für die Bewertung dieser alten Richtlinien.

                Nicht im geringsten.

                aria-current="page" (was speziell in Screenreadern wirkt) hält Nutzer nicht davon ab, einen Link zu clicken, Zeit zu verlieren und verwirrt zu sein, dass sie an dieser Stelle doch schon mal waren.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. hallo

                  @@beatovich

                  Dass es damals aria-current="page" nicht gab, ist sehr relevant für die Bewertung dieser alten Richtlinien.

                  Nicht im geringsten.

                  aria-current="page" (was speziell in Screenreadern wirkt) hält Nutzer nicht davon ab, einen Kink zu clicken, Zeit zu verlieren und verwirrt zu sein, dass sie an dieser Stelle doch schon mal waren.

                  Offensichtlich ist es nicht immer ein Zeitverlust, dass eine Seite sparsam (statt durch ctrl R) aktualisiert werden kann.

                  1. @@beatovich

                    Offensichtlich ist es nicht immer ein Zeitverlust, dass eine Seite sparsam (statt durch ctrl R) aktualisiert werden kann.

                    Das Aktualisieren der bestehenden Seite ist eine völlig andere Interaktion als das Navigieren zu einer anderen. (Dass es technisch dasselbe ist, ist für die Nutzerinteraktion irrelevant.)

                    Aktualisieren sollte demzufolge nicht über das Navigationsmenü erfolgen, sondern über ein Bedienelement zum Aktualisieren – einen Button. Unnötig zu erwähnen, dass es einen solchen in wohl jedem Browser schon gibt.

                    Es steht die Frage, warum man das überhaupt tun sollte. Wenn es Daten gibt, die auf einer Webseite aktuell gehalten werden sollen, warum aktualisieren die sich dann nicht automatisch?

                    Für statische Webseiten ist das alles sowieso irrelevant.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. hallo

                      @@beatovich

                      Offensichtlich ist es nicht immer ein Zeitverlust, dass eine Seite sparsam (statt durch ctrl R) aktualisiert werden kann.

                      Das Aktualisieren der bestehenden Seite ist eine völlig andere Interaktion als das Navigieren zu einer anderen. (Dass es technisch dasselbe ist, ist für die Nutzerinterktion irrelevant.)

                      Aktualisieren sollte demzufolge nicht über das Navigationsmenü erfolgen, sondern über ein Bedienelement zum Aktualisieren – einen Button. Unnötig zu erwähnen, dass es einen solchen in wohl jedem Browser schon gibt.

                      Wir reden nicht über Navigationsmenus sondern über verlinke nicht die aktuelle Seite

                      Es steht die Frage, warum man das überhaupt tun sollte. Wenn es Daten gibt, die auf einer Webseite aktuell gehalten werden sollen, warum aktualisieren die sich dann nicht automatisch?

                      Das bitte diskutiere mit CK.

                      Für statische Webseiten ist das alles sowieso irrelevant.

                      Nein. Lass dir das von einem uMatrix User gesagt sein.

                      1. @@beatovich

                        Wir reden nicht über Navigationsmenus sondern über verlinke nicht die aktuelle Seite

                        Kontext: „Ich will ein Menu bzw. auch Untermenus per PHP einbinden …“

                        Wir reden über verlinke nicht die aktuelle Seite im Navigationsmenü.

                        (Ich hab die Postings jetzt mal entsprechend getaggt.)

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        2. Hej Gunnar,

          Auf die aktuelle Seite sollte aber nicht verlinkt werden,

          Warum denn nicht?

          Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

          So einfach ist es nicht. Das widerspricht dem Grundgedanken von Barrierefreiheit, die nämlich auf die unterschiedlichen Wünsche der vielen Nutzer eingeht.

          Meiner Meinung nach ist folgende Vorgehensweise sinnvoll:

          1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

          2.) Bietet einen Seite ständig neue Informationen an (keinen Newsticker oder Aktienkurse, die in einer Ecke der Seite laufen), wie aktuelle Meldungen in einer Liste, würde das automatische hinzufügen von Neuigkeiten dazu führen, dass das, was ich lese dauernd weiter nach unten rutscht. Nervig und inakzeptabel.

          Ja, Browser haben die Möglichkeit, die Seite neu zu laden. Es gibt aber Menschen, die den Link auf die aktuelle Seite dazu nutzen möchten, die aktuelle Seite neu zu laden. Das habe ich nun schon öfter gehört (unter anderem von Kerstin Probiesch). Wer bin ich, ihnen das zu verwehren?

          Also ist mein Vorschlag: auf Seiten, die ständig neue Inhalte anbieten wie ein Forum oder eine News-Seite, sollte es möglich sein, den Link zur aktuellen Seite klicken zu können. Ich hebe ihn aber optisch (Gestaltung plus tooltipp und was immer ich so auffahren kann) und semantisch (aria-current) so deutlich hervor, dass ich möglichst vielen Menschen klar mache: "Du bist hier! - Wenn du hier klickst, bekommst du dieselbe Seite und darauf vielleicht neue Inhalte, vielleicht aber auch nicht".

          Weitere Überlegungen unter anderem aus diesem Forum habe ich mal zusammengefasst in einem Blogartikel mit dem Titel „Inclusives Design: Das „current page“-Problem

          Marc

          --
          Ceterum censeo Google esse delendam
          1. hallo

            Hej Gunnar,

            Auf die aktuelle Seite sollte aber nicht verlinkt werden,

            Warum denn nicht?

            Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

            So einfach ist es nicht. Das widerspricht dem Grundgedanken von Barrierefreiheit, die nämlich auf die unterschiedlichen Wünsche der vielen Nutzer eingeht.

            Meiner Meinung nach ist folgende Vorgehensweise sinnvoll:

            1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

            Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

            Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

            1. Hej beatovich,

              1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

              Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

              Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

              Mit der Ansicht dürftest du ziemlich allein sein…

              Marc

              --
              Ceterum censeo Google esse delendam
              1. hallo

                Hej beatovich,

                1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

                Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

                Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

                Mit der Ansicht dürftest du ziemlich allein sein…

                Wie oft passiert es dir, dass du einen nicht verlinkten Eintrag in einem Nav-Menu zu klicken versuchst?

                Deiner Aussage nach müsste das ziemlich oft der Fall sein.

                1. Hej beatovich,

                  1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

                  Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

                  Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

                  Mit der Ansicht dürftest du ziemlich allein sein…

                  Wie oft passiert es dir, dass du einen nicht verlinkten Eintrag in einem Nav-Menu zu klicken versuchst?

                  Deiner Aussage nach müsste das ziemlich oft der Fall sein.

                  Nein, wo habe ich das gesagt?

                  Marc

                  --
                  Ceterum censeo Google esse delendam
                  1. hallo

                    Hej beatovich,

                    1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

                    Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

                    Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

                    Mit der Ansicht dürftest du ziemlich allein sein…

                    Wie oft passiert es dir, dass du einen nicht verlinkten Eintrag in einem Nav-Menu zu klicken versuchst?

                    Deiner Aussage nach müsste das ziemlich oft der Fall sein.

                    Nein, wo habe ich das gesagt?

                    Wenn man mit CSS a von :not(a) unterscheiden kann, dann kann man damit sicher auch a[aria-current="page"] von a:not([aria-current="page"]) unterscheiden.

                    Findest du nicht?

                    1. Hej beatovich,

                      1.) Auf einer Seite, die nicht ständig neue Inhalte anbietet, ist ein Link auf die aktuelle Seite tatsächlich ein Deppenlink, denn er wird nichts bewirken außer Zeitverlust und Verwirrung.

                      Nein. Es ist das equivalent eines sparsamen Reloads, was ich als uMatrix User bei den meisten Websites ausführen muss.

                      Der Verwirrung kann durch aria-current="page" + Styling vorgebeugt werden.

                      Mit der Ansicht dürftest du ziemlich allein sein…

                      Wie oft passiert es dir, dass du einen nicht verlinkten Eintrag in einem Nav-Menu zu klicken versuchst?

                      Deiner Aussage nach müsste das ziemlich oft der Fall sein.

                      Nein, wo habe ich das gesagt?

                      Wenn man mit CSS a von :not(a) unterscheiden kann, dann kann man damit sicher auch a[aria-current="page"] von a:not([aria-current="page"]) unterscheiden.

                      Findest du nicht?

                      Ja und? Wer auf einen Link klickt, der auf eine Seite führt, die bereits geöffnet ist, hat davon keinen Mehrwert. Das habe ich gesagt. Er kann höchstens verwirrt werden und es kostet ihn Zeit. Niemals hat er davon einen Vorteil.

                      Was das mit Hervorhebungen per CSS zu tun hat, ist mir schleierhaft. Es geht um diejenigen (unerfahrenen) Anwender die (versehentlich) dennoch auf den Link klicken.

                      Nicht um diejenigen, die deine Absicht nachvollziehen können. Hast du die Begründung von Nielsen gelesen?

                      Marc

                      --
                      Ceterum censeo Google esse delendam
  2. @@Lars

    Ich will ein Menu bzw. auch Untermenus per PHP einbinden, allerdings möchte ich ebenfalls die aktuelle Seite markieren. Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per aria-current möglich sein soll. Leider kann ich nirgendwo eine Eeklärung finden wie genau das Attribut anzuwenden ist.

    Du gibst das Attribut dem a-Element des aktuellen Menüpunkts, im Fall einer Seitennavigation mit dem Wert "page". Siehe Léonie Watsons Artikel Using the aria-current attribute.

    Damit ist der Menüpunkt als derjenige der aktuellen Seite markiert – für Screenreader. Diese Markierung kann man über Attributselektor auch visuell hervorheben. In diesem Beispiel mit Unterstreichung ist es:
    #site-navigation a[aria-current] { border-bottom-color: currentColor }.

    In jenem Beispiel mit Icons wird für den aktuellen Menüpunkt ein anderes Icon verwendet bzw. für dasselbe Icon eine Farbe.

    Dort ist auch erwähnt, dass die aktuelle Seite nicht verlinkt sein sollte.

    LLAP 🖖

    PS: Untermenüs? Pull down? Dann ist dieses Navigation Treeview Example Using Computed Properties was für dcih.

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Hallo Lars,

    Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per aria-current möglich sein soll. Leider kann ich nirgendwo eine Eeklärung finden wie genau das Attribut anzuwenden ist.

    Im Wiki gibt es die Kurzfassung.

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
    1. Danke für die Antworten,

      aber mein Problem ist eher, dass ich den einzelnen link (wenn ich ihn per php einbinde) nicht editieren kann. Ich habe eine seperate datei (menu.php) und die integriere ich per <?php include ("menu.php"); ?> in die eigentliche seite. > Das hätte ich besser deutlicher erklärt 😏. Gibt es dann trotzdem eine Möglichkeit die aktuelle Seite bzw. den aktuellen Link zu makieren?

      Bevor mir jetzt gleich erklärt wird, dass es evtl. einfacher wäre das menu nicht in eine separate Datei auszulagern -> ich habe eine Unterseit mit den Einsätzen von jedem Jahr und jedes Jahr kommt eine neue Seite dazu und deswegen habe ich keine Lust irgendwann 100 mal den index zu bearbeiten.

      Gruß Lars

      --
      Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :)
      1. @@Lars

        Ich habe eine seperate datei (menu.php) und die integriere ich per <?php include ("menu.php"); ?> in die eigentliche seite. > Das hätte ich besser deutlicher erklärt 😏. Gibt es dann trotzdem eine Möglichkeit die aktuelle Seite bzw. den aktuellen Link zu makieren?

        Wenn du was mit include einbindest (was übrigens keine Funktion ist), dann wird das Include vom PHP-Interpreter geparst. (Wenn das Include nicht nach PHP geparst werden muss, bietet sich sonst readfile() an.)

        Das heißt: du kannst im Include PHP ausführen lassen. Also die aktuelle Seite, auf der das Include eingebunden wurde, ermitteln: $_SERVER['REQUEST_URI'] (mit möglicherweise im URL vorhandenem Query) bzw. $_SERVER['PHP_SELF'] (ohne Query).

        <nav>
        	<ul>
        		<li>
        			<a
        <?php if ($_SERVER['PHP_SELF'] === '/alpha'): ?>
        				aria-current="page"
        				tabindex="0"
        <?php else: ?>
        				href="/alpha"
        <?php endif; ?>
        			>
        				Alpha
        			</a>
        		</li>
        		<li>
        			<a
        <?php if ($_SERVER['PHP_SELF'] === '/omega'): ?>
        				aria-current="page"
        				tabindex="0"
        <?php else: ?>
        				href="/omega"
        <?php endif; ?>
        			>
        				Omega
        			</a>
        		</li>
        	</ul>
        </nav>
        

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. @@Gunnar Bittersmann

          <nav>
          	<ul>
          			<?php // viel Code ?>
          	</ul>
          </nav>
          

          Und da man da immer wieder dasselbe tut, bietet es sich an, es in einer Schleife zu tun:

          <?php
          $links = [
          	[
          		'url' => '/alpha',
          		'title' => 'Alpha'
          	],
          	[
          		'url' => '/omega',
          		'title' => 'Omega'
          	],
          ];
          ?>
          <nav>
          	<ul>
          <?php foreach ($links as $link): ?>
          		<li>
          			<a
          	<?php if ($_SERVER['PHP_SELF'] === $link['url']): ?>
          				aria-current="page"
          				tabindex="0"
            <?php else: ?>
          				href="<?= htmlspecialchars($link['url']) ?>"
          	<?php endif; ?>
          			>
          				<?= htmlspecialchars($link['title']) ?>
          			</a>
          		</li>
          <?php endforeach; ?>
          	</ul>
          </nav>
          

          EDIT: Ich hab noch schnell die fehlenden htmlspecialchars() ergänzt, ehe dedlfix das mitkriegt. 😉

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. @@Gunnar Bittersmann

            Danke für deine schnelle Antwort. Ich verstehe sie zwar im Moment noch nicht ganz aber sobald ich Zeit habe und sie mir genauer ansehen kann werde ich versuchen sie zu entschlüsseln. 👍

            --
            Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :)
            1. Hallo

              Danke für deine schnelle Antwort. Ich verstehe sie zwar im Moment noch nicht ganz aber sobald ich Zeit habe und sie mir genauer ansehen kann werde ich versuchen sie zu entschlüsseln. 👍

              Wenn etwas unklar ist, frag' nach.

              Tschö, Auge

              --
              Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
              Kleine freie Männer von Terry Pratchett
          2. Erneuter Gruß,

            ich habe die letzten Tage damit verbracht die Antwort von @Gunnar Bittersmann zu verstehen und bin kläglich gescheitert.😖 Letzen Endes ist das aber auch garnicht mehr wichtig, denn ich habe in meinem eigentlichen Menü nur 4-5 Menüpunkte (je nach dem wie unser Kommando entscheidet). Daher reicht es mir nur ein Untermenü per PHP einzubinden und da kann ich dann zur Not auch auf ein visuelles Hervorheben der aktuellen Seite verzichten.

            Trotzdem vielen Dank für die Antwort (ich bin mir sicher dass es gut funktioniert hätte), aber ich wollte diesesmal code vermeinden, den ich nicht verstehe.

            Gruß Lars

            --
            Programmieren ist ein bisschen wie ein Sprung aus einem Hochhaus - bei jeder Etape/Etage kann man sagen "soweit so gut". Bis man aufschlägt! :)
      2. Gibt es dann trotzdem eine Möglichkeit die aktuelle Seite bzw. den aktuellen Link zu makieren?

        Mit PHP hättest Du die Möglichkeit den REQUEST_URI mit dem zu vergleichen was in href notiert ist. MfG

        1. @@pl

          Gibt es dann trotzdem eine Möglichkeit die aktuelle Seite bzw. den aktuellen Link zu makieren?

          Mit PHP hättest Du die Möglichkeit den REQUEST_URI mit dem zu vergleichen was in href notiert ist.

          <?php if ($_SERVER['PHP_SELF'] === $link['url']): ?>, sagte ich schon.

          Auch den Unterschied zwischen $_SERVER['PHP_SELF'] und $_SERVER['REQUEST_URI'] erwähnte ich schon.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Danke für die Ergänzung. Und falls vorhanden kann man auch den REDIRECT_URL heranziehen. MfG