Menggunakan Anchor element dengan tepat

Hai teman-teman, di kesempatan kali ini kita akan membahas pada ranah HTML, terutama dalam penggunaan anchor element <a> .

Permasalahan

Masih banyak developer yang menggunakan HTML dengan cara yang kurang tepat, apa bermasalah? bisa iya dan bisa tidak. Di kesempatan ini kita akan melihat beberapa contoh yang sering terjadi.

Penggunaan button element di dalam child anchor element

Siapa yang pernah melakukannya seperti pada kasus kita ingin membuat card produk yang dapat kita klik dan menuju ke halaman detail produk tersebut dengan membungkus keseluruhan element produk card dengan anchor element dan di card tersebut terdapat tombol like untuk menambahkan barang tersebut ke wishlist, terlihat tidak masalah bukan?

namun akan terdapat masalah, yaitu ketika terjadi event bubbling.

NOTE: Pada contoh ketika tombol like (L) di klik maka akan melakukan log pada console, dan anchor element akan menuju halaman lain.

ketika tombol like di klik maka tidak hanya event pada tombol tersebut yang dijalankan melainkan event pada anchor element tersebut juga akan dijalankan akibatnya yang seharusnya hanya like saja malahan terjadi juga perpindahan ke halaman lain.

Permasalahan ini bisa di kita selesaikan dengan menyangkal behaviour dari event tersebut dengan preventDefault() walaupun berhasil namun apakah tepat? mari kita gali lebih dalam.

HTML Standard Specifications| https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

transparent, tetapi tidak boleh ada INTERACTIVE CONTENT turunan elemen a , atau turunan dengan atribut tabindex yang ditentukan.

Berdasarkan specifications di sana, disebutkan keturunan dari element a tidak boleh barupa interactive content atau turunan yang memiliki/diberikan tabindex.

Apa maksudnya? mari kita cari tau apa itu interactive content!

HTML Standard Specifications | https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2

Balik lagi ke specification nya, interactive content merupakan konten yang secara khusus ditujukan untuk interaksi pengguna, sudah kebayang bukan apa saja? yaps salah satunya adalah button !.

Content categories - Developer guides | MDN

Lalu ada disebutkan mengenai tabindex, ini merupakan global attribute yang bisa kita gunakan untuk aksesibilitas, dan semua interactive content memilikinya secara default, namun kita bisa memberikan tabindex pada element lain. Pernah menekan tab pada sebuah halaman web? apa yang terjadi? konten yang memiliki tabindex akan menjadi dalam keadaan focus dan user dapat bernavigasi menggunakan keyboard dengan mudah.

Sipp sudah jelas dari specificationnya bahwa menggunakan button sebagai turunan dari a tidak di perbolehkan.

Selain itu dari segi aksesibilitas element a tidak baik, karena langsung membungkus seluruh konten yang mengakibatkan link tersebut tidak memiliki makna yang jelas.

accessibility

Lalu bagaimana? tapi banyak web yang bisa bikin kayak kasus yang kita inginkan di awal?.

Eiitsss… tenang dulu, kita tetap bisa melakukan seperti kasus kita sebelumnya, caranya? IT’S CSS TIME. Yups kita bisa memanfaatkan css dengan racikan yang tepat kita dapat meraih hasil yang sama, dengan aksesibilitas dan penggunaan element yang baik dan tepat.

cukup beberapa perubahan yang perlu kita lakukan, mari kita bongkar!

Langkah #1

<h2>
    <a href="https://medium.com" class="card__link">
        Amazing mountain night
    </a>
</h2>

pindahkan a element ke dalam heading, ini akan memberikan aksesibilitas yang baik sesuai konteks dari link tersebut.

Namun sekarang yang hanya bisa menjadi link ketika di klik hanya heading nya aja dong? yaps selanjutkan kita akan memanfaatkan css melakukannya!

Langkah #2

.card {
    ...
    position: relative;
}

pastikan card kita memiliki position relative, agar kita dapat membatasi konten agar relative terhadap card tersebut.

Langkah #3

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

Yang terakhir adalah menggunakan pseudo element ::after untuk membuat element maya dengan content kosong "” yang akan kita gunakan untuk menutupi seluruh area card tersebut dengan kita menerapakan position absolute oleh karena itu sebelumnya pada card kita berikan position relative agar pseudo element ini hanya berada relative terhadap card. Kita juga berikan inset 0, ini sama seperti kita memberikan top, right, bottom, left sekaligus (shorthand).

Tadaaa… semua berjalan dengan semestinya, dan lebih baik dari sebelumnya!

Apa yang telah kita raih?

• Seluruh area card dapat kita klik untuk berpindah halaman.
• button sudah tidak berada sebagai turunan dari anchor element.
• anchor element memiliki aksesibilias dan penggunaan yang tepat.
• button dapat kita klik dengan semestinya.

Akhir kata

Selamat kita sudah memperbaiki beberapa kesalahan yang sering kita lakukan!, selanjutnya apa lagi? Masih banyak dokumentasi/spesifikasi HTML yang belum kita pelajari dan terapkan, walau HTML merupakan teknologi yang mudah “KATANYA” dan jika kita memiliki kesalahan ia tidak memberikan feedback berupa error sehingga para developer mengaangap itu tidak masalah namun beberapa hal tidak sesuai.

Tidak terasa sudah di akhir, semoga apa yang dapat saya sampaikan dapat bermanfaat, terima kasih telah belajar bersama, jika ada salah kata, typo, kesalahan penyampaian dan lainnya saya minta maaf, silahkan sampaikan di comment agar di perbaiki dan kita sama sama belajar.

Sampai jumpa di kesempatan berikutnya.

Terhubung dengan saya dan teman teman komunitas lainnya di Devsantara discord server berikut:

Join the Devsantara Discord Server!