Menyelam yang mendalam untuk melangkaui kandungan-tutorial css-php.cn

Menyelam yang mendalam untuk melangkau kandungan

Ramai pengguna komputer menggunakan tetikus mereka untuk melayari laman web, tetapi ramai orang bergantung pada operasi papan kekunci. Secara teorinya, menggunakan papan kekunci untuk melayari laman web tidak ada masalah - tekan kekunci Tab untuk bergerak di antara unsur -unsur yang difokuskan, dan kemudian tekan kekunci Enter untuk mengaktifkannya, mudah dan mudah dilakukan! Walau bagaimanapun, banyak (jika tidak kebanyakan) laman web mempunyai menu pautan di bahagian atas, dan kadang -kadang beberapa tekanan utama diperlukan untuk mencapai kandungan sasaran. Sebagai contoh, salah satu laman berita terbesar di Switzerland, laman utama 20 minit, mungkin memerlukan hampir 40 penekan utama untuk membaca tajuk utama - ini bukan pengalaman pengguna yang terbaik.

Oleh itu, agar pengguna papan kekunci benar -benar menggunakan laman web anda dan bukannya bosan dan meninggalkan, anda perlu melakukan kerja di belakang tabir untuk menjadikannya lebih cepat dan lebih mudah untuk melompat terus ke kandungan utama. Anda boleh menemui pelbagai helah yang bertaburan di seluruh web (termasuk dalam trik CSS), tetapi kebanyakannya mengabaikan beberapa helah, dan banyak yang mengesyorkan menggunakan kod yang sudah lapuk atau tidak ditetapkan. Oleh itu, dalam artikel ini, saya akan menyelam kandungan dan menutup segala -galanya dengan cara yang mesra 2021.

Dua jenis pengguna keyboard

Walaupun orang menggunakan pelbagai jenis papan kekunci atau suis setara untuk navigasi, dari perspektif pengekodan, kita hanya perlu mempertimbangkan dua set pengguna:

Pengguna yang menggunakan papan kekunci untuk membaca kandungan skrin bersempena pembaca skrin seperti NVDA atau Jaws pada PC, atau Voiceover pada Mac. Peranti ini biasanya digunakan oleh orang yang mengalami gangguan visual yang teruk.
Semua pengguna papan kekunci yang lain.

Teknologi Kandungan Skip kami perlu memenuhi keperluan kedua -dua kumpulan pengguna pada masa yang sama tanpa menghalang pengguna tetikus. Kami akan menggunakan dua teknik pelengkap untuk mendapatkan hasil yang terbaik: mercu tanda dan melangkau pautan .

Lihat contoh asas

Saya mencipta laman web sampel yang dipanggil Gaya Magic untuk menggambarkan teknologi yang akan kami tutupi. Kami akan bermula dengan keadaan kerja yang baik untuk pengguna tetikus, tetapi ia adalah sedikit kerumitan untuk pengguna yang menggunakan papan kekunci. Anda boleh mencari laman web asas pada codepen serta versi setiap teknologi, dan sejak menguji navigasi papan kekunci pada codepen agak rumit, anda boleh mencari versi mandiri di sini juga.

Cuba menavigasi contoh ini menggunakan kekunci Tab . (Lebih mudah pada halaman yang berdiri sendiri; Tab kunci bergerak di antara pautan, kunci Tab Shift bergerak ke belakang.) Anda akan mendapati ia tidak buruk, tetapi hanya kerana tidak banyak item menu.

Jika anda mempunyai masa dan menggunakan sistem Windows, saya juga mengesyorkan anda memuat turun salinan percuma pembaca skrin NVDA dan cuba semua contoh dengannya dan rujuk gambaran keseluruhan Webaim untuk menggunakannya. Kebanyakan pengguna MAC sudah mempunyai akses kepada pembaca skrin suara, dan Webaim mempunyai pengenalan yang hebat untuk menggunakannya.

Tambah mercu tanda

Satu perkara yang boleh dilakukan oleh perisian bacaan skrin ialah memaparkan senarai mercu tanda yang mereka dapati di laman web. Tanda -tanda mewakili kawasan penting di halaman, dan pengguna boleh memanggil senarai dan melompat terus ke salah satu mercu tanda.

Jika anda menggunakan NVDA dengan papan kekunci penuh, tekan INS F7 untuk membawa "senarai elemen" dan tekan alt d untuk memaparkan mercu tanda. (Anda boleh mencari senarai yang sama pada Voiceover menggunakan Rotor Projek Web.) Walau bagaimanapun, jika anda melakukan ini di tapak sampel, anda hanya akan melihat senarai kosong yang tidak berguna.

Mari selesaikan masalah ini terlebih dahulu.

Menambah mercu tanda sangat mudah , jika anda menggunakan HTML5, anda mungkin menggunakannya di laman web anda tanpa menyedari bahawa kerana ia secara langsung dikaitkan dengan elemen semantik HTML5 (<h1></h1> tiba<h6></h6> ,<main></main> , dll).

Berikut adalah contoh pengubahsuaian sebelum dan selepas HTML digunakan untuk menghasilkan bahagian tajuk tapak:

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Magic gaya</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rumah</a>

      </div>
  </div>
</div>

Salin selepas log masuk

Menjadi

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Magic gaya</a><nav aria-label="Main menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rumah</a>

    </nav></header>

Salin selepas log masuk

Kelas yang digunakan tetap sama, jadi kita tidak perlu membuat apa -apa perubahan kepada CSS.

Berikut adalah senarai lengkap perubahan yang perlu kita buat di laman sampel:

Tajuknya ditunjukkan di bahagian atas halaman<div> Sekarang ini<code><header></header> elemen.
Jenama termasuk<div> Sekarang ini<code><header></header> elemen.
Dua menu<div> Telah<code><nav></nav> Penggantian elemen.
Dua yang baru<nav></nav> Unsur-unsur telah memperoleh atribut aria-label yang menggambarkannya: menu di bahagian atas halaman adalah "menu utama" dan menu di bahagian bawah halaman adalah "menu utiliti".
Mengandungi kandungan utama halaman Sekarang ini<main></main> elemen.
Mewakili kaki di bahagian bawah halaman<div> Sekarang ini<code><footer></footer> elemen. Anda boleh melihat HTML yang dikemas kini penuh pada Codepen. Mari kita cuba lagi trik senarai mercu tanda di NVDA ( INS F7 dan kemudian Alt D - ini adalah pautan ke halaman mandiri yang boleh anda uji sendiri): Luar Biasa! Kami kini mempunyai Landmark Banner (peta ke<header></header> Elemen), menu utama;<nav></nav> elemen dan paparkan aria-label kami), kandungan utama (peta ke<main></main> ) dan maklumat kandungan (peta ke<footer></footer> ). Dalam dialog ini, saya boleh menggunakan kekunci Tab dan kekunci kursor untuk memilih mercu tanda utama dan melompat terus ke kandungan halaman, atau lebih baik lagi, saya boleh menekan D Key sambil melayari halaman untuk melompat terus dari satu watak mercu tanda ke seterusnya. Lebih mudah bagi pengguna pembaca skrin rahang - mereka hanya menekan kekunci Q sambil melayari untuk melompat terus ke mercu tanda utama. Sebagai manfaat tambahan, menggunakan elemen semantik juga boleh membantu enjin carian lebih memahami dan mengindeks kandungan anda. Ini adalah tambahan yang bagus untuk menjadikan laman web lebih mudah diakses. Tambahkan pautan skip Saya harap anda duduk di sana pada masa ini memikirkan "kerja itu selesai." Nah, saya takut selalu ada "tetapi" untuk dipertimbangkan. Kembali pada tahun 2011, Google menjalankan kajian untuk mencari di laman web menggunakan Ctrl F dan mendapati bahawa 90% orang yang mengagumkan sama ada tidak tahu ia wujud atau tidak pernah menggunakannya. Ketika datang ke mercu tanda, pengguna yang menggunakan pembaca skrin berkelakuan kira -kira sama -peratusan besar dari mereka tidak menggunakan ciri ini sama sekali, walaupun ia sangat berguna. Oleh itu, kami akan menambah pautan SKIP ke laman web kami untuk membantu kedua -dua kumpulan pengguna dan semua pengguna papan kekunci yang tidak menggunakan pembaca skrin. Keperluan asas untuk melangkau pautan yang baik adalah: Ia harus dilihat oleh semua pengguna papan kekunci, termasuk pengguna pembaca skrin, apabila diperlukan. Ia harus menyediakan pengguna keyboard dengan maklumat yang cukup untuk menerangkan peranannya. Ia harus berjalan pada penyemak imbas semasa yang paling luas. Ia tidak boleh mengganggu penyemakan overing pengguna tetikus. Langkah 1: Meningkatkan penampilan fokus papan kekunci Pertama, kami akan meningkatkan keterlihatan fokus papan kekunci di seluruh laman web. Anda boleh memikirkan fokus papan kekunci sebagai setara dengan kedudukan kursor apabila mengedit teks dalam pemproses perkataan. Apabila anda menggunakan kekunci tab untuk menavigasi, tumpuan papan kekunci bergerak antara pautan (atau kawalan bentuk). Pelayar web terkini melakukan kerja yang cukup baik untuk menunjukkan di mana fokus papan kekunci, tetapi masih boleh mendapat manfaat daripada bantuan. Terdapat banyak cara kreatif untuk gaya cincin fokus, walaupun matlamat kami adalah untuk menjadikannya lebih daripada apa -apa. Kita boleh menggunakan :focus pseudo -kelas untuk tetapan gaya (dan lebih baik untuk menggunakan gaya yang sama untuk :hover juga, yang telah kita lakukan di tapak sampel - codepen, tapak langsung). Inilah yang kita boleh sekurang -kurangnya lakukan, walaupun ia biasanya akan melangkah lebih jauh dan membalikkan warna pautan pada :focus pada keseluruhan halaman. Berikut adalah beberapa CSS untuk kami :focus Negeri (satu salinan kod yang telah kami sediakan :hover ): A: Fokus { /* Peraturan Umum untuk keseluruhan halaman* / Border-Bottom-Color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } .Menu-kanan A: Fokus, .Branding A: Fokus { /* Membalikkan warna pautan dalam tajuk dan footer*/ latar belakang warna: putih; Warna: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } Salin selepas log masuk Langkah 2: Tambahkan HTML dan CSS Perubahan akhir adalah untuk menambah pautan yang dilangkau ke HTML dan CSS. Ia terdiri daripada dua bahagian: pencetus (pautan) dan sasaran (mercu tanda). Ini adalah HTML yang saya cadangkan untuk pencetus, ia adalah permulaan halaman<header></header> Di dalam elemen: <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">Langkau ke kandungan utama.</a> Salin selepas log masuk Ini adalah HTML dari sasaran, yang diletakkan terus<main></main> Sebelum permulaan kandungan: <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">Permulaan kandungan utama.</a> <main></main> Salin selepas log masuk Inilah cara kerja HTML: Skip Link Contactor menggunakan fragmen halaman standard (href = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c705c70e15bskip-link-target"<a></a> ) atribut id. Berikutan pautan itu akan menggerakkan fokus papan kekunci dari pencetus ke sasaran. Kami menghubungkan ke sauh (<a></a> ) elemen, tidak langsung ke<main></main> Terdapat dua sebab mengapa elemen menambah atribut ID. Pertama, ia mengelakkan sebarang masalah bahawa tumpuan papan kekunci tidak dapat bergerak dengan betul (yang mungkin menjadi masalah dalam beberapa pelayar); Teks kedua -dua pautan adalah deskriptif untuk menjelaskan dengan jelas apa yang sedang berlaku kepada pengguna. Kami kini mempunyai pautan skip berfungsi, tetapi ada masalah: semua orang dapat melihatnya. Kami akan menggunakan CSS untuk menyembunyikannya secara lalai, yang boleh menjadikannya tidak menghalang pengguna tetikus dan kemudian ia hanya akan muncul apabila ia menerima fokus papan kekunci. Terdapat banyak cara untuk melakukan ini, kebanyakan mereka lakukan, tetapi ada beberapa cara yang salah yang harus anda elakkan: Harus: Gunakan clip-path untuk membuat pautan tidak kelihatan, atau gunakan transform: translate atau position: absolute untuk meletakkannya di luar skrin. Tidak boleh: Gunakan display: none , visibility: hidden , Atribut hidden , atau Tetapkan Lebar atau Ketinggian Pautan Skipped ke Zero. Semua ini akan menjadikan pautan skip anda tidak tersedia kepada satu atau kedua -dua jenis pengguna keyboard. Tidak boleh: Gunakan clip kerana ia tidak ditetapkan. Berikut adalah kod yang saya cadangkan untuk menyembunyikan kedua -dua pautan ini. Versi -webkit- menggunakan clip-path dan awalannya boleh meliputi 96.84% pengguna pada masa penulisan, yang (pada pendapat saya) adalah OK untuk kebanyakan laman web dan menggunakan kes. Terdapat banyak teknologi lain yang tersedia jika kes penggunaan anda memerlukannya, yang terperinci di Webaim. .Text-Assistive { -WebKit-Clip-Path: Polygon (0 0, 0 0, 0 0, 0 0); Clip-Path: Polygon (0 0, 0 0, 0 0, 0 0); saiz kotak: kotak sempadan; Kedudukan: Mutlak; Margin: 0; Padding: 0; } Salin selepas log masuk Untuk memaparkan pautan apabila mereka mendapat tumpuan, saya cadangkan menggunakan versi, warna dan saiz CSS ini untuk memadankan jenama anda: .text-sistive.display-at-top-on-focus { Atas: 0; Kiri: 0; Lebar: 100%; } .Text- Assistive.Display-at-Top-on-focus: Focus { -WebKit-Clip-Path: Tiada; Clip-Path: Tiada; Z-indeks: 999; Ketinggian: 80px; ketinggian garis: 80px; Latar Belakang: Putih; saiz font: 1.2rem; Teks-penyerapan: Tiada; Warna: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; Teks-Align: Pusat; } https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target:focus { Latar Belakang: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b084367; Warna: Putih; } Salin selepas log masuk Ini memberikan paparan pencetus dan sasaran yang sangat jelas di bahagian atas halaman, di mana pengguna mengharapkan untuk melihat fokus papan kekunci terus selepas halaman dimuatkan. Apabila anda mengikuti pautan, warna juga diubah untuk memberikan maklum balas yang jelas bahawa sesuatu telah berlaku. Anda boleh mengubah suai kod sendiri pada CodePen (seperti yang ditunjukkan di bawah) dan mengujinya dengan NVDA pada halaman mandiri. Penambahbaikan selanjutnya Langkau pautan bukan hanya untuk Krismas menu utama anda, mereka berguna apabila halaman anda mengandungi senarai panjang pautan. Malah, codepen ini menunjukkan cara yang baik untuk menggunakan pautan skip dalam kandungan halaman (di sini adalah halaman mandiri), menggunakan transform: translateY() dalam CSS untuk menyembunyikan dan memaparkan pencetus dan sasaran. Jika anda berada dalam kedudukan "bertuah" yang perlu menyokong pelayar yang lebih tua, inilah tip untuk ini (halaman bebas di sini). Mari kita periksa! Akhirnya, berikut adalah beberapa demonstrasi video pendek tentang bagaimana pautan melangkau berfungsi untuk dua kategori pengguna keyboard kami. Inilah cara langkau pautan dilakukan semasa menggunakan pembaca skrin NVDA: (video harus dibenamkan di sini) Inilah yang berlaku apabila anda menggunakan papan kekunci untuk melayari lagi tanpa memerlukan pembaca skrin: (video harus dibenamkan di sini) Kami hanya melihat pendekatan moden yang saya fikir untuk mengakses pautan skip pada tahun 2021. Kami meminjam beberapa idea dari contoh yang lalu semasa mengemas kini mereka untuk memenuhi amalan CSS yang lebih baik, meningkatkan UI pengguna keyboard, dan meningkatkan pengalaman pengguna menggunakan pembaca skrin (terima kasih kepada pendekatan HTML yang dikemas kini).