แบบฟอร์มที่คุณสร้างมีไว้สำหรับบุคคล ผู้คนใช้อุปกรณ์ที่แตกต่างกัน บางคนใช้เมาส์ อุปกรณ์ระบบสัมผัส บางแป้นพิมพ์ ใช้อุปกรณ์ที่ควบคุมด้วยการเคลื่อนไหวของดวงตา บางคนใช้โปรแกรมอ่านหน้าจอ หน้าจอขนาดเล็ก บางโปรแกรมใช้ซอฟต์แวร์ขยายข้อความ ทุกคนต้องการใช้แบบฟอร์มของคุณ ดูวิธีทำให้แบบฟอร์มทุกคนเข้าถึงและใช้งานได้
ตรวจสอบว่าผู้ใช้เข้าใจวัตถุประสงค์ของช่องแบบฟอร์ม
มีตัวควบคุมแบบฟอร์มมากมายให้คุณเลือก
สิ่งที่ทุกคนมีเหมือนกันคืออะไร
ตัวควบคุมแบบฟอร์มทุกรายการต้องมีองค์ประกอบ <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 กับข้อความแสดงข้อผิดพลาดที่มีค่าเดียวกันเพื่อเชื่อมต่อทั้งสองเข้าด้วยกัน
ช่วยให้ผู้ใช้พบข้อความแสดงข้อผิดพลาดสำหรับการควบคุมแบบฟอร์ม
ในโมดูลก่อนหน้าเกี่ยวกับการตรวจสอบ คุณได้เรียนรู้วิธีแสดงข้อความแสดงข้อผิดพลาดในกรณีที่มีการป้อนข้อมูลไม่ถูกต้อง
<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 หลายรายการเกี่ยวกับการดําเนินการเดียวกัน คุณสามารถสร้างข้อความเดียวได้โดยการเชื่อมโยงข้อผิดพลาดทั้งหมดเข้าด้วยกัน อีกวิธีหนึ่งคือการประกาศว่ามีข้อผิดพลาด แล้วแจ้งข้อผิดพลาดแต่ละรายการเมื่อโฟกัสที่ช่องนั้น
ตรวจสอบว่าผู้ใช้จดจำข้อผิดพลาดได้
บางครั้งนักออกแบบจะเติมสีแดงสถานะที่ไม่ถูกต้อง
โดยใช้คลาส Pseudo-Class :invalid
อย่างไรก็ตาม หากต้องการสื่อสารถึงข้อผิดพลาดหรือความสำเร็จ
คุณไม่ควรพึ่งสีเพียงอย่างเดียว
สำหรับผู้ที่ตาบอดสีเขียว/แดง
ขอบสีเขียวและสีแดงจะดูแทบจะเหมือนกัน
เราไม่สามารถดูได้เลยว่าข้อความนั้นเกี่ยวข้องกับข้อผิดพลาดหรือไม่
นอกเหนือจากสี ให้ใช้ไอคอนหรือขึ้นต้นข้อความแสดงข้อผิดพลาดด้วยประเภทข้อผิดพลาด
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของแบบฟอร์ม
คุณสามารถเปลี่ยนลำดับภาพของตัวควบคุมแบบฟอร์มด้วย CSS ได้ การไม่เรียงลำดับภาพและการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ (ลำดับ DOM) เป็นปัญหาสำหรับผู้ใช้โปรแกรมอ่านหน้าจอและแป้นพิมพ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีตรวจสอบว่าลำดับภาพในหน้าเว็บเป็นไปตามลำดับ DOM
ช่วยให้ผู้ใช้ระบุตัวควบคุมแบบฟอร์มที่โฟกัสอยู่ในปัจจุบัน
ใช้แป้นพิมพ์เพื่อไปยังแบบฟอร์มนี้
คุณทราบหรือไม่ว่าการจัดรูปแบบของตัวควบคุมแบบฟอร์มมีการเปลี่ยนแปลงเมื่อเริ่มใช้งาน
นี่คือรูปแบบโฟกัสเริ่มต้น
ซึ่งลบล้างได้ด้วยคลาส Pseudo-class ของ :focus
ไม่ว่าคุณจะใช้สไตล์ใดก็ตามใน :focus
โปรดดูความแตกต่างของภาพระหว่างสถานะเริ่มต้นและสถานะโฟกัสเสมอ
ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบตัวบ่งชี้โฟกัส
ตรวจสอบว่าแบบฟอร์มของคุณใช้งานได้
คุณสามารถระบุปัญหาที่พบได้ทั่วไปจำนวนมากโดยการกรอกแบบฟอร์มด้วยอุปกรณ์ที่ต่างกัน ใช้เฉพาะแป้นพิมพ์ ใช้โปรแกรมอ่านหน้าจอ (เช่น NVDA ใน Windows หรือ VoiceOver ใน Mac) หรือซูมหน้าเว็บเป็น 200% ทดสอบแบบฟอร์มในแพลตฟอร์มต่างๆ เสมอ โดยเฉพาะอุปกรณ์หรือการตั้งค่าที่คุณไม่ได้ใช้ทุกวัน คุณรู้จักผู้ที่ใช้โปรแกรมอ่านหน้าจอ หรือผู้ที่ใช้ซอฟต์แวร์ขยายข้อความ ขอให้บุคคลนั้นกรอกแบบฟอร์มของคุณ รีวิวเกี่ยวกับการช่วยเหลือพิเศษนั้นยอดเยี่ยม ซึ่งการทดสอบกับผู้ใช้จริงจะดียิ่งกว่า
ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำการตรวจสอบการช่วยเหลือพิเศษและวิธีทดสอบกับผู้ใช้จริง