ü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="http://www.miracleart.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="http://www.miracleart.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 http://www.miracleart.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="http://www.miracleart.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 http://www.miracleart.cn/link/8248f16fa738b0bfe6013edf69d873bf -Element auf der Seite überspringt.

<div>
  überspringen Sie zu <a href="http://www.miracleart.cn/link/3292c5c2ca71351a9406a9614e147ad3">Inhalten</a> oder <a href="http://www.miracleart.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!