Cara membuat pautan 'langkau ke kandungan'

Langkau pautan adalah pautan navigasi dalaman kecil yang membantu pengguna bergerak di antara halaman. Anda mungkin tidak pernah melihatnya kerana mereka sering tersembunyi, digunakan sebagai peningkatan aksesibiliti yang membolehkan pengguna papan kekunci dan pembaca skrin melompat dari bahagian atas halaman ke kandungan tanpa perlu melintasi unsur -unsur lain pada halaman terlebih dahulu.

Malah, jika anda membuka DevTools, anda boleh mencari satu di CSS-Tricks.

Pada pendapat saya, cara terbaik untuk melaksanakan melangkau pautan adalah untuk menyembunyikannya dan kemudian menunjukkannya apabila ia menjadi tumpuan. Jadi, katakan kita mempunyai pautan dalam HTML:

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  Langkau ke kandungan</a>

... Kita boleh memberikan kedudukan mutlak dan memindahkannya dari skrin:

 .skip-to-content-link {
  Kiri: 50%;
  Kedudukan: Mutlak;
  Transform: Translatey (-100%);
}

Kemudian apabila ia menjadi tumpuan, kita boleh memaparkan semula dan menggayakannya dalam proses:

 .skip-to-content-link {
  Latar Belakang: #E77E23;
  Ketinggian: 30px;
  Kiri: 50%;
  Padding: 8px;
  Kedudukan: Mutlak;
  Transform: Translatey (-100%);
  Peralihan: Mengubah 0.3s;
}

.skip-to-content-link: fokus {
  Transform: Translate (0%);
}

Ini akan menyembunyikan pautan kami sehingga ia menjadi tumpuan dan kemudian memaparkannya apabila ia menjadi tumpuan.

Sekarang, beritahu saya secara terperinci, bermula dengan petikan terkenal ini dari Miles Davis:

Masa bukan faktor utama, ia adalah satu -satunya faktor .

Ketika saya menulis ini di Ireland dalam hujan, saya fikir cabaran -cabaran yang dihadapi oleh banyak pengguna ketika menggunakan rangkaian yang saya gunakan. Kami meletakkan banyak usaha untuk mewujudkan pengalaman pengguna yang hebat tanpa mengambil kira semua pengguna dan bagaimana mereka dapat memenuhi keperluan mereka. Diberikan, saya tidak pernah mendengar tentang melangkau pautan sebelum saya menamatkan kursus Marcy Sutton di Frontend Masters. Sejak belajar tentang kuasa dan kesederhanaan menggunakan pautan Skip, saya memutuskan untuk menjadikan misi saya untuk meningkatkan kesedaran-platform lain yang lebih baik daripada trik CSS!

Penyelesaiannya adalah jawapan kepada soalan, jadi apakah penyelesaian untuk membantu pengguna keyboard dan pembaca skrin mencari kandungan halaman dengan cepat? Singkatnya, penyelesaiannya adalah masa . Dayakan pengguna untuk menavigasi ke bahagian laman web yang mereka paling berminat, membolehkan mereka menjimatkan masa yang berharga.

Ambil laman web Sky News sebagai contoh. Ia menyediakan butang "Skip to Content" yang membolehkan pengguna melangkau semua item navigasi dan melompat terus ke kandungan utama.

Anda boleh menggunakan papan kekunci untuk menavigasi ke bahagian atas halaman untuk melihat butang ini. Ini sama dengan pelaksanaan yang ditunjukkan di atas. Pautan sentiasa dalam dokumen, tetapi hanya dapat dilihat apabila ia mendapat tumpuan.

Ini adalah jenis pautan skip yang akan kita buat bersama dalam artikel ini.

Laman web sampel kami

Saya membina laman web sampel yang akan kami gunakan untuk menunjukkan pautan skip.

Laman ini mempunyai banyak pautan navigasi, tetapi untuk menjimatkan masa, hanya terdapat dua muka surat: "Home" dan "Blog Page". Ini cukup untuk memberi kita idea bagaimana keadaan berfungsi.

Tentukan masalahnya

Inilah navigasi yang kami gunakan:

Terdapat lapan item navigasi secara keseluruhan, dan pengguna papan kekunci dan pembaca skrin mesti terlebih dahulu melintasi item ini untuk mencapai kandungan utama di bawah navigasi.

Ini masalahnya. Navigasi mungkin tidak penting kepada pengguna. Mungkin pengguna mendapat pautan langsung ke artikel dan mereka hanya mahu mengakses kandungannya.

Ini adalah kes penggunaan yang sempurna untuk menggunakan pautan skip.

Buat pautan

Terdapat beberapa cara untuk membuat pautan "langkau ke kandungan". Apa yang saya suka lakukan adalah contoh yang sama dengan Sky News, iaitu menyembunyikan pautan sehingga ia menjadi tumpuan. Ini bermakna kita boleh meletakkan pautan di atau berhampiran bahagian atas halaman, sebagai contoh<header></header> Di dalam elemen.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Langkau ke kandungan</a>

Pautan ini mempunyai kelas .skip-link supaya kita dapat menggayakannya. Atribut href menunjuk ke https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3 , yang akan kami tambahkan ke bahagian bawah halaman.<main></main> ID elemen. Di sinilah pautan akan melompat ke apabila diklik.

 <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Langkau ke kandungan</a>

<main></main>

Jika kita hanya meletakkan pautan dalam tajuk tanpa gaya, inilah yang kita ada.

Ini tidak kelihatan hebat, tetapi fungsi itu wujud. Cuba menavigasi ke pautan menggunakan papan kekunci dan tekan Enter apabila ia mendapat tumpuan.

Kini tiba masanya untuk menjadikannya kelihatan cantik. Kami perlu menetapkan kedudukan terlebih dahulu dan menunjukkannya hanya jika pautan skip kami mendapat tumpuan.

 .skip-link {
  Latar Belakang: #319795;
  Warna: #ffff;
  Font-Weight: 700;
  Kiri: 50%;
  Padding: 4px;
  Kedudukan: Mutlak;
  Transform: Translatey (-100%);
}

.skip-link: fokus {
  Transform: Translate (0%);
}

Keajaiban di sini terletak pada harta transform , yang menyembunyikan dan memaparkannya berdasarkan sama ada pautan skip kami mendapat tumpuan atau tidak. Mari kita kelihatan sedikit lebih baik dengan cepat menukarnya pada harta transform .

 .skip-link {
  /* Sama seperti sebelum*/
  Peralihan: Mengubah 0.3s;
}

Ia kini akan ditukar kepada pandangan, yang menjadikannya lebih baik.

Anda harus sekarang (mudah -mudahan) mempunyai apa yang saya ada di bawah:

Seperti yang anda dapat lihat, langkau pautan memintas navigasi dan melompat terus ke<main></main> elemen.

Adalah baik untuk menggunakan pelbagai pautan!

Pada masa ini, pautan ini hanya berfungsi satu tujuan, iaitu untuk melangkau kandungan ke laman web kami. Tetapi kita tidak perlu berhenti di sana.

Kita boleh melangkah lebih jauh dan membuat pautan langkau dengan lebih banyak pilihan, seperti cara untuk melompat ke tapak kaki laman web. Seperti yang anda bayangkan, ini sangat mirip dengan apa yang telah kami lakukan.

Mari buat halaman blog laman web sampel lebih mudah digunakan dengan menggunakan pelbagai pautan skip. Blog biasanya menggunakan Ajax, dan lebih banyak jawatan dimuatkan apabila mereka sampai ke bahagian bawah halaman. Ini menjadikannya sukar untuk mencapai footer laman web. Inilah masalah yang ingin kita selesaikan.

Oleh itu, mari tambahkan pautan kedua yang memintas semua perniagaan autoloading dan melompat pengguna terus ke https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf elemen pada halaman.

<div>
  Langkau ke <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">kandungan</a> atau <a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">kaki</a>
</div>

Kami juga perlu mengubah suai CSS kami sedikit dan menggunakan :focus-within pseudo-selectr.

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

.skip-link: fokus-fokus {
  Transform: Translate (0%);
}

Ini bermakna bahawa jika ada di dalam elemen .skip-link kami mendapat tumpuan, maka kami akan memaparkannya. Malangnya, Internet Explorer mahupun Opera Mini menyokong focus-within , tetapi ia mempunyai liputan yang sangat baik dan boleh menggunakan polyfill.

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Perkara terakhir yang perlu kita lakukan ialah memastikan bahawa kita mempunyai ID pada elemen footer kita supaya pautan mempunyai sesuatu untuk melompat.

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

Inilah yang membawa kepada kami:

Jika kita mahu melangkah lebih jauh (saya menggalakkan ini), kita boleh gaya setiap pautan secara berbeza supaya pengguna dapat membezakan antara kedua -duanya. Kedua -dua pautan dalam contoh ini adalah putih tulen, yang sangat berkesan untuk satu butang yang melakukan operasi tunggal, tetapi menjadikannya lebih jelas bahawa kita berurusan dengan kedua -dua pautan jika mereka diberikan secara berbeza.

Langkau ke kesimpulan

Adakah anda menggunakan pautan skip di laman web anda? Atau, jika tidak, adakah ini meyakinkan anda untuk menggunakannya? Saya harap jelas bahawa melangkau pautan adalah nilai tambah yang sangat baik ketika datang ke kebolehcapaian laman web. Walaupun ia bukan ubat untuk menyelesaikan semua isu kebolehaksesan, ia menyelesaikan beberapa kes penggunaan, dengan itu mewujudkan pengalaman pengguna yang lebih lengkap.

Berikut adalah beberapa laman web terkenal yang menggunakan teknologi ini atau teknologi yang serupa:

• Amazon
• Chase Bank
• Google (tidak melangkau pautan, tetapi pautan yang memberikan maklum balas kebolehaksesan)
• Sasaran
• New York Times
• Zillow

Atas ialah kandungan terperinci Cara membuat pautan 'langkau ke kandungan'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!