Accessibility (A11y) เบื้องต้น

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

ในบทนี้ เราจะมาเรียนรู้พื้นฐานที่สำคัญของการทำ Accessibility ใน HTML เพื่อให้เว็บไซต์ของคุณเป็นมิตรกับผู้ใช้งานทุกคน

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

หนึ่งในองค์ประกอบที่สำคัญที่สุดในการทำ Accessibility คือการใส่ alt text (alternative text) ให้กับรูปภาพทุกรูป alt text คือข้อความที่อธิบายเนื้อหาหรือจุดประสงค์ของรูปภาพ ซึ่งจะถูกแสดงผลในกรณีที่รูปภาพไม่สามารถโหลดได้ หรือเมื่อผู้ใช้งานใช้โปรแกรมอ่านหน้าจอ (screen reader)

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

สำหรับผู้ที่มองไม่เห็น: โปรแกรมอ่านหน้าจอจะอ่าน alt text ให้ผู้ใช้งานฟัง ทำให้พวกเขาสามารถเข้าใจเนื้อหาของรูปภาพได้
สำหรับผู้ที่รูปภาพไม่โหลด: หากรูปภาพไม่สามารถโหลดได้ alt text จะถูกแสดงผลแทน ทำให้ผู้ใช้งานยังคงเข้าใจเนื้อหาของหน้าเว็บได้
สำหรับ SEO: Search engine ใช้ alt text เพื่อทำความเข้าใจเนื้อหาของรูปภาพ ซึ่งส่งผลดีต่อการจัดอันดับ

วิธีการใส่ alt text:

<img src="logo.png" alt="โลโก้บริษัท ABC">

เคล็ดลับในการเขียน alt text ที่ดี:

กระชับและตรงประเด็น: เขียน alt text ให้สั้นและสื่อถึงเนื้อหาหลักของรูปภาพ
ให้ข้อมูลที่จำเป็น: หากรูปภาพมีข้อมูลสำคัญที่เกี่ยวข้องกับเนื้อหา ให้ใส่ข้อมูลนั้นลงใน alt text
หลีกเลี่ยงคำว่า "รูปภาพของ..." หรือ "ภาพของ...": โปรแกรมอ่านหน้าจอรู้ว่ามันกำลังอ่านรูปภาพอยู่แล้ว
สำหรับรูปภาพตกแต่ง: หากรูปภาพไม่มีเนื้อหาสำคัญและมีไว้เพื่อตกแต่งเท่านั้น ให้ใส่ alt="" เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

ตัวอย่าง:

<!-- รูปภาพที่มีเนื้อหาสำคัญ -->
<img src="product.jpg" alt="เสื้อยืดสีน้ำเงิน ลายดอกไม้สีขาว">

<!-- รูปภาพที่เป็นลิงก์ -->
<a href="https://example.com">
  <img src="home.png" alt="กลับสู่หน้าหลัก">
</a>

<!-- รูปภาพตกแต่ง -->
<img src="background.png" alt="">

การใช้ ARIA Attributes

ARIA (Accessible Rich Internet Applications) เป็นชุดคุณสมบัติ (attributes) ที่ใช้เพื่อเพิ่มข้อมูลเชิงความหมาย (semantic information) ให้กับ HTML elements ทำให้โปรแกรมอ่านหน้าจอเข้าใจบทบาทและสถานะของ elements เหล่านั้นได้ดีขึ้น ARIA attributes มีประโยชน์อย่างยิ่งเมื่อคุณใช้ JavaScript เพื่อสร้าง interactive components ที่ HTML elements ปกติไม่สามารถสื่อความหมายได้เพียงพอ

ประเภทของ ARIA Attributes:

Roles: กำหนดบทบาทของ element เช่น role="button", role="navigation", role="alert"
States: กำหนดสถานะของ element เช่น aria-pressed="true", aria-expanded="false", aria-disabled="true"
Properties: กำหนดคุณสมบัติของ element เช่น aria-label="Close", aria-describedby="description", aria-required="true"

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

<!-- ปุ่มที่สร้างด้วย div -->
<div role="button" aria-label="เปิดเมนู" tabindex="0">
  เปิดเมนู
</div>

<!-- Accordion -->
<button aria-expanded="false" aria-controls="section1">
  Section 1
</button>
<div id="section1" role="region" aria-labelledby="section1-heading" hidden>
  <h2 id="section1-heading">Content of Section 1</h2>
  <p>This is the content of section 1.</p>
</div>

ข้อควรระวังในการใช้ ARIA Attributes:

อย่าใช้ ARIA Attributes ถ้า HTML elements ทำได้: ใช้ HTML elements ที่มีความหมายในตัวอยู่แล้ว (เช่น <button>, <nav>) แทนที่จะใช้ ARIA Attributes เพื่อกำหนดบทบาทเดียวกัน
อย่าขัดแย้งกับความหมายของ HTML elements: ARIA Attributes ควรเสริมความหมายของ HTML elements ไม่ใช่ขัดแย้งกับมัน
ตรวจสอบให้แน่ใจว่า ARIA Attributes ทำงานอย่างถูกต้อง: ทดสอบการใช้งาน ARIA Attributes ด้วยโปรแกรมอ่านหน้าจอเพื่อให้แน่ใจว่ามันทำงานตามที่คาดหวัง

การตรวจสอบ Accessibility

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

เครื่องมือตรวจสอบ Accessibility ที่แนะนำ:

Lighthouse (Google Chrome): เครื่องมือที่รวมอยู่ใน Google Chrome Developer Tools ซึ่งสามารถตรวจสอบ Accessibility, Performance, SEO และ Best Practices
WAVE (Web Accessibility Evaluation Tool): เครื่องมือออนไลน์ที่สามารถตรวจสอบ Accessibility ของหน้าเว็บได้
Axe DevTools: ส่วนขยายสำหรับ Chrome และ Firefox ที่สามารถตรวจสอบ Accessibility ได้
Screen Readers: โปรแกรมอ่านหน้าจอ เช่น NVDA (ฟรี), JAWS (เสียเงิน) และ VoiceOver (มาพร้อมกับ macOS) การทดสอบเว็บไซต์ของคุณด้วยโปรแกรมอ่านหน้าจอจริงจะช่วยให้คุณเข้าใจประสบการณ์ของผู้ใช้งานที่มองไม่เห็นได้ดีขึ้น

วิธีการตรวจสอบ Accessibility:

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

มาตรฐาน Accessibility:

WCAG (Web Content Accessibility Guidelines) คือมาตรฐานสากลสำหรับการทำ Accessibility ซึ่งกำหนดแนวทางในการสร้างเว็บไซต์ที่เข้าถึงได้ง่าย WCAG แบ่งออกเป็น 3 ระดับ: A, AA และ AAA โดย AAA เป็นระดับที่สูงสุด

สรุป:

การทำ Accessibility เป็นกระบวนการต่อเนื่องที่ต้องใส่ใจในทุกขั้นตอนของการพัฒนาเว็บไซต์ การเริ่มต้นด้วยพื้นฐานที่กล่าวมาในบทนี้ จะช่วยให้คุณสร้างเว็บไซต์ที่เป็นมิตรกับผู้ใช้งานทุกคน และสร้างประสบการณ์ที่ดีให้กับผู้ใช้งานทุกกลุ่ม

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการตรวจสอบ HTML Validation เพื่อให้แน่ใจว่าโค้ด HTML ของคุณถูกต้องตามมาตรฐาน