Pautan Blok: Mencari penyelesaian yang sempurna

Chris baru -baru ini menyerlahkan kebolehcapaian dan kelemahan UX dari "pautan blok" -wrapping keseluruhan elemen kad dalam tag utama. Artikel ini mengkaji semula cabaran, meneroka sama ada masalah terletak pada corak itu sendiri atau pelaksanaannya. Kami berhasrat untuk membuat komponen kad yang menangani isu -isu ini. Sepanjang, "kad" merujuk kepada komponen yang menggunakan corak pautan blok.

Komponen kad ideal kami harus memenuhi kriteria ini:

1. Diklik sepenuhnya dan dihubungkan.
2. Menampung pelbagai pautan dalaman.
3. Mengekalkan HTML semantik untuk keserasian teknologi bantuan.
4. Benarkan pemilihan teks, seperti pautan standard.
5. Menyokong klik kanan dan pintasan papan kekunci.
6. Memastikan pesanan tab yang betul untuk elemen yang fokus.

Ini memberikan cabaran penting, kerana pelayar tidak mempunyai widget kad standard. Mari kita periksa beberapa pendekatan:

Kaedah 1: Mudah (tetapi cacat)<a></a> Balut

Pendekatan paling mudah -membungkus seluruh kad dalam<a></a> TAG -juga paling tidak berkesan. Semasa mencapai klik kebolehkerjaan asas dan klik kanan/fungsi pintasan papan kekunci, ia gagal di beberapa bidang:

1. Menghalang pautan bersarang dalam kad.
2. Kompromi aksesibiliti; Pembaca skrin boleh mengumumkan kandungan keseluruhan kad tanpa pandang bulu.
3. Melumpuhkan pemilihan teks.

Kaedah ini jelas tidak mencukupi.

Kaedah 2: Menghubungkan hanya elemen yang diperlukan

Pendekatan ini mengutamakan kebolehcapaian dengan menghubungkan hanya elemen individu yang memerlukan pautan. Ini berjaya menangani:

1. Pelbagai pautan dalaman.
2. HTML Semantik.
3. Pemilihan teks.
4. Klik kanan/pintasan papan kekunci.
5. Pesanan tab.

Walau bagaimanapun, ia tidak mempunyai ciri penting dalam klikbiliti kad penuh.

Kaedah 3: The ::before Pendekatan Pseudo-Element

Menggunakan A ::before atau ::after pseudo-element yang diposisikan sepenuhnya ke atas kad menyediakan kawasan yang boleh diklik. Walau bagaimanapun, kaedah ini masih mengalami:

1. Batasan pada pautan bersarang; Lapisan pseudo-elemen menghalang klik pada pautan yang mendasari.
2. Pemilihan teks tetap bermasalah.

Penyelesaian yang lebih mantap diperlukan.

Kaedah 4: Peningkatan JavaScript Kaedah 2

Membina Kaedah 2, kita boleh memanfaatkan JavaScript untuk peningkatan progresif. Kami akan menambah pendengar acara klik ke kad dan secara pemrograman mencetuskan acara klik pautan utama. Untuk mengelakkan gangguan dengan pemilihan teks, kami akan menggunakan window.getSelection().toString() untuk memeriksa sama ada teks dipilih sebelum mencetuskan pautan klik:

 const card = document.QuerySelector (". Card");
const mainlink = document.QuerySelector ('. main-link');

card.addeventListener ("klik", handleClick);

fungsi handleclick (event) {
  const isTextSelected = window.getSelection (). toString ();
  jika (! isTextSelected) {
    mainLink.click ();
  }
}

// Mencegah penyebaran acara pada elemen yang boleh diklik dalam kad
const clickableElements = array.from (card.QuerySelectorAll ("a"));
clickableelements.foreach ((ele) =>
  ele.addeventListener ("klik", (e) => e.stoppropagation ())
);

Pendekatan ini berjaya memenuhi semua keperluan kami. Walau bagaimanapun, potensi peristiwa dua kali mencetuskan pada pautan dan butang dalaman mungkin memerlukan penambahbaikan selanjutnya.

Penyelesaian ini menyediakan komponen kad yang boleh diakses dan boleh diakses. Pertimbangan lanjut, seperti mengendalikan kad dengan pautan atau imej "Baca Lebih Lanjut", memerlukan penerokaan tambahan.

Untuk membaca lebih lanjut:

• Kad oleh Heydon Pickering
• Pautan blok, kad, kawasan yang boleh diklik, baris, dan lain -lain oleh Adrian Roselli
• Pautan blok adalah kesakitan (dan mungkin hanya idea yang buruk) oleh Chris Coyier
• Perangkap Kad UIS oleh Dave Rupert

Atas ialah kandungan terperinci Pautan Blok: Mencari penyelesaian yang sempurna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!