เจาะลึก CSS Reset: ความต่างของเว็บเมื่อใช้คีย์บอร์ดแทนเมาส์
ทดลองสร้างหน้าฟอร์ม 3 แบบด้วย CSS ต่างกัน หน้าตาเหมือนกันทุกประการเมื่อใช้เมาส์ แต่พฤติกรรมเปลี่ยนไปทันทีเมื่อกดปุ่ม Tab
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การทดสอบด้วยสายตาหรือเมาส์ไม่สามารถบอกความต่างของโค้ดได้ทั้งหมด
- หน้าฟอร์ม 3 แบบใช้ HTML ชุดเดียวกัน ต่างกันแค่การเขียน CSS เท่านั้น
- การกดปุ่ม Tab เผยให้เห็นการจัดการสถานะโฟกัสที่แตกต่างกันอย่างสิ้นเชิง
บทความจาก Dev.to ได้ทดลองเปรียบเทียบหน้าเว็บเพจรูปแบบฟอร์มตั้งค่าขนาดเล็ก โดยใช้โครงสร้าง HTML ชุดเดียวกันทั้งหมด แต่ปรับเปลี่ยนเฉพาะโค้ด CSS เพื่อทดสอบสมมติฐานเรื่องความต่างระหว่างการตกแต่งหน้าตา (decoration) และการสื่อสารการใช้งาน (affordance) ที่ระบบตรวจสอบด้วยสายตา (visual QA) มักมองไม่เห็น
ในการทดสอบนี้เวอร์ชันแรกคือค่าเริ่มต้นจากเบราว์เซอร์ (Pass One) ซึ่งหัวข้อดูเป็นหัวข้อ กรอบอินพุตมีเส้นขอบ และปุ่มดูคลิกได้โดยไม่ต้องแต่งเพิ่ม ที่สำคัญคือเมื่อกดปุ่ม Tab เพื่อใช้งาน ช่องกรอกอีเมล ช่องทำเครื่องหมาย ลิงก์ และปุ่ม จะแสดงวงแหวนโฟกัสรอบตัวให้อัตโนมัติ เพื่อนำทางผู้ใช้ไปทีละจุดโดยไม่ต้องเขียนโค้ดเพิ่ม
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อเข้าสู่เวอร์ชันที่สอง (Pass Two) ทีมทดลองได้ใส่ CSS Reset เข้าไป ซึ่งทำให้หน้าตาภายนอกเมื่อดูด้วยเมาส์ยังคงเหมือนเวอร์ชันแรกทุกประการจนระบบ visual QA จับความผิดปกติไม่ได้ แต่เมื่อลองกดปุ่ม Tab เพื่อใช้งานจริง ปรากฏว่าวงแหวนโฟกัสหายไปทั้งหมด ไม่มีการแจ้งตำแหน่งให้ผู้ใช้งานผ่านคีย์บอร์ดทราบเลย
การใช้งาน CSS Reset ทั่วไปมักมุ่งเน้นไปที่การล้างค่าเริ่มต้นของเบราว์เซอร์เพื่อให้หน้าตาทุกเบราว์เซอร์ตรงกัน แต่อาจเผลอลบการตั้งค่าด้านการเข้าถึง (accessibility) เช่น สถานะ focus ออกไปด้วย หากนักพัฒนาไม่กำหนดค่าชดเชยขึ้นมาใหม่ จะส่งผลกระทบโดยตรงต่อผู้ใช้งานที่ต้องพึ่งพาคีย์บอร์ดหรือโปรแกรมอ่านจอภาพในการท่องเว็บ
ในเวอร์ชันที่สาม (Pass Three) นักพัฒนาได้เพิ่มการกำหนดวงแหวนโฟกัสขึ้นมาใหม่ด้วยสีและน้ำหนักที่สอดคล้องกับระบบดีไซน์ของเว็บไซต์ ผลลัพธ์คือเมื่อกดปุ่ม Tab ระบบจะพาไปยังฟิลด์ต่างๆ ตามลำดับเดิม พร้อมแสดงผลวงแหวนโฟกัสที่ออกแบบไว้อย่างชัดเจน
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น