แบบฟอร์มคือองค์ประกอบที่ช่วยให้ผู้ใช้ป้อนข้อมูลลงในช่องหรือกลุ่มช่อง แบบฟอร์มอาจเป็นช่องเดียวหรือแบบฟอร์มหลายขั้นตอนที่ซับซ้อนซึ่งมีหลายช่องต่อหน้า การตรวจสอบอินพุต และ 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 ลงในช่องด้วย (หากมี) การเพิ่มแอตทริบิวต์การเติมข้อความอัตโนมัติช่วยให้คุณกำหนดหรือระบุวัตถุประสงค์ สำหรับ 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>
นอกจากนี้ ช่องแบบฟอร์มที่เกี่ยวข้อง เช่น ที่อยู่จัดส่ง ต้องจัดกลุ่มในเชิงโปรแกรมและในเชิงภาพ วิธีหนึ่งคือใช้รูปแบบ fieldset และ legend เพื่อจัดกลุ่มองค์ประกอบที่คล้ายกัน
คำอธิบาย
คำอธิบายช่องมีวัตถุประสงค์คล้ายกับป้ายกำกับ นั่นคือใช้เพื่อให้บริบทเพิ่มเติมแก่ช่องและข้อกำหนด คำอธิบายช่องไม่จำเป็นสำหรับการช่วยเหลือพิเศษหากป้ายกำกับหรือคำแนะนำแบบฟอร์มมีคำอธิบายเพียงพอ
อย่างไรก็ตาม มีบางสถานการณ์ที่การเพิ่มข้อมูลเพิ่มเติมจะเป็นประโยชน์เพื่อหลีกเลี่ยงข้อผิดพลาดของแบบฟอร์ม เช่น การส่งต่อข้อมูลเกี่ยวกับความยาวอินพุตขั้นต่ำสำหรับช่องรหัสผ่าน หรือการบอกผู้ใช้ว่าจะใช้รูปแบบปฏิทินใด (เช่น ดด-วว-ปปปป)
คุณสามารถใช้วิธีต่างๆ มากมายเพื่อเพิ่มคำอธิบายช่องลงในแบบฟอร์ม วิธีที่ดีที่สุดวิธีหนึ่งคือการเพิ่มแอตทริบิวต์
aria-describedby
ลงในองค์ประกอบแบบฟอร์ม นอกเหนือจากองค์ประกอบ <label> โปรแกรมอ่านหน้าจอจะอ่านทั้งคำอธิบายและป้ายกำกับ
หากคุณเพิ่มแอตทริบิวต์
aria-labelledby
ลงในองค์ประกอบ ค่าแอตทริบิวต์จะเขียนทับข้อความภายใน
<label> เช่นเคย ให้ทดสอบโค้ดสุดท้ายด้วย AT ทั้งหมดที่คุณต้องการรองรับ
ข้อผิดพลาด
เมื่อสร้างแบบฟอร์มที่เข้าถึงได้ คุณสามารถทำหลายอย่างเพื่อป้องกันไม่ให้ผู้ใช้ทำข้อผิดพลาดในแบบฟอร์ม ก่อนหน้านี้ในโมดูลนี้ เราได้กล่าวถึงการมาร์กอัปช่องอย่างชัดเจน การสร้างป้ายกำกับที่ระบุ และการเพิ่มคำอธิบายโดยละเอียดทุกครั้งที่ทำได้ แต่ไม่ว่าคุณจะคิดว่าแบบฟอร์มของคุณชัดเจนเพียงใด สุดท้ายแล้วผู้ใช้ก็จะทำผิดพลาด
เมื่อผู้ใช้พบข้อผิดพลาดในแบบฟอร์ม ขั้นตอนแรกคือการ แจ้งให้ทราบถึงข้อผิดพลาด ต้องระบุช่องที่เกิดข้อผิดพลาดอย่างชัดเจน และอธิบายข้อผิดพลาดเองให้ผู้ใช้ทราบในข้อความ
วิธีการแสดงข้อความแสดงข้อผิดพลาดมีหลายวิธี เช่น
- โมดัลแบบอินไลน์ใกล้กับตำแหน่งที่เกิดข้อผิดพลาด
- คอลเล็กชันข้อผิดพลาดที่จัดกลุ่มไว้ในข้อความขนาดใหญ่ข้อความเดียวที่ด้านบนของหน้า
โปรดให้ความสำคัญกับโฟกัสของแป้นพิมพ์ และตัวเลือก ARIA Live Region เมื่อประกาศข้อผิดพลาด
เสนอคำแนะนำโดยละเอียดแก่ผู้ใช้เกี่ยวกับวิธีแก้ไขข้อผิดพลาดทุกครั้งที่ทำได้ มีแอตทริบิวต์ 2 รายการที่พร้อมใช้งานเพื่อแจ้งให้ผู้ใช้ทราบถึงข้อผิดพลาด
- คุณสามารถใช้แอตทริบิวต์ required ของ HTML เบราว์เซอร์จะแสดงข้อความแสดงข้อผิดพลาดทั่วไปตามพารามิเตอร์การตรวจสอบไฟล์
- หรือคุณจะใช้แอตทริบิวต์ aria-required เพื่อแชร์ข้อความแสดงข้อผิดพลาดที่กำหนดเองกับ AT ก็ได้ เฉพาะ AT เท่านั้นที่จะได้รับข้อความนี้ เว้นแต่คุณจะเพิ่มโค้ดเพื่อให้ข้อความแสดงต่อผู้ใช้ทุกคน
เมื่อผู้ใช้คิดว่าได้แก้ไขข้อผิดพลาดทั้งหมดแล้ว ให้ผู้ใช้ส่งแบบฟอร์มอีกครั้งและแสดงความคิดเห็นเกี่ยวกับผลลัพธ์ของการส่ง ข้อความแสดงข้อผิดพลาดจะแจ้งให้ผู้ใช้ทราบว่าต้องทำการอัปเดตเพิ่มเติม ขณะที่ข้อความแสดงความสำเร็จจะยืนยันว่าผู้ใช้ได้แก้ไขข้อผิดพลาดทั้งหมดและส่งแบบฟอร์มเรียบร้อยแล้ว
เกณฑ์ความสำเร็จเพิ่มเติม
WCAG 2.2 ได้นำเสนอเกณฑ์ความสำเร็จต่อไปนี้ที่มุ่งเน้นไปที่ประสบการณ์การใช้งานแบบฟอร์มที่เข้าถึงได้มากขึ้น