ฟอร์ม

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