Accessibility

Accessibility (a11y) หมายถึงการออกแบบให้ทุกคนสามารถใช้ผลิตภัณฑ์ของคุณได้ — คนที่ใช้คีย์บอร์ดแทน mouse คนที่ใช้ screen readers คนที่มีสายตาเลือนราง คนตาบอดสี หรือคนที่ใช้การเชื่อมต่ออินเทอร์เน็ตช้า นี่ไม่ใช่เรื่องที่เฉพาะกลุ่ม: ประมาณหนึ่งในสี่ของผู้ใหญ่มีความพิการในบางรูปแบบ และการออกแบบที่เข้าถึงได้คือการออกแบบที่ดี

ข่าวดี: ชัยชนะเชิงปฏิบัติส่วนใหญ่ไม่ยาก แค่ต้องสร้างนิสัยให้นึกถึงเรื่องนี้ไว้เสมอ

Alt text สำหรับรูปภาพ

Screen readers อ่านออกเสียงรูปภาพโดยอ่าน attribute alt หากไม่มี ผู้ใช้ screen reader จะไม่ได้ยินอะไรเลยหรือได้ยินชื่อไฟล์ยาวๆ ที่เข้าใจยาก

<!-- ไม่ดี -->
<img src="hero.jpg" />

<!-- ดี -->
<img src="hero.jpg" alt="A designer sketching wireframes on paper" />

กฎ: อธิบายว่ารูปภาพแสดงอะไรและทำไมถึงสำคัญในบริบทนั้น สำหรับรูปภาพที่ใช้ตกแต่ง (เท็กเจอร์พื้นหลัง ตัวแบ่งที่ใช้เฉพาะภาพ) ให้ใช้ alt="" — นั่นบอก screen reader ให้ข้ามไป

Color contrast

WCAG (Web Content Accessibility Guidelines) กำหนด contrast ratio ขั้นต่ำ:

4.5:1 — body text ปกติ (ต่ำกว่า 18px หรือ 14px bold)
3:1 — ข้อความขนาดใหญ่ (18px+ regular, 14px+ bold) UI components ไอคอน

ใน Figma ใช้ Contrast plugin หรือตรวจสอบ contrast ใน Design > Inspect ปุ่มม่วง #7C3AED ที่มีข้อความสีขาวผ่านที่ขนาดใหญ่ แต่ต้องตรวจสอบข้อความขนาดเล็กด้วย

Labels สำหรับ form inputs

ทุก form input ต้องมี <label> ที่มองเห็นได้และเชื่อมกับ input ข้อความ placeholder ไม่ใช่ label — เพราะหายไปเมื่อผู้ใช้พิมพ์ แถม contrast ยังต่ำ

<!-- ไม่ดี: ไม่มี label -->
<input type="email" placeholder="Email address" />

<!-- ดี: label ที่ถูกต้อง -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="[email protected]" />

Focus states

ผู้ใช้ที่ navigate ด้วยคีย์บอร์ดต้องเห็นว่า element ใดที่กำลัง focused อยู่ browser มี outline เริ่มต้น แต่ดีไซเนอร์หลายคนลบ outline นั้นออกด้วย outline: none — ทำให้ keyboard navigation พัง

คง focus ให้มองเห็นได้ style ให้เข้ากับ brand แทนที่จะลบออก:

.btn:focus-visible {
  outline: 3px solid #7C3AED;
  outline-offset: 2px;
}

Semantic structure

ใช้ heading elements (<h1> ถึง <h6>) สำหรับ hierarchy — ไม่ใช่สำหรับขนาด Screen readers ใช้ headings ให้ผู้ใช้ข้ามไปรอบๆ เพจ เหมือน table of contents เพจควรมี <h1> เดียว และ headings ควร nest อย่างมีตรรกะ

ใช้ landmark elements ด้วย: <main>, <nav>, <header>, <footer>, <aside> ช่วยให้ผู้ใช้ screen reader ข้ามไปที่เนื้อหาที่ต้องการได้โดยตรง

ไม่ควรตั้ง body text ต่ำกว่า 16px บนมือถือ สิ่งนี้สำคัญมาก — ข้อความเล็กบังคับให้ผู้ใช้ pinch-zoom ซึ่งทำให้ layout พังและสร้างประสบการณ์ที่น่าหงุดหงิด

ฟอร์มที่เข้าถึงได้ดี

ฟอร์มด้านล่างแสดง labeled inputs, contrast ที่ถูกต้อง และ focus ring ที่มี style แล้ว กด Tab ผ่าน fields เพื่อดู focus indicator

<form class="contact-form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="input" type="text" id="name" name="name" placeholder="Alex Chen" />
  </div>
  <div class="field">
    <label class="label" for="email">Email address</label>
    <input class="input" type="email" id="email" name="email" placeholder="you@example.com" />
  </div>
  <div class="field">
    <label class="label" for="message">Message</label>
    <textarea class="input" id="message" name="message" rows="3" placeholder="Tell me about your project..."></textarea>
  </div>
  <button class="btn" type="submit">Send message</button>
</form>

กด Tab ผ่านฟอร์มโดยใช้คีย์บอร์ดเท่านั้น แต่ละ field ควรแสดง outline สีม่วงชัดเจนเมื่อ focused นี่คือสิ่งที่ผู้ใช้ที่ใช้คีย์บอร์ดเท่านั้นต้องพึ่งพา

💡 Accessibility คือมิติคุณภาพ ไม่ใช่สิ่งที่เพิ่มทีหลัง

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

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ลบ focus outline ด้วย outline: none เพื่อความสวยงามโดยไม่ใส่ focus style อื่นแทน ทำให้ keyboard user ใช้งานไม่ได้
ลืม alt text ให้รูปที่มีความหมาย
ใช้สีที่ contrast ไม่พอตาม WCAG

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “หน้าที่สวยและ contrast ดูโอเค” แต่ developer ต้องตรวจสอบ contrast ratio จริงตาม WCAG, เขียน alt text ที่มีความหมาย, และเทสต์ด้วย keyboard/screen reader จริง

💡 ตัวอย่างจากของจริง

gov.uk และ BBC ออกแบบทุกหน้าให้ผ่านมาตรฐาน accessibility เพราะเป็นข้อบังคับทางกฎหมายสำหรับหน่วยงานรัฐ ทำให้กลายเป็นต้นแบบของเว็บที่ accessible จริง