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