ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
AA
ความต่างสีผ่านมาตรฐาน7.2 : 1
44
พื้นที่สัมผัสขั้นต่ำ44 × 44 px
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- ทุกขั้นตอนของการออกแบบ พัฒนา ทดสอบ และส่งมอบ
- ใช้ checklist แทนการทดสอบกับผู้ใช้เทคโนโลยีช่วยเหลือ
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Perceivable
ข้อมูลมีหลายช่องทางและ contrast เพียงพอ
Operable
ทุกงานทำได้ด้วยคีย์บอร์ดและเป้าสัมผัสเหมาะสม
Understandable
ภาษา ลำดับ และข้อผิดพลาดคาดเดาได้
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
Focus
ลำดับสมเหตุผลและตัวชี้ focus มองเห็นเสมอ
Zoom & reflow
ไม่มีข้อมูลหรือการกระทำหายที่ 200–400%
Motion
เคารพ reduced motion และไม่มีแสงกระพริบอันตราย
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- ทดสอบ keyboard, screen reader, zoom และ contrast ก่อนปล่อย
- ลบ focus outline หรือใช้สีเพียงอย่างเดียว
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- มาตรฐาน
- WCAG 2.2 AA
- พื้นที่กด
- ≥ 44×44px