ฟอร์ม

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