🔥 "อยากรู้ไหม .. ว่าถ้าเรามีปัญหาด้านสายตา จะมองเห็นเว็บนี้เป็นไปในรูปแบบใด !?"
.
หลายครั้งเราเข้าเว็บ หรือ ออกแบบเว็บก็อาจจะทำตามกระบวนการ แต่เราอาจจะลืมคนที่สายตามองเห็นไม่ชัด จนถึง ตาบอดสีไปแล้วหรือเปล่านะ ?
.
ดังนั้นแล้วในวันนี้เราจะมาจำลองดูกันว่า
.
"เฮ้ยย เจ้าเว็บที่เราเข้าอยู่นี่ ที่เรากำลังทำอยู่นี่ มันออกแบบมาเพื่อ Support ผู้เข้าชมเหล่านี้หรือไม่ ไปพร้อมกัน"
.
✅ วิธีการเข้าง่ายมากกกกกกกกก
.
1.แค่ไปที่ Chrome Dev Tools (Windows : กด Ctrl + Shift + C หรือ Mac : Cmd + Shift + C)
.
2.ไปที่เมนูเพิ่มเติมของ Chrome Dev Tool (ที่เป็น ... เรียงกันแนวตั้ง ดูได้จากภาพใต้ Comment)
.
3.เลือกไปที่ More Tools -> Rendering -> หาคำว่า Emulate vision deficiencies แล้วเลือกเปลี่ยนจาก No emulation เป็นรูปแบบที่เราอยากจำลองดังนี้
.
- Blurred vision (จำลองเป็นบุคคลที่มองเห็นเลือนลาง)
- Protanopia (จำลองเป็นบุคคลที่ตาบอดสีแดง เขียว)
- Deuteranopia (จำลองเป็นบุคคลที่ตาบอดสีเขียว)
- Tritanopia (จำลองเป็นบุคคลที่ตาบอดสีน้ำเงินและ เหลือง)
- Achromatopsia (จำลองเป็นบุคคลที่ตาบอดทุกสี)
.
🥰 "ซึ่งพอเราคลิกเลือกโหมดเรียบร้อย หน้าจอเว็บไซต์ก็จะเปลี่ยนไปตามที่เราจำลองนั่นเองง !"
.
เรื่องนี้สำคัญมาก ๆ นะ ถ้าใครอยากทำเว็บให้เป็นรูปแบบ Universal Design ที่ใคร ๆ ก็ใช้ได้จะต้องดูในเรื่องดังกล่าวด้วย
.
โดยเฉพาะเว็บไซต์เกี่ยวกับโครงสร้างพื้นฐาน สวัสดิการรัฐ ที่จำเป็นมาก ๆ ในเรื่องดังกล่าว <3
.
#borntoDev - สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
dev tool chrome 在 Chrome DevTools Protocol - GitHub Pages 的推薦與評價
The Chrome DevTools Protocol allows for tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink-based browsers. ... <看更多>