HTML Accessibility (A11y) ขั้นสูง

ในบทก่อนหน้า เราได้เรียนรู้เกี่ยวกับการใช้งาน HTML5 Drag and Drop API ซึ่งเป็นฟีเจอร์ที่ช่วยเพิ่มความน่าสนใจให้กับเว็บไซต์ ในบทนี้ เราจะมาเจาะลึกเรื่อง HTML Accessibility (A11y) ขั้นสูง เพื่อให้เว็บไซต์ของเราสามารถเข้าถึงได้ง่ายสำหรับผู้พิการ ซึ่งเป็นสิ่งสำคัญอย่างยิ่งในการสร้างเว็บไซต์ที่ครอบคลุมและเป็นมิตรต่อผู้ใช้งานทุกคน

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

การใช้ ARIA Attributes อย่างถูกต้อง

ARIA (Accessible Rich Internet Applications) เป็นชุดคุณลักษณะ (attributes) ที่ใช้ในการเพิ่มข้อมูลเชิงความหมายให้กับ HTML elements เพื่อให้ assistive technologies เช่น screen readers สามารถเข้าใจและสื่อสารเนื้อหาและฟังก์ชันการทำงานของเว็บไซต์ได้อย่างถูกต้องแม่นยำ การใช้ ARIA attributes อย่างถูกต้องเป็นหัวใจสำคัญของการทำ Accessibility ขั้นสูง

ARIA attributes สามารถแบ่งออกได้เป็น 3 ประเภทหลักๆ:

• Roles: กำหนดบทบาทของ element เช่น role="button", role="navigation", role="alert"
• States: ระบุสถานะปัจจุบันของ element เช่น aria-pressed="true" (ปุ่มถูกกด), aria-expanded="false" (ส่วนที่ขยายได้ถูกซ่อน)
• Properties: ให้ข้อมูลเพิ่มเติมเกี่ยวกับ element เช่น aria-label="Close" (คำอธิบายปุ่มปิด), aria-describedby="elementId" (คำอธิบายเพิ่มเติมอยู่ที่ element ที่มี ID นี้)

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

1. สร้างปุ่มที่กำหนดเอง (Custom Button):

<div tabindex="0" role="button" aria-label="Submit Form" onclick="submitForm()" onkeydown="handleKeyDown(event)">
  Submit
</div>

คำอธิบาย:

• tabindex="0": ทำให้ div สามารถ focus ได้ด้วยการกด Tab
• role="button": บอก assistive technologies ว่า div นี้ทำหน้าที่เป็นปุ่ม
• aria-label="Submit Form": ให้คำอธิบายเพิ่มเติมแก่ screen readers
• onclick="submitForm()": เรียกฟังก์ชันเมื่อคลิก
• onkeydown="handleKeyDown(event)": จัดการการกดปุ่ม Enter หรือ Spacebar เพื่อให้ทำงานเหมือนการคลิก

2. สร้าง Alert Message:

<div role="alert" aria-live="assertive">
  Error: Please fill in all required fields.
</div>

คำอธิบาย:

• role="alert": บอก assistive technologies ว่า div นี้เป็น alert message
• aria-live="assertive": แจ้งให้ screen readers อ่านข้อความใน div นี้ทันทีที่ข้อความเปลี่ยนแปลง

3. สร้าง Accordion Menu:

<button aria-expanded="false" aria-controls="section1" onclick="toggleSection('section1')">
  Section 1
</button>
<div id="section1" aria-hidden="true">
  <p>Content of Section 1.</p>
</div>

<script>
  function toggleSection(sectionId) {
    const section = document.getElementById(sectionId);
    const button = document.querySelector(`button[aria-controls="${sectionId}"]`);

    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    section.setAttribute('aria-hidden', expanded);
  }
</script>

คำอธิบาย:

• aria-expanded="false": บอกว่าส่วนนี้ยังไม่ได้ขยาย
• aria-controls="section1": บอกว่าปุ่มนี้ควบคุม element ที่มี ID เป็น section1
• aria-hidden="true": บอกว่าส่วนนี้ถูกซ่อนอยู่

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

การสร้าง Landmark Regions

Landmark regions คือส่วนต่างๆ ของหน้าเว็บที่ถูกกำหนดให้มีบทบาทเฉพาะ เช่น navigation, main content, banner, หรือ complementary information Landmark regions ช่วยให้ผู้ใช้งาน assistive technologies สามารถไปยังส่วนต่างๆ ของหน้าเว็บได้อย่างรวดเร็วและง่ายดาย

เราสามารถสร้าง Landmark regions ได้โดยใช้ HTML5 semantic elements หรือ ARIA roles:

• <nav>: ใช้สำหรับส่วน navigation
• <main>: ใช้สำหรับ main content
• <aside>: ใช้สำหรับ complementary information
• <header>: ใช้สำหรับ header
• <footer>: ใช้สำหรับ footer
• <article>: ใช้สำหรับบทความ
• <section>: ใช้สำหรับส่วนต่างๆ ของหน้าเว็บ
• <form>: ใช้สำหรับ form

หาก HTML5 semantic elements ไม่เพียงพอ เราสามารถใช้ ARIA roles เพื่อกำหนด Landmark regions ได้:

• role="banner": ใช้สำหรับ banner
• role="navigation": ใช้สำหรับ navigation (ถ้าไม่ใช้ <nav>)
• role="main": ใช้สำหรับ main content (ถ้าไม่ใช้ <main>)
• role="complementary": ใช้สำหรับ complementary information (ถ้าไม่ใช้ <aside>)
• role="contentinfo": ใช้สำหรับ footer (ถ้าไม่ใช้ <footer>)
• role="search": ใช้สำหรับ search form

ตัวอย่างการสร้าง Landmark Regions

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content.</p>
  </article>
</main>

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</aside>

<footer>
  <p>Copyright 2023</p>
</footer>

การจัดการ Focus

Focus คือการที่ element หนึ่งบนหน้าเว็บถูกเลือก (selected) และพร้อมที่จะรับ input จากผู้ใช้ (เช่น การพิมพ์ข้อความ หรือการกดปุ่ม) การจัดการ Focus ที่ดีเป็นสิ่งสำคัญเพื่อให้ผู้ใช้งานที่ใช้ keyboard หรือ assistive technologies สามารถ navigate เว็บไซต์ได้อย่างสะดวก

Key Concepts:

• Tab Index: กำหนดลำดับการ focus ของ elements โดยใช้ attribute tabindex
• Focusable Elements: Elements ที่สามารถ focus ได้โดยค่าเริ่มต้น ได้แก่ <a>, <button>, <input>, <select>, <textarea>
• Focus Styles: กำหนด styles ที่มองเห็นได้เมื่อ element ถูก focus (เช่น outline, background color)

การใช้ Tab Index

• tabindex="0": ทำให้ element สามารถ focus ได้ตามลำดับที่ปรากฏใน HTML
• tabindex="-1": ทำให้ element ไม่สามารถ focus ได้โดยการกด Tab แต่ยังสามารถ focus ได้ผ่าน JavaScript
• tabindex="positive number": กำหนดลำดับการ focus ที่ชัดเจน (ไม่แนะนำให้ใช้ ยกเว้นในกรณีพิเศษ)

ตัวอย่างการจัดการ Focus

1. Skip Navigation Link:

<a href="#main-content" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
  }

  .skip-link:focus {
    top: 0;
  }
</style>

<main id="main-content">
  <!-- Main content here -->
</main>

คำอธิบาย:

• Skip link จะถูกซ่อนไว้จนกว่าจะถูก focus ทำให้ผู้ใช้งาน keyboard สามารถข้าม navigation ไปยัง main content ได้อย่างรวดเร็ว

2. Trapping Focus in a Modal:

function trapFocus(element) {
  const focusableElements = element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');
  const firstFocusableElement = focusableElements[0];
  const lastFocusableElement = focusableElements[focusableElements.length - 1];

  element.addEventListener('keydown', function(e) {
    const isTabPressed = e.key === 'Tab' || e.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    if (e.shiftKey) { // if shift key pressed for shift + tab combination
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus(); // move focus to the last focusable element
        e.preventDefault();
      }
    } else { // if tab key is pressed
      if (document.activeElement === lastFocusableElement) {
        firstFocusableElement.focus(); // move focus to the first focusable element
        e.preventDefault();
      }
    }
  });

  firstFocusableElement.focus();
}

คำอธิบาย:

• ฟังก์ชันนี้จะดักจับ focus ภายใน modal window ทำให้ผู้ใช้งาน keyboard ไม่สามารถ focus ออกจาก modal ได้

การทดสอบ Accessibility ด้วยเครื่องมือต่างๆ

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

• Accessibility Insights (Chrome Extension): เครื่องมือที่ช่วยตรวจสอบ Accessibility issues ในหน้าเว็บ
• Lighthouse (Chrome DevTools): เครื่องมือที่ช่วยตรวจสอบ performance, accessibility, best practices, และ SEO
• WAVE (Web Accessibility Evaluation Tool): เครื่องมือออนไลน์ที่ช่วยตรวจสอบ Accessibility issues
• Screen Readers (NVDA, JAWS, VoiceOver): โปรแกรมที่อ่านเนื้อหาบนหน้าจอ ช่วยให้เราเข้าใจว่าผู้พิการทางสายตาใช้งานเว็บไซต์ของเราอย่างไร

ขั้นตอนการทดสอบ Accessibility:

1. ใช้เครื่องมือตรวจสอบ Accessibility เพื่อค้นหา issues
2. แก้ไข issues ที่พบ
3. ทดสอบเว็บไซต์ด้วย screen reader เพื่อตรวจสอบว่าผู้พิการทางสายตาสามารถใช้งานเว็บไซต์ได้อย่างถูกต้อง
4. ขอ feedback จากผู้ใช้งานจริง

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

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ HTML Best Practices สำหรับ SEO เพื่อให้เว็บไซต์ของเราสามารถถูกค้นหาได้ง่ายบน search engines