แบบฟอร์มที่คุณสร้างมีไว้สำหรับบุคคล แต่ละคนใช้อุปกรณ์ไม่เหมือนกัน บางคนใช้เมาส์ อุปกรณ์ระบบสัมผัส บางแป้นพิมพ์ ที่ควบคุมโดยการเคลื่อนไหวของดวงตา บางคนใช้โปรแกรมอ่านหน้าจอ บางห้องเป็นหน้าจอขนาดเล็ก บางคนใช้ซอฟต์แวร์ขยายข้อความ ทุกคนต้องการใช้แบบฟอร์มของคุณ ดูวิธีทำให้แบบฟอร์มเข้าถึงและใช้งานได้สำหรับทุกคน
ตรวจสอบว่าผู้ใช้เข้าใจจุดประสงค์ของช่องข้อมูลในแบบฟอร์ม
มีการควบคุมแบบฟอร์มมากมายให้คุณเลือก
สิ่งที่ทุกคนมีเหมือนกันคืออะไร
การควบคุมแบบฟอร์มทุกรายการต้องมีองค์ประกอบ <label> เชื่อมโยงอยู่
องค์ประกอบ <label> อธิบายวัตถุประสงค์ของตัวควบคุมแบบฟอร์ม
ข้อความ <label> จะเชื่อมโยงภาพกับตัวควบคุมแบบฟอร์ม และอ่านผ่านโปรแกรมอ่านหน้าจอ
นอกจากนี้ การแตะหรือคลิก <label> จะโฟกัสตัวควบคุมแบบฟอร์มที่เกี่ยวข้อง
ทำให้มีเป้าหมายใหญ่ขึ้น
ใช้ HTML ที่มีความหมายเพื่อเข้าถึงฟีเจอร์ในตัวของเบราว์เซอร์
ในทางทฤษฎี คุณสามารถสร้างแบบฟอร์มโดยใช้องค์ประกอบ <div> เท่านั้น
คุณยังทำให้ดูเหมือน<form>เนทีฟได้ด้วย
ปัญหาในการใช้
องค์ประกอบที่ไม่สื่อความหมายไหม
องค์ประกอบแบบฟอร์มในตัวมีฟีเจอร์ในตัวมากมาย เรามาดูตัวอย่างกัน
รูปลักษณ์ <input> (รายการแรกในตัวอย่าง) และ <div> มีลักษณะเหมือนกัน
คุณยังแทรกข้อความสำหรับทั้ง 2 ประเภทได้ด้วย เนื่องจาก <div> มี
contenteditable
อย่างไรก็ตาม การใช้องค์ประกอบ <input> ที่เหมาะสมและ <div> มีความแตกต่างอย่างมาก
ดูเหมือน <input>
ผู้ใช้โปรแกรมอ่านหน้าจอไม่จดจำ <div> เป็นองค์ประกอบอินพุต
และไม่สามารถกรอกแบบฟอร์มได้
ผู้ใช้โปรแกรมอ่านหน้าจอทั้งหมดจะได้ยินว่า "ชื่อ"
โดยไม่มีข้อบ่งชี้ว่าองค์ประกอบนั้นเป็นการควบคุมแบบฟอร์มสำหรับเพิ่มข้อความ
การคลิกที่ <div>Name</div> ไม่ได้โฟกัส <div> ที่ตรงกัน ในขณะที่ <label> และ
<input> เชื่อมต่อกันโดยใช้แอตทริบิวต์ for และ id
หลังจากส่งแบบฟอร์มแล้ว ข้อมูลที่ป้อนใน <div> จะไม่รวมอยู่ในคำขอ
แม้ว่าจะแนบข้อมูลด้วย JavaScript ได้
<input> จะดำเนินการดังกล่าวโดยค่าเริ่มต้น
องค์ประกอบแบบฟอร์มในตัวจะมีฟีเจอร์อื่นๆ ด้วย
เช่น เมื่อมีองค์ประกอบของฟอร์มที่เหมาะสม และ inputmode หรือ type ที่ถูกต้อง
แป้นพิมพ์บนหน้าจอจะแสดงอักขระที่เหมาะสม การใช้แอตทริบิวต์ inputmode ใน <div>
ทำแบบนั้นไม่ได้
ตรวจสอบว่าผู้ใช้ทราบถึงรูปแบบข้อมูลที่ต้องการ
คุณกำหนดกฎการตรวจสอบต่างๆ สำหรับตัวควบคุมแบบฟอร์มได้
ตัวอย่างเช่น สมมติว่าช่องในแบบฟอร์มควรมีอักขระอย่างน้อย 8 ตัวเสมอ
คุณใช้แอตทริบิวต์ minlength ซึ่งบ่งบอกถึงกฎการตรวจสอบสำหรับเบราว์เซอร์
คุณจะแน่ใจได้อย่างไรว่าผู้ใช้รู้จักกฎการตรวจสอบด้วย ให้บอก
เพิ่มข้อมูลเกี่ยวกับรูปแบบที่ต้องการใต้ตัวควบคุมแบบฟอร์มโดยตรง
อธิบายให้ชัดเจนเกี่ยวกับอุปกรณ์อำนวยความสะดวก
ใช้แอตทริบิวต์ aria-describedby ในตัวควบคุมแบบฟอร์ม
และ id ในข้อความแสดงข้อผิดพลาดที่มีค่าเดียวกันเพื่อเชื่อมต่อทั้ง 2 อย่าง
ช่วยให้ผู้ใช้พบข้อความแสดงข้อผิดพลาดสำหรับตัวควบคุมแบบฟอร์ม
ในโมดูลก่อนหน้าเกี่ยวกับการตรวจสอบความถูกต้อง คุณได้เรียนรู้วิธีแสดงข้อความแสดงข้อผิดพลาดในกรณีที่ป้อนข้อมูลไม่ถูกต้องแล้ว
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
ตัวอย่างเช่น หากช่องมีแอตทริบิวต์ required และป้อนข้อมูลที่ไม่ถูกต้อง เบราว์เซอร์จะแสดง
ข้อความแสดงข้อผิดพลาดข้างตัวควบคุมแบบฟอร์มเมื่อมีการส่งแบบฟอร์ม โปรแกรมอ่านหน้าจอยังมีข้อความแจ้งข้อผิดพลาดด้วย
นอกจากนี้ คุณยังกำหนดข้อความแสดงข้อผิดพลาดของตนเองได้อีกด้วย โดยทำดังนี้
ตัวอย่างนี้ต้องเปลี่ยนแปลงเพิ่มเติมเพื่อเชื่อมต่อข้อความแสดงข้อผิดพลาดกับตัวควบคุมแบบฟอร์ม
วิธีง่ายๆ คือการใช้ aria-describedby
ในตัวควบคุมแบบฟอร์มที่ตรงกับ id ในองค์ประกอบของข้อความแสดงข้อผิดพลาด
จากนั้นใช้ aria-live="assertive" สำหรับข้อความแสดงข้อผิดพลาด
ภูมิภาคแบบสดของ ARIA จะประกาศข้อผิดพลาดแก่ผู้ใช้โปรแกรมอ่านหน้าจอในขณะที่แสดงข้อผิดพลาด
ปัญหาของวิธีนี้สำหรับฟอร์มที่มีหลายฟิลด์
คือ aria-live มักจะแจ้งเฉพาะข้อผิดพลาดแรกในกรณีที่มีข้อผิดพลาดหลายรายการ
ตามที่อธิบายไว้ในบทความนี้เกี่ยวกับประกาศของ aria-live หลายรายการเกี่ยวกับการดําเนินการเดียวกัน คุณสามารถสร้างข้อความเดียวโดยการเชื่อมโยงข้อผิดพลาดทั้งหมดเข้าด้วยกัน อีกวิธีหนึ่งคือการประกาศว่ามีข้อผิดพลาด จากนั้นประกาศข้อผิดพลาดแต่ละรายการเมื่อโฟกัสที่ช่องนั้นอยู่
ตรวจสอบว่าผู้ใช้จดจำข้อผิดพลาด
บางครั้งนักออกแบบลงสี
เป็นสีแดงซึ่งเป็นสถานะที่ไม่ถูกต้อง
โดยใช้คลาสเทียม :invalid
แต่ในการสื่อสารข้อผิดพลาดหรือความสำเร็จ
คุณไม่ควรใช้แค่สีเพียงอย่างเดียว
สำหรับผู้ที่ตาบอดสีแดง/เขียว
ขอบสีเขียวและสีแดงดูเกือบจะเหมือนกัน
คุณไม่สามารถทราบได้ว่าข้อความเกี่ยวข้องกับข้อผิดพลาดหรือไม่
นอกเหนือจากการใช้สีแล้ว ให้ใช้ไอคอนหรือใส่คำนำหน้าข้อความแสดงข้อผิดพลาดด้วยประเภทข้อผิดพลาด
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
ช่วยผู้ใช้ไปยังส่วนต่างๆ ของแบบฟอร์ม
คุณเปลี่ยนลำดับภาพของการควบคุมแบบฟอร์มได้ด้วย CSS การยกเลิกการเชื่อมต่อระหว่างลำดับภาพและการนำทางด้วยแป้นพิมพ์ (ลำดับ DOM) เป็นปัญหาต่อโปรแกรมอ่านหน้าจอและผู้ใช้แป้นพิมพ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีตรวจสอบว่า ลำดับภาพบนหน้าเว็บจะเป็นไปตามลำดับ DOM
ช่วยให้ผู้ใช้ระบุตัวควบคุมแบบฟอร์มที่โฟกัสอยู่ในปัจจุบัน
ใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ
แบบฟอร์มนี้
คุณรู้หรือไม่ว่าการจัดรูปแบบของการควบคุมแบบฟอร์มมีการเปลี่ยนแปลงเมื่อเปิดใช้งาน
นี่คือรูปแบบโฟกัสเริ่มต้น
คุณสามารถลบล้าง
:focus คลาส Pseudo ของ CSS
ไม่ว่าคุณจะใช้สไตล์ใดใน :focus
ตรวจสอบให้แน่ใจเสมอว่าคุณสามารถมองเห็นความแตกต่างของภาพระหว่างสถานะเริ่มต้นกับสถานะโฟกัสได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ เพื่อออกแบบตัวชี้วัดโฟกัส
ตรวจสอบว่าแบบฟอร์มใช้งานได้
คุณสามารถระบุปัญหาที่พบได้ทั่วไปหลายอย่างได้โดยการกรอกแบบฟอร์มด้วยอุปกรณ์ต่างๆ ใช้เฉพาะแป้นพิมพ์ ใช้โปรแกรมอ่านหน้าจอ (เช่น NVDA ใน Windows หรือ VoiceOver บน Mac) หรือซูมหน้าเว็บเป็น 200% ทดสอบแบบฟอร์มของคุณ บนแพลตฟอร์มต่างๆ อยู่เสมอ โดยเฉพาะอย่างยิ่งอุปกรณ์หรือการตั้งค่าที่คุณไม่ได้ใช้ทุกวัน คุณรู้จักคนใช้โปรแกรมอ่านหน้าจอไหม หรือผู้ที่ใช้ซอฟต์แวร์ขยายข้อความ ขอให้พวกเขากรอกแบบฟอร์มของคุณ รีวิวการช่วยเหลือพิเศษนั้นดีเยี่ยม ส่วนการทดสอบกับผู้ใช้จริงนั้นดียิ่งกว่า
ดูข้อมูลเพิ่มเติมเกี่ยวกับการ การตรวจสอบการช่วยเหลือพิเศษ และวิธีทดสอบกับผู้ใช้จริง