ฟอร์ม

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

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

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

ช่อง

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

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

ARIA

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

HTML

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

นอกจากการเลือกรูปแบบฟิลด์ของฟอร์มที่สามารถเข้าถึงได้มากที่สุดที่ คุณควรเพิ่ม แอตทริบิวต์การเติมข้อความอัตโนมัติ HTML ลงในช่องของคุณ การเพิ่มแอตทริบิวต์การเติมข้อความอัตโนมัติช่วยให้ ความละเอียดมากขึ้น คำจำกัดความหรือการระบุวัตถุประสงค์ ให้กับ User Agent และเทคโนโลยีความช่วยเหลือพิเศษ (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>

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

คำอธิบาย

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

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

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

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

ข้อผิดพลาด

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

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

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

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

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

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

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

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

ตรวจสอบความเข้าใจ

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

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

Email address: <input type="email" required>
<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>
<label>Email address: <input type="email" required></label>