Web Accessibility คืออะไร?

Mac

24/08/2025

สำหรับคนที่มาอ่าน Blog นี้เป็น Blog แรก เราขอแนะนำให้อ่านบทความที่อยู่ในหัวข้อ อยากเป็น Frontend Developer ต้องรู้อะไรบ้าง? ก่อนนะครับเป็นหนึ่งใน Series Road to Frontend ที่จะช่วยให้คุณมีความรู้พื้นฐานที่จำเป็นสำหรับการเริ่มต้นเรียนรู้การพัฒนาเว็บไซต์

Web Accessibility คืออะไร? 🤔

Web Accessibility คือ การออกแบบและพัฒนาเว็บไซต์เพื่อให้ทุกคนสามารถเข้าถึงและใช้งานได้อย่างเท่าเทียมกัน โดยไม่ว่าจะเป็นคนพิการทางสายตา, การได้ยิน, การเคลื่อนไหว หรือมีความบกพร่องทางสติปัญญา ก็สามารถใช้งานเว็บไซต์ได้อย่างเต็มประสิทธิภาพ

ทำไมถึงสำคัญ?

• ขยายฐานผู้ใช้งาน: ทำให้เว็บไซต์ของคุณเข้าถึงกลุ่มผู้ใช้งานที่กว้างขึ้น
• ประสบการณ์ที่ดีสำหรับทุกคน: ไม่ใช่แค่คนพิการ แต่ยังรวมถึงผู้สูงอายุ หรือผู้ที่ใช้งานในสถานการณ์จำกัด เช่น แสงจ้า หรืออินเทอร์เน็ตช้า
• SEO: การทำเว็บไซต์ให้มี Accessibility ที่ดี ยังส่งผลดีต่อการทำ SEO (Search Engine Optimization) อีกด้วย

หัวใจหลักของ Accessibility ❤️

หลักการสำคัญของ Web Accessibility (หรือที่เรียกว่า POUR) มีดังนี้:

• Perceivable (การรับรู้): ผู้ใช้งานต้องสามารถรับรู้เนื้อหาบนเว็บไซต์ได้ เช่น การมี alt text สำหรับรูปภาพเพื่อให้โปรแกรมอ่านหน้าจอ (Screen Reader) สามารถอธิบายรูปภาพได้
• Operable (การใช้งาน): ผู้ใช้งานต้องสามารถใช้งานส่วนประกอบต่างๆ บนเว็บไซต์ได้ เช่น การควบคุมเว็บไซต์ด้วยคีย์บอร์ดเพียงอย่างเดียว
• Understandable (ความเข้าใจ): เนื้อหาและส่วนประกอบต่างๆ ต้องเข้าใจง่ายและคาดเดาได้
• Robust (ความแข็งแรง): เว็บไซต์ต้องสามารถทำงานได้บนเทคโนโลยีและอุปกรณ์ที่หลากหลาย

ตัวอย่าง Code ที่มีการใช้ Accessibility 💻

การใช้ ARIA และ HTML ที่ถูกต้อง

ARIA (Accessible Rich Internet Applications) ช่วยเพิ่มความหมายให้กับ HTML เพื่อให้เทคโนโลยีช่วยเหลือ (Assistive Technologies) เข้าใจได้ดียิ่งขึ้น แต่กฎข้อแรกคือ “อย่าใช้ ARIA ถ้าไม่จำเป็น” ให้ใช้ HTML semantic ที่ถูกต้องก่อนเสมอ

ตัวอย่างที่ไม่ดี:

<div role="button" tabindex="0">Click me</div>

ตัวอย่างที่ดี:

<button>Click me</button>

การใช้ <button> โดยตรงจะมาพร้อมกับการรองรับคีย์บอร์ดและสถานะต่างๆ ที่จำเป็นอยู่แล้ว

การสร้างฟอร์มที่เข้าถึงได้ (Accessible Forms)

การใช้ <label> เป็นสิ่งสำคัญมากในการสร้างฟอร์ม เพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอรู้ว่าช่องกรอกข้อมูลนั้นๆ คืออะไร

<label for="username">Username:</label>
<input type="text" id="username" name="username">

สีและความต่างของสี (Color and Contrast)

ความต่างของสีระหว่างข้อความและพื้นหลังมีความสำคัญมากสำหรับผู้ที่มีความบกพร่องทางการมองเห็น ควรมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ

ตัวอย่าง CSS:

body {
  background-color: #ffffff; /* White */
  color: #333333; /* Dark Gray */
}

การเข้าถึงรูปภาพ (Image Accessibility)

alt text หรือ Alternative text เป็นสิ่งจำเป็นสำหรับรูปภาพ เพราะมันคือคำอธิบายที่จะถูกอ่านโดย Screen Reader ทำให้ผู้พิการทางสายตาสามารถ “เข้าใจ” ได้ว่ารูปภาพนั้นคืออะไร

ตัวอย่างที่ดี: ถ้าเป็นรูปภาพที่มีข้อมูลสำคัญ

<img src="chart.png" alt="กราฟแท่งแสดงยอดขายรายไตรมาส Q1 ถึง Q4 ปี 2024">

ถ้าเป็นรูปภาพเพื่อการตกแต่ง: ถ้าเป็นรูปภาพที่ใช้ตกแต่งเฉยๆ ไม่มีข้อมูลสำคัญ ให้ใส่ alt เป็นค่าว่าง เพื่อให้ Screen Reader ข้ามไป

<img src="background-pattern.svg" alt="">

โครงสร้างเนื้อหา (Content Structure)

การใช้ Heading (<h1>, <h2>, <h3>, …) อย่างถูกต้องตามลำดับชั้น จะช่วยให้ผู้ใช้ Screen Reader สามารถสร้างแผนผังของหน้าเว็บในใจและข้ามไปอ่านในส่วนที่พวกเขาสนใจได้ง่ายขึ้น

• ใช้ <h1> เพียงครั้งเดียวสำหรับหัวข้อหลักของหน้า
• ใช้ <h2> สำหรับหัวข้อรอง และ <h3> สำหรับหัวข้อย่อยลงไปตามลำดับ อย่าข้ามลำดับ เช่น <h1> แล้วไป <h4> เลย

ตัวอย่างโครงสร้างที่ดี:

<h1>หัวข้อหลักของหน้าเว็บ</h1>
<p>เนื้อหาเกริ่นนำ...</p>
  <h2>หัวข้อรองที่ 1</h2>
  <p>เนื้อหาของหัวข้อรองที่ 1...</p>
    <h3>หัวข้อย่อย 1.1</h3>
    <p>เนื้อหา...</p>
  <h2>หัวข้อรองที่ 2</h2>
  <p>เนื้อหาของหัวข้อรองที่ 2...</p>

การใช้งานด้วยคีย์บอร์ด (Keyboard Focus)

ผู้ใช้งานที่ไม่สามารถใช้เมาส์ได้ จำเป็นต้องพึ่งพาคีย์บอร์ด (โดยเฉพาะปุ่ม Tab) ในการไปยังส่วนต่างๆ ของหน้าเว็บ เราจึงต้องมั่นใจว่าทุกส่วนที่สามารถโต้ตอบได้ (เช่น ลิงก์, ปุ่ม, ฟอร์ม) สามารถเข้าถึงและมองเห็นได้ชัดเจนเมื่อถูก focus

ตัวอย่างที่ไม่ดี: การลบเส้น outline ออกไปเลย ซึ่งทำให้ผู้ใช้คีย์บอร์ดไม่รู้ว่ากำลังเลือกส่วนไหนอยู่

/* Bad Practice */
:focus {
  outline: none;
}

ตัวอย่างที่ดี: หากไม่ชอบ outline แบบเดิมๆ ให้ทำการดีไซน์ focus state ขึ้นมาใหม่ที่มองเห็นได้ชัดเจน

/* Good Practice */
:focus {
  outline: 2px solid #005fcc; /* เพิ่มเส้นขอบสีน้ำเงินที่ชัดเจน */
  box-shadow: 0 0 5px rgba(0, 95, 204, 0.7); /* หรือเพิ่มเงาเรืองแสง */
}

การใช้ Landmark Elements

HTML5 ได้เพิ่ม elements ที่มีความหมายเชิงโครงสร้าง (Landmark) เข้ามาเพื่อช่วยแบ่งส่วนต่างๆ ของหน้าเว็บ ทำให้ผู้ใช้ Screen Reader เข้าใจและข้ามไปยังส่วนต่างๆ ได้อย่างรวดเร็ว

• <header>: ส่วนหัวของเว็บหรือ section
• <nav>: ส่วนเมนูนำทางหลัก
• <main>: ส่วนเนื้อหาหลักของหน้า (ควรมีแค่แท็กเดียว)
• <footer>: ส่วนท้ายของเว็บหรือ section
• <aside>: เนื้อหาด้านข้างที่เกี่ยวข้องกับเนื้อหาหลัก

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

<body>
  <header>
    <h1>ชื่อเว็บไซต์</h1>
    <nav>
      </nav>
  </header>

  <main>
    <h2>บทความหลัก</h2>
    <p>เนื้อหาต่างๆ...</p>
  </main>
  
  <aside>
    <h3>บทความที่เกี่ยวข้อง</h3>
    </aside>

  <footer>
    <p>&copy; 2024 Your Website</p>
  </footer>
</body>

แหล่งข้อมูลอ้างอิง:

• web.dev - Forms