Ein grundlegender Überblick über die Erstellung einer responsiven und zugänglichen Navigationspfadkomponente, mit der Nutzer auf Ihrer Website navigieren können.
In diesem Beitrag möchte ich Ihnen zeigen, wie Sie Navigationspfade erstellen können. Demo ansehen.
<ph type="x-smartling-placeholder">Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:
Übersicht
Über die Komponente Navigationspfade wo sich der Nutzer in der Websitehierarchie befindet. Der Name stammt von Hänsel und Gretel, die in dunklem Wald und fanden den Weg nach Hause, indem Sie die Krümel rückwärts nachzeichnen.
Die Navigationspfade in diesem Post sind nicht Standard-
Navigationspfade,
dem Navigationspfad ähneln. Sie bieten zusätzliche Funktionen, indem sie
Seiten direkt in die Navigation mit <select>
, wodurch ein mehrstufiger Zugriff
möglich.
Hintergrund: UX
Im Video für die Komponentendemo oben sind die Platzhalterkategorien die Genres
Videospiele. Dieser Weg wird wie unten gezeigt über den folgenden Pfad erstellt: home »
rpg » indie » on sale
.
Diese Navigationspfadkomponente sollte es Nutzern ermöglichen, sich Informationshierarchie; Zweige springen und schnell Seiten auswählen Genauigkeit.
Informationsarchitektur
Ich finde es hilfreich, in Bezug auf Sammlungen und Objekte zu denken.
Sammlungen
Eine Sammlung besteht aus einer Reihe von Optionen, aus denen Sie wählen können. Auf der Startseite der Klickpfad-Prototyp dieses Beitrags, die Sammlungen sind FPS, RPG, Bawler, Dungeon-Crawler, Sport und Rätsel.
Elemente
Ein Videospiel ist ein Gegenstand. Eine bestimmte Sammlung könnte auch ein Gegenstand sein, steht für eine andere Sammlung. Rollenspiele sind z. B. ein Gegenstand und . Wenn es sich um ein Element handelt, befindet sich der Nutzer auf dieser Sammlungsseite. Beispiel: sie sich auf der Rollenspiel-Seite befinden. Dort findest du eine Liste mit Rollenspielen, zusätzliche Unterkategorien: AAA, Indie und Selbstveröffentlichung.
In der Informatik stellt diese Breadcrumbs-Komponente multidimensional Array:
const rawBreadcrumbData = {
"FPS": {...},
"RPG": {
"AAA": {...},
"indie": {
"new": {...},
"on sale": {...},
"under 5": {...},
},
"self published": {...},
},
"brawler": {...},
"dungeon crawler": {...},
"sports": {...},
"puzzle": {...},
}
Ihre App oder Website verfügt über eine benutzerdefinierte Informationsarchitektur (IA), multidimensionalen Array aus. Ich hoffe, dass das Konzept der Seiten und der Hierarchiedurchlauf können auch in Ihren Navigationspfaden verwendet werden.
Layouts
Markup
Gute Komponenten beginnen mit geeignetem HTML. In diesem Abschnitt geht es um Markup-Entscheidungen und deren Auswirkung auf die Gesamtkomponente.
Dunkles und helles Design
<meta name="color-scheme" content="dark light">
Das Meta-Tag color-scheme
oben
informiert den Browser darüber, dass für diese Seite der helle und der dunkle Browser
Stile. Die Beispiel-Navigationspfade enthalten kein CSS für diese Farbschemata,
Daher verwenden die Navigationspfade die vom Browser bereitgestellten Standardfarben.
Navigationselement
<nav class="breadcrumbs" role="navigation"></nav>
Es empfiehlt sich, die Methode
Element <nav>
für die Website-Navigation. Diese hat die implizite ARIA-Rolle
Navigation.
Beim Testen habe ich festgestellt, dass sich durch das Attribut role
die Art und Weise geändert hat,
dass der Screenreader mit dem Element interagiert,
also habe ich mich dafür entschieden, es hinzuzufügen.
Symbole
Wenn sich ein Symbol auf einer Seite wiederholt, wird die SVG-Datei
Element <use>
bedeutet, dass Sie path
einmal definieren und für alle Instanzen des
. Dadurch wird verhindert, dass dieselben Pfadinformationen wiederholt werden,
größere Dokumente und
das Potenzial von Pfadinkonsistenzen.
Um diese Technik zu verwenden, fügen Sie der Seite ein ausgeblendetes SVG-Element hinzu und umschließen Sie die Symbole.
in einem <symbol>
-Element mit einer eindeutigen ID:
<svg style="display: none;">
<symbol id="icon-home">
<title>A home icon</title>
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</symbol>
<symbol id="icon-dropdown-arrow">
<title>A down arrow</title>
<path d="M19 9l-7 7-7-7"/>
</symbol>
</svg>
Der Browser liest die SVG-HTML, speichert die Symbolinformationen und speichert den Speicher wird mit dem Rest der Seite fortgesetzt und verweist auf die ID für weitere Verwendungen von auf das Symbol:
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<use href="#icon-home" />
</svg>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<use href="#icon-dropdown-arrow" />
</svg>
Definieren Sie die Strategie einmalig und verwenden Sie sie beliebig oft mit minimaler Auswirkung auf die Seitenleistung.
und flexible Gestaltung. Beachten Sie, dass dem SVG-Element aria-hidden="true"
hinzugefügt wurde.
Die Symbole sind für eine Person beim Surfen nicht hilfreich, weil sie nur den Inhalt hören können.
von diesen Nutzenden
verhindert, dass sie unnötigen Lärm hinzufügen.
Geteilter Link .crumb
Hier weichen der herkömmliche Navigationspfad von denen in dieser Komponente ab.
Normalerweise wäre das nur ein <a>
-Link, aber ich habe die Durchlauf-UX mit einem
getarnte Auswahl. Die Klasse .crumb
ist für das Layout des Links und
das Symbol, während .crumbicon
für das Stapeln des Symbols zuständig ist und
Elemente zusammen. Ich nenne es Split-Link, weil seine Funktionen
ähnlich wie die Teilen-Schaltfläche.
sondern für die Seitennavigation.
<span class="crumb">
<a href="#sub-collection-b">Category B</a>
<span class="crumbicon">
<svg>...</svg>
<select class="disguised-select" title="Navigate to another category">
<option>Category A</option>
<option selected>Category B</option>
<option>Category C</option>
</select>
</span>
</span>
Ein Link und einige Optionen sind nichts Besonderes, bieten aber mehr Funktionen
Navigationspfad. Das Hinzufügen eines title
zum <select>
-Element ist für den Bildschirm hilfreich
Nutzenden und ihnen Informationen zur Aktion der Schaltfläche geben. Trotzdem
und allen anderen dieselbe Hilfe, wie Sie sehen,
iPad. Ein Attribut stellt vielen Nutzenden den Schaltflächenkontext bereit.
Separator-Dekorationen
<span class="crumb-separator" aria-hidden="true">→</span>
Trennzeichen sind optional. Es reicht auch aus, nur eines hinzuzufügen (siehe drittes Beispiel im Video).
oben). Dann gebe ich jeweils aria-hidden="true"
, da sie dekorativ sind und nicht
die ein Screenreader vorlesen muss.
Die Eigenschaft gap
, die im Folgenden beschrieben wird, vereinfacht die Abstände dieser Elemente.
Stile
Da für die Farbe Systemfarben verwendet werden, handelt es sich bei Stilen meistens um Lücken und Stapel.
Layoutrichtung und -fluss
Mit dem primären Navigationselement nav.breadcrumbs
wird ein benutzerdefiniertes Attribut auf einen Umfang festgelegt
die von Kindern verwendet werden kann. Außerdem wird eine horizontale
Layout. Dadurch wird sichergestellt, dass die Brüche, Trennlinien und Symbole aufeinander ausgerichtet sind.
.breadcrumbs {
--nav-gap: 2ch;
display: flex;
align-items: center;
gap: var(--nav-gap);
padding: calc(var(--nav-gap) / 2);
}
Jede .crumb
erzeugt auch ein horizontales vertikal ausgerichtetes Layout mit einigen
Gap, richtet sich aber speziell auf ihre untergeordneten Link-Elemente aus und gibt den Stil an,
white-space: nowrap
. Dies ist wichtig für Navigationspfade, die aus mehreren Wörtern bestehen.
mehrzeilig verlaufen sollen. Später in diesem Post werden wir noch Stile hinzufügen,
horizontaler Überlauf durch diese white-space
-Eigenschaft.
.crumb {
display: inline-flex;
align-items: center;
gap: calc(var(--nav-gap) / 4);
& > a {
white-space: nowrap;
&[aria-current="page"] {
font-weight: bold;
}
}
}
aria-current="page"
wird hinzugefügt, damit sich der aktuelle Seitenlink von der
Ruhe. Nutzer von Screenreadern sehen nicht nur klar, dass der Link
haben wir das Element visuell gestaltet, um sehenden Nutzern
eine ähnliche User Experience.
In der Komponente „.crumbicon
“ wird ein Raster verwendet, um ein SVG-Symbol mit einem
unsichtbar" <select>
-Element.
.crumbicon {
--crumbicon-size: 3ch;
display: grid;
grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
place-items: center;
& > * {
grid-area: stack;
}
}
Das <select>
-Element steht im DOM an letzter Stelle, also befindet es sich auf dem Stack,
und interaktiv. Fügen Sie den Stil opacity: .01
hinzu, damit das Element weiterhin verwendet werden kann.
Das Ergebnis ist ein Auswahlfeld, das sich perfekt in die Form des Symbols einfügt.
So können Sie das Aussehen eines <select>
-Elements anpassen, während
Wartung der integrierten Funktionalität.
.disguised-select {
inline-size: 100%;
block-size: 100%;
opacity: .01;
font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}
Überlauf
Navigationspfade sollten einen sehr langen Weg darstellen. Ich liebe es, wenn es angebracht ist, horizontal aus dem Bild zu gehen. Breadcrumbs-Komponente gut qualifiziert.
.breadcrumbs {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: calc(var(--nav-gap) / 2);
& > .crumb:last-of-type {
scroll-snap-align: end;
}
@supports (-webkit-hyphens:none) { & {
scroll-snap-type: none;
}}
}
Mit den Überlauf-Stilen wird die folgende UX eingerichtet:
- Horizontales Scrollen mit Overscroll-Begrenzung.
- Horizontaler Abstand beim Scrollen.
- Ein Andockpunkt auf dem letzten Navigationspfad. Das bedeutet, dass beim Laden der Seite die angedockt und im sichtbaren Bereich geladen wurden.
- Entfernt den Andockpunkt aus Safari, der Probleme mit der horizontalen Kombinationen von Scroll- und Snap-Effekten.
Medienabfragen
Eine kleine Anpassung für kleinere Darstellungsbereiche besteht darin, beschriftet, sodass sie nur das Symbol:
@media (width <= 480px) {
.breadcrumbs .home-label {
display: none;
}
}
Bedienungshilfen
Bewegung
In dieser Komponente gibt es nicht viel Bewegung, aber wenn Sie
bei einer prefers-reduced-motion
-Prüfung können wir unerwünschte Bewegungen verhindern.
@media (prefers-reduced-motion: no-preference) {
.crumbicon {
transition: box-shadow .2s ease;
}
}
Keiner der anderen Stile muss geändert werden, die Mouseover- und Fokus-Effekte sind großartig.
ohne transition
sinnvoll und aussagekräftig. Wenn Bewegung jedoch zulässig ist, fügen wir
zur Interaktion.
JavaScript
Unabhängig vom Routertyp, den Sie an Ihrem Standort
oder in Ihrer Anwendung verwenden,
Wenn ein Nutzer den Navigationspfad ändert, muss die URL aktualisiert werden und der Nutzer
ob die entsprechende Seite angezeigt wurde. Zweitens: Zur Normalisierung der Nutzererfahrung
Es kommt nicht zu unerwarteten Navigationen, wenn Nutzer nur im Web surfen: <select>
Optionen.
Zwei wichtige Messwerte für die Nutzererfahrung, die von JavaScript verarbeitet werden müssen: „select“
geändert und daran arbeiten, das Auslösen von <select>
Änderungsereignissen zu verhindern.
Das Verhindern von eifrigem Ereignis ist aufgrund der Verwendung eines <select>
erforderlich
-Elements. Unter Windows Edge und wahrscheinlich auch in anderen Browsern wählen Sie changed
wird ausgelöst, wenn der Nutzer über die Tastatur in den Optionen blättert. Aus diesem Grund
als „eager“ bezeichnet, da der Nutzer die Option nur per Pseudo
oder Fokus hat, aber die Auswahl mit enter
oder click
noch nicht bestätigt wurde. Eifrig
wird diese Funktion zum Ändern der Komponentenkategorie nicht zugänglich,
Wenn Sie das Auswahlfeld öffnen und einfach nach einem Element suchen, wird das Ereignis ausgelöst und
um die Seite zu ändern, bevor die Nutzenden bereit sind.
Ein besserer geänderter Termin für <select>
const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])
// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
let ignoreChange = false
nav.addEventListener('change', e => {
if (ignoreChange) return
// it's actually changed!
})
nav.addEventListener('keydown', ({ key }) => {
if (preventedKeys.has(key))
ignoreChange = true
else if (allowedKeys.has(key))
ignoreChange = false
})
})
Dabei wird versucht, bei jedem <select>
auf Keyboard-down-Ereignisse zu achten.
und ermitteln, ob die gedrückte Taste die Navigationsbestätigung war (Tab
oder
Enter
) oder räumliche Navigation (ArrowUp
oder ArrowDown
). Damit
kann die Komponente entscheiden, ob sie abwarten oder gehen möchte, wenn das Ereignis
<select>
-Element wird ausgelöst.
Fazit
Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du... ‽ 🙂
Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstelle eine Demo, twittere mir Links und ich füge sie hinzu im Abschnitt „Community-Remixe“ weiter unten.
Community-Remixe
- Tux Solbakk als Webkomponente: Demo und Code