ช่องใส่มีป้ายกำกับสองป้ายได้ไหม

134

แมรี่มีรูปร่างเล็ก ๆ น้อย ๆ และฟิลด์ที่มีป้ายกำกับ
เมื่อใดก็ตามที่เกิดข้อผิดพลาดความสับสนก็จะเกิดขึ้น

ฉันมีป้ายกำกับสำหรับแต่ละช่องป้อนข้อมูล ... เรื่องมาตรฐานค่อนข้างดี หลังจากตรวจสอบความถูกต้องของแบบฟอร์มแล้วฉันกำลังแสดงย่อหน้าเล็ก ๆ ที่เป็นประโยชน์ที่ด้านบนของแบบฟอร์มซึ่งระบุรายละเอียดว่าข้อมูลใดขาดหายไปหรือไม่ถูกต้อง

ฉันสามารถมีป้ายกำกับสองป้ายสำหรับช่องป้อนข้อมูลเดียวกันได้หรือไม่ หนึ่งในรูปแบบที่เหมาะสมและหนึ่งในข้อความเตือนการตรวจสอบความถูกต้อง? มีเหตุผลใดที่ฉันไม่ควรทำเช่นนี้?

html forms labels

— aslum
แหล่งที่มา

ลองแล้วเกิดอะไรขึ้น? ถ้ามันใช้งานได้ฉันไม่เชื่อว่ามันจะสร้างความเสียหายให้กับแบบฟอร์มหรือเพจของคุณ และคุณจะได้รับประโยชน์เนื่องจากการใช้งานจะสามารถคลิกที่ข้อผิดพลาดในการตรวจสอบความถูกต้องและโฟกัสไปที่ฟิลด์ที่ถูกต้อง

— Felipe Cypriano

ฉันไม่ได้ลอง แต่ฉันคิดว่ามันจะเป็นไปได้ แต่ฉันไม่แนะนำให้ใช้เพราะป้ายกำกับระบุว่าฟิลด์มีไว้เพื่ออะไรข้อความแสดงข้อผิดพลาดไม่ได้ ดังนั้นฉันไม่ควรใช้ป้ายกำกับเพื่อตรวจสอบคำเตือน

— Guido Hendriks

คำถามนี้เป็นคำถามเกี่ยวกับการออกแบบ UI / การใช้งานทั่วไปหรือไม่

— jball

ใช่. มัน "ใช้งานได้" ... แต่มีเหตุผลบางอย่างที่เป็นการออกแบบที่ไม่ดีหรือไม่? ฉันเดาว่าอาจเป็นเพราะเหตุผลด้านความสามารถในการเข้าถึง แต่สำหรับผู้ใช้ทั่วไปฉันคิดว่าการสามารถคลิกที่ข้อความแสดงข้อผิดพลาดและถูกนำไปที่ฟิลด์ที่ยุ่งเหยิงจะทำให้สิ่งต่างๆง่ายขึ้น ... ฉันไม่รู้ว่ามันจะ ทำให้ "ผู้อ่านสำหรับผู้พิการทางสายตา" หรือสิ่งที่คล้ายกันยุ่งเหยิง

— aslum

ในบางกรณีคุณสามารถใส่ส่วนควบคุมและข้อความไว้ในที่เดียวlabelได้ง่ายกว่า คุณยังสามารถละเว้นแอตทริบิวต์forและ ข้อกำหนดนี้เรียกว่าสมาคมโดยปริยาย id

— rybo111

คำตอบ:

158

ฉันถือว่าคำถามนี้เกี่ยวกับรูปแบบ HTML จากข้อกำหนด :

อาจใช้องค์ประกอบ LABEL เพื่อแนบข้อมูลกับตัวควบคุม องค์ประกอบ LABEL แต่ละรายการเชื่อมโยงกับตัวควบคุมฟอร์มเดียว

ดังนั้นแต่ละตัวควบคุมฟอร์มสามารถอ้างอิงได้โดยป้ายชื่อหลายป้าย แต่แต่ละป้ายสามารถอ้างอิงได้เพียงตัวควบคุมเดียว ดังนั้นหากเหมาะสมที่จะมีป้ายกำกับที่สองสำหรับตัวควบคุม (และในสถานการณ์ที่คุณอธิบาย) อย่าลังเลที่จะเพิ่มป้ายกำกับที่สอง

— เจมส์ซัมเนอร์
แหล่งที่มา

มันเป็นคำถามเกี่ยวกับการใช้งาน / การเข้าถึงมากกว่านั้นจริงๆแล้วก็คือ HTML html ใช้งานได้

— aslum

เราทุกคนควรใช้รหัสที่ถูกต้องเท่านั้นมิฉะนั้นสิ่งต่างๆอาจพังในอนาคตหรือสำหรับคนอื่นหรือกับไลบรารี JS หรืออะไรก็ตาม

— SHernandez

คำตอบที่ถูกต้องคือ Rob โซลูชันนี้ใช้ได้กับผู้ใช้ที่มองเห็นและล้มเหลวในโปรแกรมอ่านหน้าจอบางรุ่น Aslum เดาว่าคุณยอมรับคำตอบของ jsummers ข้างต้นก่อนที่ Rob จะส่งคำตอบของเขา

— นักเลงกรง

@AvramLavinsky ไม่นี่คือคำตอบที่ถูกต้องสำหรับ "ช่องมีป้ายกำกับสองป้ายได้ไหม" สเป็คค่อนข้างชัดเจน วิธีที่ลูกค้าเลือกตีความนั้นขึ้นอยู่กับพวกเขา ลิงก์ของคุณไปยัง "aria-descriptionby" ซึ่งเชื่อมโยงไปยัง "aria-labelledby" เป็นวิธี "แก้ไข" โปรแกรมอ่านหน้าจอที่เสีย

— James Sumners

MDN ขำ ๆ บอกว่า "อินพุตเดียวสามารถเชื่อมโยงกับป้ายกำกับหลายป้ายได้" developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

HTML ถูกกฎหมายและใช้งานได้ (การคลิกที่ป้ายกำกับใด ๆ จะเป็นการโอนโฟกัสไปยังฟิลด์ที่เป็นปัญหา)

การทำอย่างถูกต้องด้วยเหตุผลด้านความสามารถในการเข้าถึงค่อนข้างยากกว่าเล็กน้อย

ไม่ใช่แนวทาง "ทั่วไป" และเนื่องจากโปรแกรมอ่านหน้าจอทั่วไปอย่างน้อยหนึ่งรายการ (ฉันทดสอบด้วย NVDA) จะอ่านป้ายกำกับแรกเมื่อคุณเปลี่ยนโฟกัสลงในช่องเท่านั้นซึ่งจะไม่สนใจป้ายกำกับเพิ่มเติมใด ๆ สำหรับช่องเดียวกัน

ดังนั้นหากข้อความแสดงข้อผิดพลาดของคุณอยู่ที่ด้านบนสุดของหน้าผู้ใช้ที่ตาบอดหรือมองเห็นได้ไม่ชัดที่แท็บผ่านช่องต่างๆจะได้ยินเพียงข้อความแสดงข้อผิดพลาดเมื่อลงจอดในฟิลด์ที่เป็นปัญหาไม่ใช่ป้ายกำกับ "จริง" ที่อยู่ข้างๆ

ดังนั้น - หากคุณใช้ข้อความแสดงข้อผิดพลาดอย่างถูกต้องนั่นอาจเป็นสิ่งที่ดี (แน่นอนว่าดีกว่าแค่ไฮไลต์ฟิลด์ที่ไม่ได้ตรวจสอบความถูกต้องเป็นสีแดง!)

— Rob Whelan
แหล่งที่มา

นี่ถูกต้องและวิธีที่ถูกต้องในการเขียนโค้ดนี้คือผ่านแอตทริบิวต์ที่อธิบาย

— cage rattler

ใช่คุณสามารถมีป้ายกำกับหลายจุดในตัวควบคุมฟอร์มเดียวกันได้ สิ่งนี้ถูกกฎหมายอย่างสมบูรณ์ :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

นี่เป็นเพียงตัวอย่าง ... โดยปกติคุณจะพันบรรทัดเหล่านี้ด้วยป้ายกำกับเดียวเมื่ออยู่ใกล้

— Gert Grenander
แหล่งที่มา

+1 สำหรับลิงก์ไปยังเอกสารซึ่งระบุไว้อย่างชัดเจนว่า " LABELอาจมีการเชื่อมโยงมากกว่าหนึ่งรายการกับการควบคุมเดียวกันโดยสร้างการอ้างอิงหลายรายการผ่านforแอตทริบิวต์"

— alexg