กลับไปหน้า Design
ทริคDesign

Accessibility Basics

ความต่างของสี (contrast) ให้พอ ขนาดแตะนิ้วได้ และมีข้อความทางเลือกของรูป

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Accessibility Basics คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนเริ่มต้น

ใช้เมื่อไหร่

ตัวอักษรสีจางบนพื้นจาง อ่านยากในที่แสงจ้า

อ่านแล้วทำอะไรต่อ

สถานะ 'ปฏิเสธ' ใช้สีแดงพร้อมไอคอนกากบาทและข้อความ ไม่พึ่งสีอย่างเดียว คนตาบอดสีก็แยกออก และ contrast ผ่าน 4.5:1 จึงอ่านได้ในที่แสงจ้า

ใช้ตอนไหน?

  • ตัวอักษรสีจางบนพื้นจาง อ่านยากในที่แสงจ้า
  • ปุ่มหรือลิงก์เล็กเกินกดยากบนมือถือ
  • มีรูปหรือไอคอนที่สื่อความหมายแต่ไม่มีข้อความบรรยาย

ความหมาย

พื้นฐาน accessibility (การเข้าถึงได้) คือการออกแบบให้ทุกคนใช้งานได้ รวมถึงคนสายตาเลือนราง ตาบอดสี หรือใช้คีย์บอร์ดแทนเมาส์ หลักง่ายๆ คือ ใช้ contrast (ความต่างของสีตัวอักษรกับพื้นหลัง) ให้พอ ปุ่มใหญ่พอแตะนิ้วได้ และใส่ alt text (ข้อความบรรยายรูปสำหรับโปรแกรมอ่านหน้าจอ)

เกณฑ์ขั้นต่ำที่ควรผ่าน

ตั้ง contrast ตัวอักษรปกติให้ถึงอัตราส่วน 4.5:1 ตามเกณฑ์ WCAG ทำพื้นที่แตะ (touch target) ให้กว้างพอ ใส่ alt text ให้รูปที่มีความหมาย และอย่าสื่อสารด้วยสีอย่างเดียว

contrast ตัวอักษรปกติ: ≥ 4.5:1 (WCAG AA)
ตัวอักษรใหญ่ (≥24px): ≥ 3:1
touch target: กว้างพอให้แตะไม่พลาด
รูปมีความหมาย: ใส่ alt text เสมอ
สถานะ error: ไม่ใช้สีแดงอย่างเดียว เพิ่มไอคอน/ข้อความ

ตัวอย่างการใช้

ป้ายสถานะคำขอ

สถานะ 'ปฏิเสธ' ใช้สีแดงพร้อมไอคอนกากบาทและข้อความ ไม่พึ่งสีอย่างเดียว คนตาบอดสีก็แยกออก และ contrast ผ่าน 4.5:1 จึงอ่านได้ในที่แสงจ้า