ใช้ได้กับ <a> (แท็กจุดยึด) ที่ไม่มีแอตทริบิวต์ href หรือไม่


152

ฉันใช้ Twitter Bootstrap เพื่อสร้างเว็บไซต์และฟังก์ชั่นการใช้งานมากมายนั้นขึ้นอยู่กับการห่อสิ่งต่าง ๆ<a>แม้ว่าพวกเขาจะใช้ Javascript ก็ตาม ฉันมีปัญหากับhref="#"กลยุทธ์ที่เอกสารแนะนำ Bootstrap แนะนำดังนั้นฉันจึงพยายามหาวิธีแก้ไขปัญหาอื่น

แต่แล้วฉันก็ลองลบhrefคุณลักษณะทั้งหมด ฉันใช้อยู่<a class='bunch of classes' data-whatever='data'>และให้ Javascript จัดการส่วนที่เหลือ และมันใช้งานได้

แต่มีบางอย่างกำลังบอกฉันว่าฉันไม่ควรทำเช่นนี้ ขวา? ฉันหมายความว่าในทางเทคนิค<a>ควรจะเชื่อมโยงกับบางสิ่งบางอย่าง แต่ฉันไม่แน่ใจว่าทำไมมันถึงมีปัญหา หรือมันคืออะไร?


คำตอบ:


245

<a>องค์ประกอบ nchor เป็นเพียงสมอไปยังหรือจากเนื้อหาบางส่วน เดิมทีข้อมูลจำเพาะ HTML ที่อนุญาตให้ใช้สำหรับชื่อจุดยึด ( <a name="foo">) และจุดยึดแบบโยง ( <a href="#foo">)

รูปแบบจุดยึดชื่อใช้น้อยกว่าเนื่องจากตัวระบุส่วนถูกใช้เพื่อระบุ[id]แอตทริบิวต์ (แม้ว่าจะใช้งานร่วมกันได้คุณสามารถระบุ[name]แอตทริบิวต์) ได้ องค์ประกอบโดยไม่ต้องมีคุณลักษณะที่ยังคงถูกต้อง<a>[href]

เท่าที่ความหมายและการใส่สไตล์มีส่วนเกี่ยวข้อง<a>องค์ประกอบนั้นไม่ใช่ลิงก์ ( :link) เว้นแต่ว่าจะมี[href]แอตทริบิวต์ ผลข้างเคียงของสิ่งนี้คือ<a>องค์ประกอบที่ไม่มี[href]จะไม่เรียงตามลำดับการแท็บตามค่าเริ่มต้น

คำถามจริงคือไม่ว่าจะเป็นองค์ประกอบอยู่คนเดียวเป็นตัวแทนที่เหมาะสมของ<a> <button>ในระดับความหมายมีความแตกต่างที่ชัดเจนระหว่างและlinkbutton

ปุ่มคือสิ่งที่เมื่อคลิกทำให้เกิดการกระทำ

ลิงค์คือปุ่มที่ทำให้เกิดการเปลี่ยนแปลงในการนำทางในเอกสารปัจจุบัน การนำทางที่เกิดขึ้นสามารถเคลื่อนย้ายภายในเอกสารในกรณีของตัวระบุส่วน ( #foo) หรือย้ายไปยังเอกสารใหม่ในกรณีของ URL ( /bar)

เนื่องจากลิงก์เป็นปุ่มชนิดพิเศษพวกเขาจึงมักถูกแทนที่ด้วยการกระทำเพื่อทำหน้าที่ทางเลือก การใช้จุดยึดอย่างต่อเนื่องเป็นปุ่มก็ถือว่าใช้ได้จากจุดยืนที่สอดคล้องกันถึงแม้ว่ามันจะไม่ค่อยแม่นยำในเชิงความหมาย

หากคุณกังวลเกี่ยวกับความหมายและความสามารถในการเข้าถึงการใช้<a>องค์ประกอบ (หรือ<span>หรือ<div>) เป็นปุ่มคุณควรเพิ่มแอตทริบิวต์ต่อไปนี้:

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

บทบาทปุ่มบอกผู้ใช้ว่าองค์ประกอบโดยเฉพาะอย่างยิ่งจะถูกถือว่าเป็นปุ่มเป็นผู้แทนที่สำหรับความหมายสิ่งที่องค์ประกอบพื้นฐานอาจจะมี

สำหรับ<span>และ<div>องค์ประกอบคุณอาจต้องการเพิ่มตัวรับฟังรหัส JavaScript สำหรับSpaceหรือEnterเรียกใช้clickเหตุการณ์ <a href>และ<button>องค์ประกอบจะทำสิ่งนี้ตามค่าเริ่มต้น แต่องค์ประกอบที่ไม่ใช่ปุ่มจะไม่ทำเช่นนั้น บางครั้งการผูกclickทริกเกอร์ให้กับคีย์ที่แตกต่างกัน ยกตัวอย่างเช่นปุ่ม "ช่วย" F1ในเว็บแอปอาจจะผูกพันกับ


1
@Zacqary [role="button"]ไม่ได้ทำอะไรเป็นรูปธรรมคุณยังต้องฟังเหตุการณ์การคลิก (แต่คุณต้องทำเช่นนั้นเพื่อสร้างปุ่ม JS) มันมีไว้เพื่อใช้ในการนำทางช่วย (โปรแกรมอ่านหน้าจอที่รู้จัก) เพื่อให้โปรแกรมอ่านหน้าจอรู้วิธีแสดงองค์ประกอบเป็นปุ่มแทนที่จะเป็นค่าความหมายดั้งเดิม การเพิ่ม[tabindex]จะเพิ่มองค์ประกอบในลำดับการแท็บ ในกรณีพิเศษคุณอาจไม่ต้องการ / ต้องการปุ่มที่สามารถนำทางได้ตามลำดับการแท็บดังนั้นจึงเป็นคุณลักษณะที่เป็นตัวเลือก องค์ประกอบที่มีอยู่แล้วปุ่มไม่จำเป็นต้องใช้[role="button"]มันซ้ำซ้อน
zzzzBov

เป็น HTML ที่ถูกต้องหรือไม่ที่จะมีแท็ก anchor โดยไม่มี href และไม่มีชื่อ? ในแอพของเราเรามีลิงค์ลบที่ปิดการใช้งาน (ดังนั้นจึงไม่มีแอตทริบิวต์ href) แต่ยังคงปรากฏต่อผู้ใช้
Joshua Muheim

1
@JoshuaMuheim ฉันหวังว่าคุณไม่ทราบ แต่ผมโพสต์คำถามของคุณเป็นคำถามแบบสแตนด์อะโลนแยกต่างหาก
zzzzBov

แค่ต้องการเพิ่มโน้ตว่าหากคุณใช้สิ่งนี้เพื่อสร้าง 'ปุ่ม' สำหรับการกระทำของจาวาสคริปต์ ... การลบแอตทริบิวต์ href จะทำให้ Chrome (และเบราว์เซอร์อื่น ๆ ) หยุดการเปลี่ยนเคอร์เซอร์บนเม้าส์ เห็นได้ชัดว่านี่เป็นเรื่องง่ายที่จะเพิ่มเข้าไปอีกด้วย CSS - แต่เป็นเรื่องง่ายขึ้น
เมียร์

@ ฉันหากคุณไม่ได้ใช้งาน[href]คุณควรใช้<span>ปุ่ม
zzzzBov

45

ฉันคิดว่าคุณสามารถหาคำตอบได้ที่นี่: แท็กจุดยึดที่ไม่มีแอตทริบิวต์ href ปลอดภัยหรือไม่

นอกจากนี้หากคุณไม่ต้องการใช้ลิงค์กับ href คุณสามารถใช้มันได้เช่น:

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

3
ควรเป็นจริงjavascript:undefined
rybo111

2
@ rybo111 คุณพูดถูก แต่ฉันก็ยังชอบช่องว่าง (0); โดยทั่วไปเพราะมันดูดีกว่า ฉันไม่ชอบให้ลูกค้าเห็นว่าเป็น "undefined" ;-)
Alex

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

javascript:;ใช้เพื่อแบ่งสิ่งต่าง ๆ เช่นลักษณะพิเศษแบบโรลโอเวอร์และแม้แต่ภาพเคลื่อนไหว gif ใน IE6 และสำหรับการดำเนินงานไม่มีการเชื่อมโยงมีองค์ประกอบ HTML buttonเฉพาะเช่น ในเวลาเดียวกันสิ่งต่างๆเช่นลิงก์ AJAX อาจใช้สิ่งเหล่าhrefนี้สำหรับการดำเนินการทางเลือกหาก JS ล้มเหลว
Ilya Streltsyn

14

ใช่มันสามารถใช้แท็กจุดยึดโดยไม่มีhrefแอตทริบิวต์

หากaองค์ประกอบนั้นไม่มีhrefแอ็ตทริบิวต์องค์ประกอบนั้นก็จะแสดงถึงตัวยึดตำแหน่งที่ลิงก์อาจถูกวางไว้หากมีความเกี่ยวข้องซึ่งประกอบด้วยเพียงเนื้อหาขององค์ประกอบ

ใช่คุณสามารถใช้classและคุณลักษณะอื่น ๆแต่คุณไม่สามารถใช้target, download, rel,hreflangtypeและ

target, download, rel, hreflangและtypeคุณลักษณะที่จะต้องละเว้นถ้าแอตทริบิวต์ href ไม่อยู่

สำหรับส่วน " ฉันควรหรือไม่ " ให้ดูการอ้างอิงแรก: " โดยที่ลิงก์อาจถูกวางไว้เป็นอย่างอื่นหากเกี่ยวข้องกัน " ดังนั้นฉันจะถามว่า " ถ้าฉันไม่มี JavaScript ฉันจะใช้แท็กนี้เป็นลิงก์หรือไม่ " ถ้าคำตอบคือใช่แล้วใช่คุณควรใช้โดยไม่ต้อง<a> hrefถ้าไม่เช่นนั้นฉันก็จะยังใช้มันอยู่เพราะผลผลิตมีความสำคัญต่อฉันมากกว่าความหมายของคดีขอบ แต่นี่เป็นเพียงความเห็นส่วนตัวของฉัน

นอกจากนี้คุณควรระวังพฤติกรรมและสไตล์ที่แตกต่างกัน(เช่นไม่มีขีดเส้นใต้ไม่มีเคอร์เซอร์ตัวชี้ไม่ใช่ a :link)

ที่มา: คำแนะนำ W3C HTML5


มันไม่ได้เกี่ยวกับ "ความหมายของคดีขอบ" มากนัก แต่เกี่ยวกับการเข้าถึงที่ทำให้แน่ใจว่าคนพิการสามารถใช้และเข้าใจเนื้อหาของเว็บไซต์ได้
neiya

3

มันถูกต้อง ตัวอย่างเช่นคุณสามารถใช้มันเพื่อแสดงโมดัล (หรือสิ่งที่คล้ายกันซึ่งตอบสนองdata-toggleและdata-targetแอตทริบิวต์)

สิ่งที่ต้องการ:

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

ที่นี่ฉันใช้ไอคอนแบบอักษรที่ยอดเยี่ยมซึ่งดีกว่าเป็นaแท็กแทนที่จะbuttonแสดงเพื่อเป็นกิริยาช่วย นอกจากนี้การตั้งค่าrole="button"ทำให้ตัวชี้เปลี่ยนเป็นประเภทการกระทำ โดยไม่ต้องอย่างใดอย่างหนึ่งhrefหรือrole="button"ตัวชี้เคอร์เซอร์ไม่เปลี่ยนแปลง


2
คุณควรใช้ปุ่มในกรณีนี้ เหมาะสมกว่าทั้งในแง่ความหมายและจุดเข้าถึง แองเคอร์ควรพาคุณไปที่ไหนสักแห่งไม่ใช่ทำการกระทำ นอกจากนี้ทำไมคุณถึงซ่อนสมอทั้งหมดด้วยaria-hidden? อาจจะเป็นไอคอน แต่ผู้ใช้โปรแกรมอ่านหน้าจอไม่ควรมีประสบการณ์น้อยลง
isherwood
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.