วิธีสร้างเว็บฟอร์มที่เข้าถึงได้

Sep 12, 2025
วิธีการ

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

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

กำลังมองหาคำแนะนำเพิ่มเติม? เรามีคุณปกคลุมไปด้วยโพสต์ในหัวข้อจาก เว็บโฮสติ้ง ถึง การจัดเก็บเมฆ .

  • ซอฟต์แวร์ทดสอบผู้ใช้ที่ดีที่สุด 13 ชิ้น

ต่อไปนี้เป็นคำถามที่คุณควรพิจารณาเมื่อสร้างแบบฟอร์ม:

  • มีปัญหาอะไรที่มีความบกพร่องทางสายตามีการใช้แบบฟอร์มของฉัน
  • ผู้ใช้มีข้อบ่งชี้ที่ชัดเจนเกี่ยวกับข้อมูลที่คาดว่าจะป้อนข้อมูลหรือไม่?
  • แบบฟอร์มใช้งานง่าย - ผู้ใช้จะสามารถเข้าใจได้อย่างรวดเร็วหรือไม่?
  • ฉันสามารถใช้แป้นพิมพ์เพื่อกรอกแบบฟอร์มได้หรือไม่?

วิธีการสร้างแบบฟอร์มการสมัครสมาชิกขั้นพื้นฐาน

ฉันให้รหัสเริ่มต้นแก่คุณเพื่อช่วยให้คุณก้าวไปข้างหน้า ดี เริ่มต้นด้วยสิ่งนี้ และในที่สุด ไปถึงสิ่งนี้ .

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

เริ่มต้นด้วยการเชื่อมต่อ & lt; อินพุต & gt; องค์ประกอบตามลำดับของพวกเขา & lt; ฉลาก & gt; s. เราทำสิ่งนี้ด้วยการให้ & lt; อินพุต & gt; ID และการใช้งานที่เป็นแอตทริบิวต์สำหรับ & lt; ฉลาก & gt; . เราสามารถใช้ "ชื่อ" และ "อีเมล" สำหรับสิ่งเหล่านี้และเราได้ทำสองสิ่งแล้ว:

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

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

เราต้องการให้ผู้ใช้ของเรามีความคิดที่ดีเกี่ยวกับข้อมูลประเภทใด (และการจัดรูปแบบ) ที่เราคาดหวังจากพวกเขา ที่นี่มันค่อนข้างชัดเจน แต่นั่นไม่ใช่กรณีเสมอไป โดยทั่วไปแล้วมันเป็นแนวปฏิบัติที่ดีที่จะให้ฉลากที่สามารถดูได้เสมอและตัวยึดตำแหน่งที่สื่อสารกับอินพุตที่คาดหวัง ซึ่งหมายความว่าไม่ได้ใช้ ตัวยึดตำแหน่ง แอตทริบิวต์เป็นฉลากภาพสำหรับอินพุตที่ฉลากไม่สามารถดูได้เมื่อผู้ใช้เริ่มพิมพ์ นี่เป็นวิธีปฏิบัติที่ได้รับความนิยมสำหรับนักพัฒนาจำนวนมากและต้องเข้านอนครั้งเดียวและสำหรับทุกคน เราสามารถมอบตัวยึดตำแหน่งของ "อดีตเจนดิออน" สำหรับชื่อและ "ex. [email protected]" สำหรับอีเมล

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

  • 14 วิธีง่ายๆในการทำให้เว็บไซต์ของคุณสามารถเข้าถึงได้มากขึ้น

เพิ่มสไตล์โฟกัสไปยังตัวเลือกอินพุต

สุดท้ายเราต้องเพิ่มสไตล์โฟกัสรอบ ๆ องค์ประกอบปุ่ม สิ่งนี้มักถูกมองข้าม แต่สามารถช่วยเหลือผู้ใช้แป้นพิมพ์เท่านั้นที่รู้ว่าพวกเขาอยู่ที่ไหน เราต้องเพิ่มสิ่งนี้ & amp; :: Moz-Focus-Innner บิตเพื่อกำจัดสไตล์เริ่มต้นใน Firefox (คุณอาจต้องการบันทึกตัวอย่างนั้นสำหรับการใช้งานในอนาคต)

เช่นเดียวกับที่เรามีแบบฟอร์มการสมัครสมาชิกขั้นพื้นฐานคุณสามารถภาคภูมิใจและปรับปรุง เนื่องจากเราใช้ความหมายที่ดีแบบฟอร์มสามารถเข้าถึงได้ผ่านแป้นพิมพ์เท่านั้น (ลองใช้แท็บและสเปซบาร์ / ป้อนคีย์) สีที่ใช้สำหรับปุ่มเป็นอัตราส่วนสีของ 11.51 ประชุมมาตรฐาน AAA สำหรับ WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) เราได้ให้ฉลากสำหรับผู้ใช้ภาพและผู้ใช้อ่านหน้าจอรวมถึงสถานะโฟกัสที่มีสไตล์สำหรับเพื่อนที่ใช้แป้นพิมพ์ของเรา ในที่สุดให้สังเกตว่าตัวอักษรถูกตั้งค่าเป็น 18px ในร่างกาย สิ่งนี้ทำให้รูปแบบของเราสามารถอ่านได้มากขึ้น (คุณควรพยายามอยู่เหนือ 14px)

การออกแบบและสร้างด้วยการเข้าถึงในใจใช้เวลาปฏิบัติ แต่คุณจะเป็นนักพัฒนาที่ดีกว่าสำหรับมันและช่วยให้เว็บเป็นสถานที่ที่ดีกว่า

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket 

สร้างขึ้นการประชุมที่ได้รับรางวัลสำหรับนักออกแบบเว็บไซต์กลับไปที่ NYC เมื่อวันที่ 24-25 เมษายน! คลิกที่ภาพเพื่อจองตั๋ว

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 316 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 316 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

  • การเข้าถึงการเข้าถึงล้มเหลวด้วยเครื่องมือฟรีนี้
  • 50 เครื่องมือใหม่ที่ยอดเยี่ยมสำหรับนักพัฒนาในปี 2019
  • การออกแบบของคุณสามารถเข้าถึงได้อย่างไร

วิธีการ - บทความยอดนิยม

การตั้งค่าความเป็นส่วนตัวของ Facebook: วิธีการเก็บโปรไฟล์ส่วนตัวของคุณ

วิธีการ Sep 12, 2025

(เครดิตภาพ: Alex Blake / Facebook) การตั้งค่าความเป็นส่ว�..

วิธีการถ่ายภาพหน้าจอบน Mac

วิธีการ Sep 12, 2025

(เครดิตภาพ: Creative Bloq) หากคุณต้องการจับภาพทั้งห..

วิธีการวาดหมาป่า

วิธีการ Sep 12, 2025

หากคุณเชี่ยวชาญ วิธีการวาดสุนัข คุณจะได้รับการอภ..

เริ่มต้นด้วย Redux Thunk

วิธีการ Sep 12, 2025

รัฐเป็นส่วนใหญ่ของแอปพลิเคชั่นตอบสนองซึ่งเป..

Speed ​​Sculpt Creature ใน ZBrush

วิธีการ Sep 12, 2025

เมื่อแนวทางการคิดสร้างสิ่งมีชีวิตใน ZBrush นำเสน�..

วิธีการเลือกด้วยเครื่องมือ Lasso ของ Photoshop

วิธีการ Sep 12, 2025

การเลือกเป็นหนึ่งในภารกิจที่สำคัญที่สุดที่คุณจะได้เรียนรู้ที่จะ�..

วิธีการละลายวัตถุ 3 มิติด้วย Three.js

วิธีการ Sep 12, 2025

เว็บที่เรารู้ว่ามันมีการเปลี่ยนแปลงและพัฒนา..

ไปจับด้วยเทคนิคการวาดภาพเปียกแบบเปียก

วิธีการ Sep 12, 2025

เปียกชื้นเป็น เทคนิคการวาดภาพ ที่มักจะท�..

หมวดหมู่