Berlaku untuk menggunakan <a> (jangkar tag) tanpa atribut href?


152

Saya telah menggunakan Bootstrap Twitter untuk membangun sebuah situs, dan banyak fungsinya tergantung pada membungkus sesuatu <a>, bahkan jika mereka hanya akan menjalankan Javascript. Saya mempunyai masalah dengan href="#"taktik yang direkomendasikan oleh dokumentasi Bootstrap, jadi saya mencoba mencari solusi yang berbeda.

Tapi kemudian saya mencoba menghapus hrefatributnya sama sekali. Saya telah menggunakan <a class='bunch of classes' data-whatever='data'>, dan memiliki Javascript menangani sisanya. Dan itu berhasil.

Namun ada sesuatu yang memberitahuku bahwa aku seharusnya tidak melakukan ini. Baik? Maksudku, secara teknis <a>seharusnya menjadi tautan ke sesuatu, tapi aku tidak sepenuhnya yakin mengapa ini menjadi masalah. Atau itu?


Jawaban:


245

The <a>elemen nchor hanyalah sebuah jangkar ke atau dari beberapa konten. Awalnya spesifikasi HTML diizinkan untuk nama anchor ( <a name="foo">) dan anchor yang dikaitkan ( <a href="#foo">).

Format jangkar bernama kurang umum digunakan, karena pengidentifikasi fragmen sekarang digunakan untuk menentukan [id]atribut (meskipun untuk kompatibilitas mundur Anda masih dapat menentukan [name]atribut). Sebuah <a>elemen tanpa [href]atribut masih berlaku .

Sejauh menyangkut semantik dan gaya, <a>elemen tersebut bukan tautan ( :link) kecuali memiliki [href]atribut. Efek samping dari ini adalah bahwa <a>elemen tanpa [href]tidak akan ada dalam urutan tab secara default.

Pertanyaan sebenarnya adalah apakah <a>elemen itu sendiri merupakan representasi yang tepat dari a <button>. Pada tingkat semantik, ada perbedaan yang jelas antara a linkdan a button.

Sebuah tombol adalah sesuatu yang ketika diklik menyebabkan suatu tindakan terjadi.

Tautan adalah tombol yang menyebabkan perubahan navigasi dalam dokumen saat ini. Navigasi yang terjadi dapat bergerak di dalam dokumen dalam kasus pengidentifikasi fragmen ( #foo) atau pindah ke dokumen baru dalam kasus url ( /bar).

Karena tautan adalah jenis tombol khusus, mereka sering kali dikesampingkan untuk melakukan fungsi alternatif. Terus menggunakan jangkar sebagai tombol ok dari sudut pandang konsistensi, meskipun secara semantik tidak cukup akurat.

Jika Anda khawatir tentang semantik dan aksesibilitas menggunakan <a>elemen (atau <span>, atau <div>) sebagai tombol, Anda harus menambahkan atribut berikut:

<a role="button" tabindex="0" ...>...</a>

The Peran tombol memberitahu pengguna bahwa elemen tertentu sedang diperlakukan sebagai tombol sebagai override untuk semantik apapun elemen yang mendasari mungkin memiliki.

Untuk <span>dan <div>elemen, Anda mungkin ingin menambahkan pendengar kunci JavaScript untuk Spaceatau Entermemicu clickacara. <a href>dan <button>elemen melakukan ini secara default, tetapi elemen non-tombol tidak. Terkadang lebih masuk akal untuk mengikat clickpelatuk ke tombol lain. Misalnya, tombol "bantuan" di aplikasi web mungkin terikat F1.


1
@Zacqary, [role="button"]tidak melakukan sesuatu yang konkret, Anda masih perlu mendengarkan acara klik (tetapi Anda tetap akan melakukannya untuk membuat tombol JS). Ini dimaksudkan untuk digunakan untuk navigasi berbantuan (alias pembaca layar) sehingga pembaca layar tahu untuk mewakili elemen sebagai tombol daripada nilai semantik aslinya. Menambahkan [tabindex]menambahkan elemen ke urutan tab. Dalam keadaan khusus, Anda mungkin sebenarnya tidak ingin / membutuhkan tombol yang bisa dinavigasi dalam urutan tab, jadi itu adalah atribut opsional. Elemen yang sudah tombol tidak perlu [role="button"]karena itu berlebihan.
zzzzBov

Apakah HTML yang valid memiliki jangkar tanpa href dan tanpa nama? Di aplikasi kami, kami memiliki beberapa tautan penghapusan yang dinonaktifkan (karenanya tidak ada atribut href), tetapi masih ditampilkan kepada pengguna.
Joshua Muheim

1
@ JoshuaMuheim, saya harap Anda tidak keberatan, tapi saya memposting pertanyaan Anda sebagai pertanyaan terpisah yang berdiri sendiri .
zzzzBov

Hanya ingin menambahkan catatan bahwa jika Anda menggunakan ini untuk membuat 'tombol' untuk tindakan javascript ... menghapus atribut href sepenuhnya juga akan menyebabkan Chrome (dan mungkin browser lainnya) berhenti mengubah kursor pada mouseover. Jelas ini mudah untuk ditambahkan kembali dengan CSS - tetapi hanya kepala saja.
Mir

@Mir, jika Anda tidak akan menggunakan [href], Anda mungkin harus menggunakan <span>tombol untuk.
zzzzBov

45

Saya pikir Anda dapat menemukan jawaban Anda di sini: Apakah tag jangkar tanpa atribut href aman?

Juga jika Anda ingin tidak ada operasi tautan dengan href, Anda dapat menggunakannya seperti:

<a href="javascript:void(0);">something</a>

3
Seharusnya benar-benarjavascript:undefined
rybo111

2
@ rybo111 Anda benar tetapi saya masih lebih suka membatalkan (0); pada dasarnya karena terlihat lebih baik. Saya tidak suka klien saya melihat hal-hal sebagai "tidak terdefinisi" ;-)
Alex

9
<a href="javascript:;">text</a>?
diynevala

javascript:;digunakan untuk memecahkan hal-hal seperti efek rollover dan bahkan animasi gif di IE6. Dan tanpa operasi tautan ada elemen HTML khusus seperti button. Pada saat yang sama, hal-hal seperti tautan AJAX dapat menggunakan tautan mereka hrefuntuk tindakan mundur jika JS gagal.
Ilya Streltsyn

14

Ya, valid untuk menggunakan tag anchor tanpa hrefatribut.

Jika aelemen tidak memiliki hrefatribut, maka elemen tersebut mewakili placeholder di mana tautan mungkin telah ditempatkan, jika sudah relevan, hanya terdiri dari konten elemen.

Ya, Anda dapat menggunakan classdan atribut lainnya, tetapi Anda tidak dapat menggunakan target, download, rel, hreflang, dantype .

The target, download, rel, hreflang, dan typeatribut harus dihilangkan jika atribut href tidak hadir.

Adapun bagian " Haruskah Saya? ", Lihat kutipan pertama: "di mana tautan mungkin telah ditempatkan jika sudah relevan ". Jadi saya akan bertanya " Jika saya tidak punya JavaScript, apakah saya akan menggunakan tag ini sebagai tautan? ". Jika jawabannya adalah ya, maka ya, Anda harus menggunakannya <a>tanpa href. Jika tidak, maka saya masih akan menggunakannya, karena produktivitas lebih penting bagi saya daripada semantik kasus tepi, tetapi ini hanya pendapat pribadi saya.

Selain itu, Anda harus berhati - hati terhadap perilaku dan gaya yang berbeda (mis. Tidak ada garis bawah, tidak ada kursor kursor, bukan a :link).

Sumber: W3C HTML5 Rekomendasi


Ini bukan tentang "tepi kasus semantik" tetapi tentang aksesibilitas, yang memastikan bahwa penyandang cacat dapat menggunakan dan memahami konten situs web
neiya

3

Itu sah. Anda dapat, misalnya, menggunakannya untuk menampilkan modals (atau hal serupa yang merespons data-toggledan data-targetatribut).

Sesuatu seperti:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Di sini saya menggunakan ikon font-awesome, yang lebih baik sebagai atag daripada button, untuk menunjukkan modal. Selain itu, pengaturan role="button"membuat pointer berubah menjadi jenis tindakan. Tanpa salah satu hrefatau role="button", kursor kursor tidak berubah.


2
Anda harus menggunakan tombol dalam hal ini. Ini lebih tepat dari sudut pandang semantik dan aksesibilitas. Jangkar harus membawa Anda ke suatu tempat, bukan melakukan suatu tindakan. Juga, mengapa Anda menyembunyikan seluruh jangkar aria-hidden? Ikon, mungkin, tetapi pengguna pembaca layar seharusnya tidak memiliki pengalaman yang berkurang.
isherwood
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.