So erstellen Sie einen Link 'zum Inhalt überspringen'

Überspringen von Links sind kleine interne Navigationslinks, die den Benutzern helfen, sich zwischen den Seiten zu bewegen. Möglicherweise sehen Sie es nie wirklich, weil sie oft versteckt sind und als Barrierefreiheitsverbesserungen verwendet werden, mit denen Tastaturbenutzer und Bildschirmleser von oben auf der Seite zu Inhalten springen können, ohne zuerst andere Elemente auf der Seite durchqueren zu müssen.

Wenn Sie Devtools öffnen, finden Sie einen auf CSS-Tricks.

Meiner Meinung nach ist der beste Weg, um einen Link zu überspringen, es zu verbergen und dann zu zeigen, wenn es den Fokus wird. Nehmen wir also an, wir haben einen Link in HTML:

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  Überspringen Sie zu Inhalten</a>

… Wir können ihm absolute Position geben und es vom Bildschirm weg bewegen:

 .Skip-to-Content-Link {
  Links: 50%;
  Position: absolut;
  Transformation: Translatey (-100%);
}

Wenn es dann in den Fokus wird, können wir es erneut dissplayieren und im Prozess irgendwie stylen:

 .Skip-to-Content-Link {
  Hintergrund: #e77e23;
  Höhe: 30px;
  Links: 50%;
  Polsterung: 8px;
  Position: absolut;
  Transformation: Translatey (-100%);
  Übergang: 0,3s transformieren;
}

.Skip-to-Content-Link: Focus {
  Transformation: Translatey (0%);
}

Dadurch wird unser Link verbergt, bis er den Fokus nimmt und ihn dann anzeigt, wenn es den Fokus erhält.

Lassen Sie mich nun ausführlich erklären, beginnend mit diesem berühmten Zitat von Miles Davis:

Zeit ist nicht der Hauptfaktor, sondern der einzige Faktor .

Als ich dies in Irland im Regen schrieb, dachte ich an die Herausforderungen, denen viele Benutzer bei der Verwendung des Netzwerks, an das ich gewöhnt war, gegenüberstand. Wir haben uns viel Mühe gegeben, eine großartige Benutzererfahrung zu schaffen, ohne alle Benutzer zu berücksichtigen und wie sie ihre Bedürfnisse erfüllen können. Zugegeben, ich habe noch nie von Überspringen von Links gehört, bevor ich meinen Marcy Sutton -Kurs bei Frontend Masters beendet habe. Seit ich über die Kraft und Einfachheit der Verwendung von Skip-Links gelernt habe, entschied ich mich, es zu meiner Mission zu machen, das Bewusstsein zu schärfen-welche anderen Plattformen sind besser als CSS-Tricks!

Die Lösung lautet die Antwort auf die Frage. Was ist also die Lösung, mit der Tastaturbenutzer und Bildschirmleser schnell den Inhalt der Seite finden können? Kurz gesagt, die Lösung ist Zeit . Ermöglichen Sie den Benutzern, zu dem Teil der Website zu navigieren, an dem sie am meisten interessiert sind, und ermöglichen ihnen, wertvolle Zeit zu sparen.

Nehmen Sie als Beispiel die Sky News -Website. Es bietet eine Schaltfläche "zum Inhalt überspringen", mit der Benutzer alle Navigationselemente überspringen und direkt zum Hauptinhalt springen können.

Mit der Tastatur können Sie zum oberen Rand der Seite navigieren, um diese Schaltfläche anzuzeigen. Dies ähnelt der oben gezeigten Implementierung. Der Link befindet sich immer im Dokument, ist aber nur sichtbar, wenn er sich in den Fokus befindet.

Dies ist die Art von Skip -Links, die wir in diesem Artikel gemeinsam erstellen werden.

Unsere Beispielwebsite

Ich habe eine Beispiel -Website erstellt, mit der wir überspringen werden.

Die Website hat viele Navigationslinks, aber um Zeit zu sparen, gibt es nur zwei Seiten: "Home" und "Blog -Seite". Dies reicht aus, um uns eine Vorstellung davon zu geben, wie die Dinge funktionieren.

Bestimmen Sie das Problem

Hier ist die Navigation, die wir verwenden:

Insgesamt gibt es acht Navigationselemente, und Tastaturbenutzer und Bildschirmleser müssen diese Elemente zuerst durchqueren, um den Hauptinhalt unterhalb der Navigation zu erreichen.

Das ist das Problem. Die Navigation ist für den Benutzer möglicherweise keine Rolle. Vielleicht erhalten Benutzer direkte Links zu Artikeln und möchten nur auf den Inhalt zugreifen.

Dies ist ein perfekter Anwendungsfall, um Skip -Links zu verwenden.

Erstellen Sie einen Link

Es gibt verschiedene Möglichkeiten, einen "Übersprung zum Inhaltslink überspringen" zu erstellen. Was ich gerne tue, ist ein ähnliches Beispiel wie Sky News, d. H. Verstecke den Link, bis er den Fokus wird. Dies bedeutet<header></header> Im Element.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Überspringen Sie zu Inhalten</a>

Dieser Link hat eine .Skip-Link-Klasse, damit wir ihn stylen können. href -Attribut zeigt auf https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3 , was wir am Ende der Seite hinzufügen werden.<main></main> Die ID des Elements. Hier springt der Link, zu dem angeklickt wird.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Überspringen Sie zu Inhalten</a>

<main></main>

Wenn wir den Link nur ohne den Stil in den Titel setzen, haben wir das, was wir haben.

Das sieht nicht gut aus, aber die Funktionalität existiert. Versuchen Sie, mit der Tastatur zum Link zum Link zu navigieren, und drücken Sie die Eingabetaste, wenn sie den Fokus gewinnt.

Jetzt ist es Zeit, es schön aussehen zu lassen. Wir müssen die Positionierung zuerst reparieren und nur anzeigen, wenn unser Skip -Link den Fokus erhält.

 .skip-link {
  Hintergrund: #319795;
  Farbe: #ffff;
  Schriftgewicht: 700;
  Links: 50%;
  Polsterung: 4px;
  Position: absolut;
  Transformation: Translatey (-100%);
}

.skip-link: fokus {
  Transformation: Translatey (0%);
}

Die Magie hier liegt in der transform , die sie versteckt und zeigt, ob unser Skip -Link den Fokus erhält oder nicht. Lassen Sie es uns ein wenig besser aussehen, indem wir es schnell auf der transform Eigenschaft umwandeln.

 .skip-link {
  /* Wie früher*/
  Übergang: 0,3s transformieren;
}

Es wird nun in die Aussicht konvertieren, was es ein bisschen besser macht.

Sie sollten jetzt (hoffentlich) das haben, was ich unten habe:

Wie Sie sehen können, überspringen Sie den Link um die Navigation und springen Sie direkt zum Link<main></main> Element.

Es ist in Ordnung, mehrere Links zu verwenden!

Derzeit dient dieser Link nur einen Zweck, der Inhalte auf unsere Website überspringen soll. Aber wir müssen dort nicht aufhören.

Wir können noch einen Schritt weiter gehen und einen Link überspringen mit weiteren Optionen erstellen, z. B. einen Weg, um zur Website -Fußzeile zu springen. Wie Sie sich vorstellen können, ist dies sehr ähnlich zu dem, was wir getan haben.

Lassen Sie uns die Blog -Seite der Beispiel -Website mithilfe mehrerer Links überspringen zu verwenden. Blogs verwenden normalerweise AJAX, und weitere Beiträge werden geladen, wenn sie den Ende der Seite erreichen. Dies macht es schwierig, die Fußzeile der Website zu erreichen. Dies ist das Problem, das wir lösen wollen.

Fügen wir also einen zweiten Link hinzu, der das gesamte Autoloading -Geschäft umgeht und den Benutzer direkt in die https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf -Element auf der Seite überspringt.

<div>
  Überspringen Sie zu <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Inhalten</a> oder <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">Fußzeile</a>
</div>

Wir müssen auch unser CSS ein wenig ändern und :focus-within -Pseudo-Selectrektrie verwenden.

 .skip-link {
  Transformation: Translatey (-100%);
}

.skip-link: fokuswithin {
  Transformation: Translatey (0%);
}

Dies bedeutet, dass wir es anzeigen werden, wenn überhaupt in unserem .skip-link -Element in den Fokus wird. Leider unterstützt weder Internet Explorer noch Opera Mini focus-within , aber es hat eine sehr gute Abdeckung und kann Polyfill verwenden.

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Das Letzte, was wir tun müssen, ist sicherzustellen, dass wir eine ID auf unserem Fußzeilenelement haben, damit der Link etwas zum Springen hat.

<footer id="footer"></footer>

Das bringt uns das zu uns:

Wenn wir noch einen Schritt weiter gehen möchten (ich ermutige das), können wir jeden Link unterschiedlich stylen, damit der Benutzer zwischen beiden unterscheiden kann. Beide Links in diesem Beispiel sind reines Weiß, was für einen einzelnen Taste sehr effektiv ist, der eine einzelne Operation ausführt, aber es macht deutlicher, dass wir uns mit beiden Links befassen, wenn sie anders gerendert werden.

Überspringen Sie zum Schluss

Verwenden Sie Links auf Ihrer Website überspringen? Oder überzeugt Sie dies, einen zu verwenden? Ich hoffe, es ist klar, dass das Überspringen von Links ein hervorragender Mehrwert für die Zugänglichkeit der Website ist. Es ist zwar kein Allheilmittel, um alle Probleme mit der Barrierefreiheit zu lösen, aber es löst einige Anwendungsfälle und erzeugt so eine umfassendere Benutzererfahrung.

Hier sind einige bekannte Websites, die diese Technologie oder ähnliche Technologien verwenden:

• Amazonas
• Chase Bank
• Google (nicht überspringen Links, aber Links, die Barrierefreiheit Feedback bieten)
• Ziel
• New York Times
• Zillow

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Link 'zum Inhalt überspringen'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!