Dalam memuji menu klik yang tidak jelas

Adakah anda masih ingat kegembiraan apabila anda mula -mula membina submenu yang dicetuskan dengan CSS tulen? (Itu mungkin selepas membaca artikel ini dalam senarai selain pada tahun 2003.) Pada masa itu, ini adalah helah CSS sebenar. Sejujurnya, itu adalah era gila .

Mungkin seperti ini:

<code></code>

• Halaman a
  • Halaman b
  • Halaman c
  • Halaman d

 <code>/* 将子菜单相对于父列表项定位*/ .my-menu li { position: relative; } .my-menu ul { /* 默认隐藏子菜单*/ display: none; /* 打开时定位子菜单*/ position: absolute; left: 0; top: 100%; } /* 看，妈妈！不需要onclick处理程序！*/ .my-menu li:hover > ul { display: block; }</code>

Hari ini, kita boleh menggunakan teknik yang dikemas kini untuk meningkatkan kebolehcapaian menu CSS tulen! Dengan :focus-within , menu boleh dihidupkan dan dimatikan semasa menavigasi dengan papan kekunci.

 <code>/* 不支持IE11 */ .my-menu li:focus-within > ul { display: block; }</code>

Cuba gerakkan kunci tetikus dan tab dalam demo.

Tetapi sejak saya mula -mula mempelajari teknik -teknik ini, masa telah berubah dan begitu juga I. Sejak itu, saya telah membina banyak laman web dan mempelajari lebih lanjut mengenai kebolehgunaan, kebolehcapaian, dan strategi kandungan. Sekarang, saya dapati bahawa menu pencetus hover tidak mencukupi dalam semua aspek ini. Jadi, beberapa tahun yang lalu, saya berhenti membina submenu Hover Trigger dan sebaliknya menggunakan submenu pencetus klik. (Dari sini, saya akan memanggil mereka "menu hoom" dan "menu klik" masing -masing.)

Saya fikir anda harus berhenti membina menu hover juga. Saya akan memberitahu anda mengapa.

Hover menu tidak konsisten

Lihat menu sebenar di laman web yang saya bina:

Sangat mudah, bukan? Ikon anak panah menunjukkan bahawa setiap item mempunyai submenu kecuali "rumah". Walau bagaimanapun, jika submenu ini muncul pada hover, terdapat sekurang -kurangnya empat cara yang mungkin untuk menu berfungsi, dan anda mungkin mengalami empat daripadanya.

1. Item menu "Ibu bapa" di bahagian atas dihubungkan dengan satu halaman dan setiap item submenu dihubungkan ke halaman lain. Untuk contoh di atas, perkhidmatan akan menjadi halaman yang unik, dan sebagainya akan setiap pautan dalam submenu Perkhidmatan.

Tetapi sebelum saya tahu, corak kedua yang sangat biasa muncul.

2. Ibu bapa mempunyai href="#" - bahkan tidak href sama sekali? - dan satu -satunya pautan yang sah adalah dalam submenu. Dalam contoh kami, "Perkhidmatan" masih merupakan pautan, tetapi tiada apa yang berlaku apabila anda mengkliknya.

Ketidakkonsistenan ini - adalah ibu bapa yang dikaitkan atau bukan? - Apabila saya memerhatikan orang menggunakan laman web, ia menyebabkan banyak kekeliruan. Sesetengah orang melangkau halaman peringkat atas yang berguna secara langsung, dengan mengandaikan bahawa item ini bukan pautan. Lain -lain, bagaimanapun, berfikir bahawa pautan teratas adalah halaman dan cuba klik pada mereka.

Ini membawa kepada mod ketiga dan keempat yang akan anda hadapi. Saya rasa corak ini berkembang daripada cuba membuat kekeliruan yang disebabkan oleh dua tetapan pertama.

3. Ibu bapa dan item menu anak pertama dihubungkan ke halaman yang sama. Lebih buruk lagi, ibu bapa dan pautan menu anak pertama mempunyai teks pautan yang berbeza, melanggar standard akses WCAG 2.1 AA.
4. Ibu bapa menghubungkan ke halaman yang mengandungi kandungan pengisian yang tidak berguna atau hanya pautan dalam submenu. Halaman itu sendiri tidak mempunyai tujuan praktikal bagi sesiapa yang melawatnya.

Dua konfigurasi terakhir membuang masa bagi mereka yang tahu bahawa ibu bapa adalah pautan kerana ia mengandungi kandungan yang berlebihan atau tidak berguna.

Berikut adalah carta yang menunjukkan semua empat tetapan menu hover yang mungkin.

Adalah munasabah bagi pelawat untuk dikelirukan mengenai menu hover

Tidak kira bagaimana kami melaksanakan menu hover, pelawat kami mungkin ingin tahu:

1. Bolehkah saya mengklik ibu bapa?
2. Adakah pautan induk ke halaman yang sama dengan pautan submenu pertama?
3. Walaupun ibu bapa adalah pautan yang unik, adakah ia patut diperiksa?

Ini meninggalkan kita tanpa pilihan yang baik. Ia menjadikannya mustahil untuk memenuhi undang -undang Jacob tentang kebolehgunaan, iaitu, "pengguna mahu laman web anda berfungsi dengan cara yang sama seperti semua laman web lain yang mereka sudah tahu". Tiada pelaksanaan standard pada menu hover, jadi kita perlu melakukan sesuatu yang berbeza untuk memberikan pengalaman pengguna yang konsisten.

Bagaimana dengan menu "Button Split"?

Jenis menu yang paling biasa yang saya lihat mungkin direka menggunakan "butang berpecah" di mana ibu bapa adalah pautan, ikon drop-down berasingan untuk membuka dan menutup menu. Tema WordPress Lalai Dua puluh Lima Belas menggunakan mod ini. Kerana ia sangat luar biasa, saya mendapati bahawa pelawat sering mengabaikan pautan halaman atas, dan penyelidikan menunjukkan bahawa pengguna tidak berfikir tag dan ikon secara individu boleh diklik.

Jadi, apakah pilihan yang lebih baik? Klik untuk mencetuskan submenu!

Klik menu untuk menyelamatkan

Daripada bergantung pada interaksi hover atau penyelesaian "kreatif" (dan mengelirukan) yang lain, bina menu dengan butang item ibu bapa yang menunjukkan dan menyembunyikan submenu apabila diklik. Ini segera menyelesaikan masalah menu hover, kerana menu klik berfungsi dengan jelas .

• Pelawat laman web mesti mengklik ibu bapa untuk melihat menu anak mereka.
• Semua pautan dimasukkan ke dalam submenu kecuali item teratas yang tidak mempunyai submenu (seperti "rumah"). Kami akan mengendalikan halaman teratas ini kemudian.

Apabila anda memikirkannya, klik Menu sebenarnya adalah apa yang kita harapkan dalam kebanyakan situasi lain:

• Menggunakan peranti sentuh? Hovering tidak ada sesuatu.
• Gunakan menu aplikasi (mis. "Fail", "Edit", dan lain -lain)? Ini hampir tidak pernah dipaparkan pada hover!
• Gunakan apa -apa selain tetikus? Menekan kekunci ENTER atau mengaktifkan pautan dengan mana -mana jenis kawalan suis lebih seperti mengklik, dan bukannya :focus sama dengan :hover .

Terlepas dari peranti atau mod input anda, "klik" adalah cara yang lebih umum dan boleh dipercayai untuk berinteraksi. Mari kita gunakan untuk menjadikan menu laman web kami hebat!

Tukar ke menu Klik

Intuisi saya memberitahu saya bahawa banyak laman web baru -baru ini telah beralih ke menu klik. Sertailah pesta! Memandangkan semakin banyak laman web membuat perubahan, orang akan sekali lagi mengembangkan jangkaan yang mudah dan berguna mengenai "bagaimana laman web berfungsi" (dan dengan itu memenuhi undang -undang Yakub).

Apabila anda membuat perubahan ini untuk kali pertama, ia mempunyai beberapa pelawat yang mungkin masih mengharapkan menu hover. Jika anda bertanya kepada mereka, mereka mungkin mengatakan mereka lebih suka menu hover. Walau bagaimanapun, saya dapat memberitahu anda berdasarkan bagaimana orang melihat orang menggunakan menu klik yang semua orang dapat memikirkannya dan menyesuaikan diri dengan cepat.

Dan jangan hanya mendengar saya! Mod navigasi Sistem Reka Bentuk Rangkaian Amerika Syarikat (USWDS) menggunakan menu klik. Berikut adalah kenyataan mereka:

Elakkan menggunakan hover untuk mengembangkan senarai drop-down. Hovering sukar bagi sesetengah pengguna dan tidak berfungsi pada skrin sentuh. Menu lungsur perlu diperluaskan apabila diklik atau digunakan untuk menavigasi menggunakan papan kekunci.

Bootstrap juga menggunakan menu klik untuk alasan yang sama:

Ia benar -benar beralih kepada niat pengguna . Tujuan keadaan hover adalah untuk menunjukkan bahawa sesuatu yang boleh diklik (teks yang digariskan) ... Tujuan klik adalah untuk benar -benar melakukan operasi tertentu, mengambil tindakan yang jelas. Membuka menu drop-down adalah tindakan yang jelas dan hanya boleh berlaku apabila diklik.

Dari jawatan yang sama, inilah titik yang baik:

Karet dalam pautan drop-down bersamaan dengan garis bawah pautan: ia memberikan beberapa petua mengenai apa yang berlaku apabila mengklik pada elemen ini. Tetapi jangan tersilap berfikir bahawa ia memberikan maklumat yang cukup untuk muncul menu drop-down apabila melayang.

Jadi, ini bukan untuk mengatakan bahawa kita sedang meneroka kawasan yang tidak diketahui. Dan, terdapat satu lagi peringatan yang baik untuk sistem reka bentuk kerajaan UK: mungkin anda tidak memerlukan submenu sama sekali! Menu mereka hanya satu siri pautan, menggunakan grid pautan dan akordion pada halaman untuk membantu pelawat menavigasi. Heck, anda tidak akan menemui submenu pada trik CSS!

Mengklik pada menu mempunyai manfaat tambahan!

Semakin banyak anda menggunakan menu klik, semakin banyak faedah yang akan anda dapati:

• Anda boleh memutuskan sama ada anda memerlukan halaman/gambaran keseluruhan/halaman log masuk ... atau tidak! Daripada memaksa kandungan untuk memadankan struktur menu, di mana pautan adalah ibu bapa pautan lain, biarkan strategi kandungan dan seni bina maklumat anda menentukan jenis halaman yang anda perlukan dan bagaimana untuk menandai mereka. Jika gambaran keseluruhan perkhidmatan anda membantu pelawat anda, sila gunakan Gambaran Keseluruhan Perkhidmatan atau semua perkhidmatan sebagai item pertama dalam submenu Perkhidmatan.
• Submenu tetap terbuka sehingga ditutup. Terdapat cara jahat untuk melayang menu yang hilang apabila orang memindahkan kursor atau bahkan hanya cuba klik pada pautan submenu. Ini terutama berlaku untuk "terbang" dan bukannya menu kanak -kanak yang terletak di bawah ibu bapa. Kegigihan menu klik membuat pengalaman lebih "stabil", jadi pengguna mempercayai antara muka dan tidak berasa kecewa.
• Tingkah laku submenu yang berterusan lebih penting untuk menu besar. Apabila pelawat memerlukan lebih banyak masa untuk melihat kandungan submenu, mereka tidak mampu untuk secara tidak sengaja menutup menu.
• JavaScript adalah sama untuk menu mudah alih dan desktop. Sama ada menu tersembunyi di belakang hamburger atau kelihatan pada peranti mudah alih, interaksi sentiasa sama. Saya hanya perlu menukar CSS saya untuk membuat menu klik responsif.

Bina Menu Klik

Apabila saya berangkat untuk membina skrip menu klik saya sendiri, saya mendapati bahawa tidak ada satu standard untuk melakukan ini. Idea dan kod saya sendiri terutamanya dipengaruhi oleh yang berikut:

• "Navigasi Widget Pendedahan Pautan Adrian Roselli"
• "Demo Tajuk" untuk Perkhidmatan Reka Bentuk Web Amerika
• "Reka bentuk menu: senarai 15 panduan UX untuk membantu pengguna" oleh Nielsen Norman Group
• "Contoh Menu Navigasi Pendedahan" dalam Amalan Kreatif ARIA

Titik utama dalam penyelidikan saya mengenai pelaksanaan:

• Elemen yang anda klik untuk memaparkan submenu mestilah<button></button> , kerana ia tidak menghubungkan ke halaman.
• Gunakan aria-expanded (IN<button></button> ) untuk menyampaikan status terbuka dan rapat submenu.
• Gunakan display: none atau visibility: hidden supaya pengguna keyboard tidak dapat mengaksesnya apabila submenu ditutup.
• aria-controls adalah buruk, tetapi anda lebih baik menambahnya.
• Jangan gunakan role="menu" (dan keseluruhan mod menu aria) atau aria-haspopup . Ini berasa relevan, tetapi mereka tidak sesuai untuk membina menu navigasi.
• Tutup submenu terbuka ketika:
  • Satu lagi submenu dibuka
  • Pengguna Klik di luar menu
  • Apabila tumpuan berada di submenu terbuka, pengguna menekan kekunci ESC. (Tidak semua pengguna mengharapkan ini, tetapi saya fikir ia adalah ciri yang bagus.)

Sejak mengklik pada menu memerlukan JavaScript, kita harus mempertimbangkan bagaimana untuk meningkatkan menu ini jika JavaScript gagal untuk apa -apa sebab. Lagipun, helah CSS hover klasik kami masih berguna untuk perkara -perkara tertentu!

Saya mula-mula membina menu klik sebagai menu hover CSS tulen yang menggunakan li:hover > ul dan li:focus-within > ul untuk memaparkan submenu. Kemudian saya buat menggunakan JavaScript<button></button> Elemen, tetapkan atribut aria , dan tambahkan pengendali acara. Ini bermakna menu masih kebanyakannya sah tanpa JavaScript dan berfungsi dengan baik dengan menu pautan tulen yang dibina di CMS WordPress pilihan saya.

Anda boleh menyemak skrip yang saya gunakan, tetapi saya akan mula mengakui mungkin terdapat skrip yang lebih baik. Yang penting, anda harus mengujinya dengan pengguna sebenar ... dan berhenti menggunakan menu hover. ?

Atas ialah kandungan terperinci Dalam memuji menu klik yang tidak jelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!