nicht angemeldet
Gunnar Bittersmann
marctrix
Gunnar Bittersmann
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Auge
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.
Hallo
Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per
aria-currentmö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.
hallo
Auf die aktuelle Seite sollte aber nicht verlinkt werden,
Warum denn nicht?
@@beatovich
Auf die aktuelle Seite sollte aber nicht verlinkt werden,
Warum denn nicht?
Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]
LLAP 🖖
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.
@@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 🖖
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.
@@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 🖖
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.
@@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 🖖
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.
@@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 🖖
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
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.
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
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.
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
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?
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
@@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-currentmö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.
Hallo Lars,
Über Wiki und google habe ich mitlerweile herausgefunden, dass dies per
aria-currentmö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
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
@@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 🖖
@@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 🖖
@@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. 👍
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
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
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
@@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 🖖
Danke für die Ergänzung. Und falls vorhanden kann man auch den REDIRECT_URL heranziehen. MfG