借個機會讚一讚幫政府做疫苗預約網站的公司，有考慮到色覺辨識障礙人士的需要。

做數據呈現，特別是公營部門，其中一個考慮是 universal access：要讓所有人都可以看到你想呈現的東西。因為數據呈現很多時候都是顏色主導，對色覺辨識障礙人士是一個問題。據稱華人社會就有百分之七是紅綠色盲的，不能忽視。

政府的疫苗預約網站用了紅橙綠三色來顯示還有多少預約時段可以選擇，本身是個好設計。這些顏色讓人想起紅綠燈，很易明白。但對於色覺辨識障礙人士來說，就麻煩了。我這兒特別模擬了綠色盲 Deuteranopia 的人會看到的情況，三種顏色之間的差別會變得相對沒有那麼明顯。

這時候，就要出動數據呈現的其中一個技巧：redundancy，即是同一件事用多於一種方法表達，保證你看得到。除了紅橙綠外，網站相對應用上三角形（已滿）、正方型（少量名額），和圓型（尚有名額），這樣色弱者也可以分得出了。平常三角形在日常生活中也代表注意，圓形代表圓滿，這些形狀在此也選得很對。

感謝設計人員在這些最細微的地方下了功夫。

———
想學整數據圖、懶人包？「看見數據」網上課程現已啟動！
立即登入： https://www.liberals.academy/

🔥 "อยากรู้ไหม .. ว่าถ้าเรามีปัญหาด้านสายตา จะมองเห็นเว็บนี้เป็นไปในรูปแบบใด !?"
.
หลายครั้งเราเข้าเว็บ หรือ ออกแบบเว็บก็อาจจะทำตามกระบวนการ แต่เราอาจจะลืมคนที่สายตามองเห็นไม่ชัด จนถึง ตาบอดสีไปแล้วหรือเปล่านะ ?
.
ดังนั้นแล้วในวันนี้เราจะมาจำลองดูกันว่า
.
"เฮ้ยย เจ้าเว็บที่เราเข้าอยู่นี่ ที่เรากำลังทำอยู่นี่ มันออกแบบมาเพื่อ 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 - สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน