นักพัฒนาสร้าง "Drunk CSS" เพื่อจำลองประสบการณ์ผู้ใช้ที่มีความบกพร่องและกระตุ้นการอภิปรายเรื่องการเข้าถึง

ทีมชุมชน BigGo
นักพัฒนาสร้าง "Drunk CSS" เพื่อจำลองประสบการณ์ผู้ใช้ที่มีความบกพร่องและกระตุ้นการอภิปรายเรื่องการเข้าถึง

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

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

การใช้งานทางเทคนิคทำให้เกิดคำถามเรื่องการออกแบบ

การใช้งาน CSS ใช้เทคนิคที่ชาญฉลาดหลายอย่างเพื่อสร้างประสบการณ์ที่มีความบกพร่อง การเรนเดอร์ฟอนต์กำหนดเป้าหมายอักขระเฉพาะโดยใช้ช่วง unicode ทำให้สระตัวเล็กปรากฏในแบบอักษรที่แตกต่างกันในขณะที่ส่วนที่เหลือใช้ฟอนต์ cursive องค์ประกอบภาพถูกหมุนและเอียงแบบสุ่มโดยใช้ nth-child selectors ในขณะที่ทั้งหน้าได้รับฟิลเตอร์เบลอและความอิ่มตัวของสี ลิงก์กลายเป็นเกือบเป็นไปไม่ได้ที่จะคลิกเมื่อมันเด้งขึ้นลงอย่างต่อเนื่อง

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

เทคนิค CSS ที่ใช้ใน Drunk Mode:

  • การจัดการฟอนต์โดยใช้ unicode ranges สำหรับสระตัวเล็ก (U+61, U+65, U+69, U+6F, U+75)
  • การหมุนองค์ประกอบโดยใช้ nth-child selectors (รูปแบบ 3n, 5n, 7n)
  • ฟิลเตอร์ภาพ: เบลอ 1px และความอิ่มตัวของสี 2.5 เท่า
  • ลิงก์เด้งแบบเคลื่อนไหวที่มีระยะเวลา 4 วินาที
  • รูปแบบฟอนต์เอียงที่ -12 องศา
  • ขนาดตัวอักษรแรกลดลงเหลือ 0.5em

การทดสอบการเข้าถึงกระตุ้นการถกเถียงในวงกว้าง

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

การสวมแว่นตา Glaucoma Goggles จะให้ความคิดเกี่ยวกับความบกพร่องทางสายตาเป็นอย่างไร แต่มันจะไม่ให้ประสบการณ์ของการใช้ชีวิตแบบนั้นเป็นเดือนหรือปี

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

ความกังวลของชุมชนเกี่ยวกับ Drunk CSS :

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

ประสบการณ์มือถือเผยให้เห็นความท้าทายในการใช้งาน

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

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

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

อ้างอิง: Drunk CSS