Ví dụ về Cấu trúc HTML:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Tiêu đề Phần 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Nội dung cho phần 1 ở đây.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Tiêu đề Phần 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Nội dung cho phần 2 ở đây.</p>
    </div>
  </div>
</div>

2. Các thuộc tính ARIA cho Nội dung Động

Vai trò và trạng thái ARIA rất quan trọng để thông báo cho các công nghệ hỗ trợ về hành vi của accordion.

• `role="button"`: Trên yếu tố tương tác (nút) dùng để chuyển đổi nội dung.
• `aria-expanded`: Đặt thành `true` khi bảng nội dung hiển thị và `false` khi nó bị ẩn. Điều này trực tiếp truyền đạt trạng thái cho trình đọc màn hình.
• `aria-controls`: Trên nút, tham chiếu đến `id` của bảng nội dung mà nó điều khiển. Điều này thiết lập một liên kết theo chương trình.
• `aria-labelledby`: Trên bảng nội dung, tham chiếu đến `id` của nút điều khiển nó. Điều này tạo ra một liên kết hai chiều.
• `role="region"`: Trên bảng nội dung. Điều này cho biết nội dung là một phần có thể nhận biết được của trang.
• `aria-hidden`: Mặc dù `aria-expanded` được ưu tiên để kiểm soát trạng thái hiển thị, `aria-hidden="true"` có thể được sử dụng trên các bảng nội dung không được hiển thị để ngăn chúng được trình đọc màn hình thông báo. Tuy nhiên, đảm bảo nội dung được ẩn đúng cách thông qua CSS (`display: none;`) hoặc bị xóa khỏi cây tiếp cận sẽ mạnh mẽ hơn.

Lưu ý về `aria-hidden` và `display: none`: Sử dụng `display: none;` trong CSS sẽ loại bỏ hiệu quả yếu tố đó khỏi cây tiếp cận. Nếu bạn đang hiển thị/ẩn nội dung một cách động bằng JavaScript mà không có `display: none;`, `aria-hidden` trở nên quan trọng hơn. Tuy nhiên, `display: none;` thường là phương pháp được ưu tiên để ẩn các bảng nội dung.

3. Khả năng vận hành bằng Bàn phím

Đảm bảo người dùng có thể tương tác với accordion bằng các lệnh bàn phím tiêu chuẩn.

• Điều hướng bằng phím Tab: Các tiêu đề accordion phải có thể nhận tiêu điểm và xuất hiện theo thứ tự tab tự nhiên của trang.
• Kích hoạt: Nhấn `Enter` hoặc `Spacebar` trên một tiêu đề accordion đang được tập trung sẽ chuyển đổi khả năng hiển thị của bảng nội dung của nó.
• Các phím Mũi tên (Tùy chọn nhưng được khuyến nghị): Để có trải nghiệm nâng cao hơn, hãy cân nhắc triển khai điều hướng bằng phím mũi tên:
  • `Mũi tên xuống`: Di chuyển tiêu điểm đến tiêu đề accordion tiếp theo.
  • `Mũi tên lên`: Di chuyển tiêu điểm đến tiêu đề accordion trước đó.
  • `Home`: Di chuyển tiêu điểm đến tiêu đề accordion đầu tiên.
  • `End`: Di chuyển tiêu điểm đến tiêu đề accordion cuối cùng.
  • `Mũi tên phải` (hoặc `Enter`/`Space`): Mở rộng/thu gọn mục accordion hiện tại.
  • `Mũi tên trái` (hoặc `Enter`/`Space`): Thu gọn mục accordion hiện tại và di chuyển tiêu điểm trở lại tiêu đề.

4. Chỉ báo Tiêu điểm Trực quan

Khi một tiêu đề accordion nhận tiêu điểm từ bàn phím, nó phải có một chỉ báo trực quan rõ ràng. Các đường viền tiêu điểm mặc định của trình duyệt thường là đủ, nhưng hãy đảm bảo chúng không bị loại bỏ bởi CSS (ví dụ: `outline: none;`) mà không cung cấp một kiểu tiêu điểm thay thế, dễ nhìn thấy.

Ví dụ CSS cho tiêu điểm:

.accordion-button:focus {
  outline: 3px solid blue; /* Hoặc một màu đáp ứng yêu cầu về độ tương phản */
  outline-offset: 2px;
}

5. Khả năng hiển thị và Trình bày Nội dung

• Trạng thái Mặc định: Quyết định xem các phần accordion nên được thu gọn hay mở rộng theo mặc định. Đối với FAQs hoặc thông tin dày đặc, bắt đầu ở trạng thái thu gọn thường là tốt nhất. Đối với điều hướng hoặc tóm tắt tính năng, việc có một phần được mở rộng theo mặc định có thể hữu ích.
• Dấu hiệu Trực quan: Sử dụng các dấu hiệu trực quan rõ ràng để cho biết một phần đang mở rộng hay thu gọn. Đây có thể là một biểu tượng (ví dụ: dấu '+' hoặc '-', mũi tên lên/xuống) thay đổi hình dạng của nó. Đảm bảo các biểu tượng này cũng dễ tiếp cận (ví dụ: thông qua `aria-label` nếu chúng không có văn bản).
• Tỷ lệ Tương phản: Đảm bảo nội dung văn bản trong accordion và các nút chuyển đổi đáp ứng yêu cầu về tỷ lệ tương phản của WCAG (4.5:1 cho văn bản thường, 3:1 cho văn bản lớn). Điều này rất quan trọng đối với người dùng có thị lực kém.
• Không làm mất Nội dung: Khi một phần mở rộng, hãy đảm bảo nội dung của nó không tràn ra khỏi vùng chứa hoặc che khuất các nội dung quan trọng khác.

6. Quản lý Tiêu điểm khi Chuyển đổi

Đây là một khía cạnh nâng cao hơn nhưng rất quan trọng để có một trải nghiệm liền mạch.

• Mở rộng: Khi người dùng mở rộng một phần, hãy cân nhắc di chuyển tiêu điểm đến yếu tố tương tác đầu tiên trong nội dung mới được hiển thị. Điều này đặc biệt quan trọng nếu nội dung mở rộng chứa các trường biểu mẫu hoặc liên kết.
• Thu gọn: Khi người dùng thu gọn một phần, tiêu điểm nên quay trở lại tiêu đề accordion đã được chuyển đổi. Điều này ngăn người dùng phải điều hướng lại qua các phần đã thu gọn trước đó.

Việc triển khai quản lý tiêu điểm thường liên quan đến JavaScript để nắm bắt và thiết lập tiêu điểm theo chương trình.

Triển khai Accordion Dễ tiếp cận với JavaScript

Trong khi HTML ngữ nghĩa và ARIA là những bước đầu tiên, JavaScript thường được yêu cầu để xử lý việc chuyển đổi động và có thể là quản lý tiêu điểm. Dưới đây là cách tiếp cận JavaScript về mặt khái niệm:

// JavaScript khái niệm cho Chức năng Accordion

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // Chuyển đổi trạng thái aria-expanded
      button.setAttribute('aria-expanded', !isExpanded);

      // Chuyển đổi khả năng hiển thị nội dung (sử dụng CSS để đảm bảo khả năng tiếp cận)
      content.style.display = isExpanded ? 'none' : 'block'; // Hoặc sử dụng chuyển đổi lớp (class)

      // Tùy chọn: Quản lý tiêu điểm khi mở rộng
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Tùy chọn: Điều hướng bằng bàn phím (phím mũi tên, v.v.) cũng sẽ được triển khai ở đây.
  // Ví dụ: xử lý sự kiện 'keydown'.
});

// Cài đặt ban đầu: Ẩn nội dung mặc định và đặt aria-expanded thành false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Ẩn nội dung ban đầu
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Những lưu ý quan trọng đối với JavaScript:

• CSS để Ẩn: Tốt nhất là sử dụng CSS (ví dụ: `display: none;` hoặc một lớp đặt `height: 0; overflow: hidden;` để chuyển tiếp mượt mà hơn) để ẩn nội dung. Điều này đảm bảo nội dung được loại bỏ khỏi cây tiếp cận khi không hiển thị.
• Thoái triển hợp lý: Đảm bảo rằng ngay cả khi JavaScript không tải hoặc thực thi được, nội dung accordion vẫn có thể truy cập được (mặc dù có thể không thu gọn được). HTML ngữ nghĩa vẫn nên cung cấp một số cấu trúc.
• Các Framework và Thư viện: Nếu sử dụng các framework JavaScript (React, Vue, Angular) hoặc các thư viện UI, hãy kiểm tra tài liệu về khả năng tiếp cận của chúng. Nhiều framework cung cấp các thành phần accordion dễ tiếp cận sẵn có hoặc với các thuộc tính cụ thể.

Kiểm tra Khả năng Tiếp cận

Kiểm tra kỹ lưỡng là rất quan trọng để đảm bảo các widget accordion của bạn thực sự dễ tiếp cận.

• Công cụ Tự động: Sử dụng các tiện ích mở rộng của trình duyệt (như Axe, WAVE) hoặc các công cụ kiểm tra trực tuyến để xác định các vấn đề về khả năng tiếp cận phổ biến.
• Kiểm tra bằng Bàn phím: Điều hướng và vận hành accordion chỉ bằng bàn phím (Tab, Shift+Tab, Enter, Spacebar, các phím Mũi tên). Đảm bảo tất cả các yếu tố tương tác đều có thể truy cập và vận hành được.
• Kiểm tra bằng Trình đọc Màn hình: Thử nghiệm với các trình đọc màn hình phổ biến (NVDA, JAWS, VoiceOver). Lắng nghe cách cấu trúc và thay đổi trạng thái của accordion được thông báo. Nó có hợp lý không? Trạng thái `aria-expanded` có được truyền đạt chính xác không?
• Kiểm tra với Người dùng: Nếu có thể, hãy mời người dùng khuyết tật tham gia vào quá trình kiểm tra của bạn. Phản hồi của họ là vô giá để xác định các vấn đề về khả năng sử dụng trong thế giới thực.
• Kiểm tra trên Trình duyệt và Thiết bị: Thử nghiệm trên các trình duyệt và thiết bị khác nhau, vì hành vi hiển thị và JavaScript có thể khác nhau.

Góc nhìn Toàn cầu và Địa phương hóa

Khi thiết kế cho đối tượng người dùng toàn cầu, hãy xem xét các yếu tố sau:

• Ngôn ngữ: Đảm bảo tất cả văn bản, bao gồm nhãn nút và nội dung, đều rõ ràng, ngắn gọn và dễ dịch. Tránh các thành ngữ hoặc các tham chiếu văn hóa cụ thể.
• Độ dài Nội dung: Việc mở rộng nội dung có thể ảnh hưởng đáng kể đến bố cục trang. Hãy lưu ý rằng nội dung được dịch có thể dài hơn hoặc ngắn hơn bản gốc. Kiểm tra xem accordion của bạn xử lý các độ dài nội dung khác nhau như thế nào.
• Quy ước Giao diện Người dùng theo Văn hóa: Mặc dù chức năng cốt lõi của accordion là phổ biến, các yếu tố thiết kế tinh tế có thể được cảm nhận khác nhau giữa các nền văn hóa. Hãy tuân thủ các mẫu đã được thiết lập và các dấu hiệu rõ ràng.
• Hiệu suất: Đối với người dùng ở các khu vực có kết nối internet chậm hơn, hãy đảm bảo JavaScript của bạn được tối ưu hóa và nội dung trong accordion không ảnh hưởng quá mức đến thời gian tải trang ban đầu.

Ví dụ về các Accordion Dễ tiếp cận

Nhiều tổ chức uy tín đã trình bày các mẫu accordion dễ tiếp cận:

• Hệ thống Thiết kế GOV.UK: Thường được trích dẫn vì cam kết về khả năng tiếp cận, GOV.UK cung cấp các thành phần được ghi chép đầy đủ, bao gồm cả accordion, tuân thủ WCAG.
• MDN Web Docs: Mạng lưới Nhà phát triển Mozilla cung cấp các hướng dẫn chi tiết và ví dụ về việc tạo các widget dễ tiếp cận, bao gồm cả accordion, với giải thích rõ ràng về việc sử dụng ARIA.
• Hệ thống Thiết kế từ các Công ty Công nghệ Lớn: Các công ty như Google (Material Design), Microsoft (Fluent UI), và Apple cung cấp các thành phần hệ thống thiết kế thường ưu tiên khả năng tiếp cận. Tham khảo những hệ thống này có thể cung cấp các mẫu triển khai mạnh mẽ.

Kết luận

Widget accordion là công cụ mạnh mẽ để tổ chức nội dung và nâng cao trải nghiệm người dùng. Tuy nhiên, tính chất động của chúng đòi hỏi một cách tiếp cận tận tâm đối với khả năng tiếp cận. Bằng cách tuân thủ các nguyên tắc WCAG, tận dụng HTML ngữ nghĩa, triển khai ARIA một cách chính xác, đảm bảo điều hướng bằng bàn phím mạnh mẽ và tiến hành kiểm tra kỹ lưỡng, bạn có thể tạo ra các thành phần accordion có thể sử dụng và thú vị cho mọi người, trên toàn cầu. Ưu tiên khả năng tiếp cận ngay từ đầu không chỉ đảm bảo tuân thủ mà còn dẫn đến một sản phẩm hòa nhập và thân thiện hơn với tất cả người dùng.

Hãy nhớ rằng, thiết kế dễ tiếp cận không phải là một yếu tố phụ; nó là một phần không thể thiếu của thiết kế tốt. Bằng cách thành thạo việc triển khai các widget accordion dễ tiếp cận, bạn đang góp phần tạo ra một trang web công bằng và dễ sử dụng hơn cho tất cả người dùng.