ฟอร์ม

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

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

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

ช่อง

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

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

ไม่แนะนำ — HTML ที่กำหนดเองที่มี ARIA

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

แนะนำ — HTML มาตรฐาน

<form id="sundae-order-form">
  <!-- form content -->
</form>

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

แอตทริบิวต์การเติมข้อความอัตโนมัติช่วยให้ผู้ใช้ปรับเปลี่ยนการนำเสนอภาพให้เหมาะกับตนเองได้ เช่น แสดงไอคอนเค้กวันเกิดในช่องที่แอตทริบิวต์การเติมข้อความอัตโนมัติสำหรับวันเกิด (bday) กำหนดไว้ โดยทั่วไปแล้ว แอตทริบิวต์การเติมข้อความอัตโนมัติจะช่วยให้กรอกแบบฟอร์มได้ง่ายและรวดเร็วขึ้น ซึ่งจะเป็นประโยชน์อย่างยิ่งสำหรับผู้ที่มีปัญหาด้านการคิดและการอ่าน รวมถึงผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) เช่น โปรแกรมอ่านหน้าจอ

<form id="sundae-order-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

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

ป้ายกำกับ

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

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

<form id="sundae-order-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

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

คำอธิบาย

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

อย่างไรก็ตาม ในบางสถานการณ์ การเพิ่มข้อมูลเพิ่มเติมจะเป็นประโยชน์เพื่อหลีกเลี่ยงข้อผิดพลาดของแบบฟอร์ม เช่น การแจ้งข้อมูลเกี่ยวกับความยาวขั้นต่ำของข้อมูลที่ป้อนสำหรับช่องรหัสผ่าน หรือบอกผู้ใช้ว่าควรใช้รูปแบบปฏิทินใด (เช่น MM-DD-YYYY)

คุณเพิ่มคำอธิบายช่องในแบบฟอร์มได้หลายวิธี วิธีที่ดีที่สุดวิธีหนึ่งคือการเพิ่มแอตทริบิวต์ aria-describedby ลงในองค์ประกอบแบบฟอร์ม นอกเหนือจากองค์ประกอบ <label> โปรแกรมอ่านหน้าจอจะอ่านทั้งคำอธิบายและป้ายกำกับ

หากคุณเพิ่มแอตทริบิวต์ aria-labelledby ลงในองค์ประกอบ ค่าแอตทริบิวต์จะลบล้างข้อความภายใน <label> อย่าลืมทดสอบโค้ดสุดท้ายกับ AT ทั้งหมดที่วางแผนจะรองรับ

ข้อผิดพลาด

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

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

การแสดงข้อความแสดงข้อผิดพลาดมีหลายวิธี เช่น

  • โมดัลในบรรทัดที่อยู่ใกล้กับตําแหน่งที่เกิดข้อผิดพลาด
  • ชุดข้อผิดพลาดที่จัดกลุ่มไว้ในข้อความขนาดใหญ่รายการเดียวที่ด้านบนของหน้า

อย่าลืมคำนึงถึงโฟกัสแป้นพิมพ์และตัวเลือกภูมิภาคแบบเรียลไทม์ของ ARIA เมื่อประกาศข้อผิดพลาด

แนะนำวิธีแก้ไขข้อผิดพลาดโดยละเอียดแก่ผู้ใช้ทุกครั้งที่ทำได้ มี 2 แอตทริบิวต์ที่ใช้แจ้งข้อผิดพลาดให้ผู้ใช้ทราบ

  • คุณใช้แอตทริบิวต์ HTML required ได้ เบราว์เซอร์จะแสดงข้อความแสดงข้อผิดพลาดทั่วไปตามพารามิเตอร์การตรวจสอบที่ส่ง
  • หรือจะใช้แอตทริบิวต์ aria-required เพื่อแชร์ข้อความแสดงข้อผิดพลาดที่กําหนดเองไปยัง AT ก็ได้ เฉพาะ AT เท่านั้นที่จะได้รับข้อความ เว้นแต่คุณจะเพิ่มโค้ดเพิ่มเติมเพื่อให้ผู้ใช้ทุกคนเห็นข้อความ

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

เกณฑ์ความสําเร็จเพิ่มเติม

WCAG 2.2 ได้เปิดตัวเกณฑ์ความสําเร็จต่อไปนี้ซึ่งมุ่งเน้นที่ประสบการณ์การใช้งานแบบฟอร์มที่เข้าถึงได้ง่ายขึ้น

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับแบบฟอร์มที่เข้าถึงได้

ตัวเลือกใดต่อไปนี้เป็นอินพุตแบบฟอร์มที่เข้าถึงได้ง่ายที่สุด

Email address: <input type="email" required>
ไม่มีป้ายกำกับที่เชื่อมโยง "อีเมล" กับอินพุต
<label>Email address: <input type="email" required></label>
รายการนี้ไม่มีแอตทริบิวต์การเติมข้อความอัตโนมัติ ซึ่งให้คำจำกัดความหรือระบุวัตถุประสงค์แก่ User Agent และเทคโนโลยีความช่วยเหลือพิเศษ (AT)
<label>Email address: <input type="email" required autocomplete="email"></label>
นี่เป็นป้ายกำกับช่องที่เข้าถึงได้ แต่ไม่ใช่ป้ายกำกับที่เข้าถึงได้ง่ายที่สุดในรายการนี้
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>
แอตทริบิวต์ aria-describedby จะเพิ่มบริบทเพิ่มเติมให้กับข้อผิดพลาดที่ผู้ใช้อาจได้รับหากกรอกข้อมูลในช่องอย่างไม่ถูกต้อง แม้ว่าแอตทริบิวต์นี้จะไม่จำเป็น แต่อาจเป็นประโยชน์สำหรับผู้ใช้ AT