แบบฟอร์มคือองค์ประกอบที่ให้ผู้ใช้ระบุข้อมูลลงในช่องหรือกลุ่ม หลายช่อง แบบฟอร์มอาจเป็นเพียงช่องเดียวหรือซับซ้อน เอลิเมนต์แบบฟอร์มแบบหลายขั้นตอนที่มีหลายช่องต่อหน้า การตรวจสอบความถูกต้องของอินพุต และ บางครั้งคือ 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></label><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>