การช่วยเหลือพิเศษ

แบบฟอร์มที่คุณสร้างมีไว้สำหรับบุคคล แต่ละคนใช้อุปกรณ์ไม่เหมือนกัน บางคนใช้เมาส์ อุปกรณ์ระบบสัมผัส บางแป้นพิมพ์ ที่ควบคุมโดยการเคลื่อนไหวของดวงตา บางคนใช้โปรแกรมอ่านหน้าจอ บางห้องเป็นหน้าจอขนาดเล็ก บางคนใช้ซอฟต์แวร์ขยายข้อความ ทุกคนต้องการใช้แบบฟอร์มของคุณ ดูวิธีทำให้แบบฟอร์มเข้าถึงและใช้งานได้สำหรับทุกคน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการ การตรวจสอบการช่วยเหลือพิเศษ และวิธีทดสอบกับผู้ใช้จริง

แหล่งข้อมูล