Tìm hiểu về nguyên tắc và yêu cầu của WCAG 2.2

Hướng dẫn khả năng truy cập nội dung web WCAG 2.2

Trong bối cảnh chuyển đổi số diễn ra mạnh mẽ, việc xây dựng website thân thiện với mọi đối tượng người dùng ngày càng trở nên quan trọng. WCAG 2.2 là bộ tiêu chuẩn hướng dẫn về khả năng truy cập nội dung web do W3C phát hành, đóng vai trò then chốt giúp website đáp ứng tốt hơn nhu cầu của người dùng, đặc biệt là người khuyết tật. Bài viết dưới đây của TopOnTech sẽ giúp bạn hiểu rõ WCAG 2.2 là gì, những nguyên tắc thiết kế quan trọng cần tuân thủ và cách triển khai hiệu quả theo tiêu chuẩn này.

>>> Xem thêm các bài viết:

WCAG 2.2 là gì?

WCAG là gì? WCAG (viết tắt của Web Content Accessibility Guidelines) là bộ tiêu chuẩn do W3C (World Wide Web Consortium) xây dựng, nhằm hướng dẫn cách thiết kế nội dung web sao cho mọi người, bao gồm cả người khuyết tật, đều có thể truy cập, hiểu và sử dụng. WCAG đóng vai trò then chốt trong việc đảm bảo tính công bằng trong môi trường số, đồng thời là cơ sở pháp lý tại nhiều quốc gia về khả năng tiếp cận website.

Phiên bản mới nhất của bộ tiêu chuẩn này là WCAG 2.2, được chính thức phát hành vào tháng 10/2023. WCAG 2.2 cung cấp hướng dẫn cụ thể để đảm bảo rằng các dịch vụ kỹ thuật số, bao gồm website và ứng dụng, có thể truy cập được cho mọi người – kể cả những người gặp hạn chế về khả năng sử dụng internet. 

WCAG 2.2 kế thừa nền tảng từ WCAG 2.1 nhưng bổ sung thêm 9 tiêu chí thành phần (success criteria), chủ yếu nhằm cải thiện trải nghiệm của:

  • Khiếm thị: bao gồm người mù, người suy giảm thị lực hoặc mù màu;
  • Khiếm thính: như người bị điếc hoặc suy giảm thính lực;
  • Hạn chế vận động: những người gặp khó khăn khi sử dụng chuột, bàn phím hoặc thiết bị điều khiển;
  • Gặp rào cản nhận thức: chẳng hạn người mắc chứng khó đọc, tự kỷ hoặc các rối loạn học tập khác.

>>> Xem thêm:

WCAG 2.2 hướng dẫn cách thiết kế website
WCAG 2.2 là phiên bản mới nhất của bộ tiêu chuẩn thiết kế website

Nguyên tắc thiết kế của WCAG 2.2

Bộ tiêu chuẩn WCAG 2.2 được xây dựng dựa trên 4 nguyên tắc cốt lõi nhằm đảm bảo nội dung web có thể tiếp cận và sử dụng được bởi mọi đối tượng người dùng, kể cả người khuyết tật. Bốn nguyên tắc đó gồm:

  • Có thể nhận thức được (Perceivable)
  • Có thể vận hành (Operable)
  • Có thể hiểu được (Understandable)
  • Mạnh mẽ (Robust)

Những nguyên tắc này không chỉ áp dụng cho mã nguồn, mà còn cho nội dung, thiết kế giao diện và trải nghiệm tương tác. Chúng nhấn mạnh việc suy nghĩ đa chiều về cách người dùng truy cập trang web – từ sử dụng bàn phím, trình đọc màn hình đến thay đổi cài đặt hiển thị.

>>> Xem thêm:

Nguyên tắc thiết kế của WCAG 2.2
4 nguyên tắc cốt lõi của bộ hướng dẫn thiết kế website phiên bản WCAG 2.2

Danh sách chi tiết về hướng dẫn/nguyên tắc của WCAG 2.2

WCAG 2.2 được xây dựng dựa trên 4 nguyên tắc thiết kế: có thể nhận thức được, có thể vận hành, có thể hiểu được và mạnh mẽ. Từ đó phát triển thành 13 hướng dẫn với nhiều tiêu chí thành công (success criteria) cụ thể cho từng cấp độ (A, AA, AAA).

Để đạt được mức độ AA – mức chuẩn được yêu cầu phổ biến nhất – website của bạn cần đáp ứng toàn bộ các tiêu chí ở cấp độ A và AA. Việc này không chỉ liên quan đến thiết kế giao diện, mà còn bao gồm nội dung, mã lập trình và tương tác người dùng. Bạn có thể kiểm tra website có đáp ứng các tiêu chí hay không bằng cách: 

  • Kiểm tra tự động: Sử dụng các công cụ như WAVE, Axe DevTools, Lighthouse,… để phát hiện lỗi kỹ thuật phổ biến.
  • Kiểm tra thủ công: Đánh giá khả năng truy cập thực tế bằng bàn phím, trình đọc màn hình, độ phóng đại văn bản và điều hướng bằng giọng nói.

Ngoài ra, việc kiểm tra cần thực hiện trước khi ra mắt sản phẩm beta hoặc định kỳ trong quá trình phát triển, đảm bảo mọi cải tiến đều không làm ảnh hưởng đến khả năng truy cập.

Nguyên tắc 1: Có thể nhận thức được (Perceivable)

Nguyên tắc này yêu cầu mọi nội dung và thông tin trên website phải được trình bày theo cách mà người dùng có thể nhận biết được bằng ít nhất một trong các giác quan (thường là thị giác hoặc thính giác).

  • Cung cấp văn bản thay thế (alt text) cho mọi hình ảnh, biểu tượng, video nhằm giúp người dùng sử dụng trình đọc màn hình có thể hiểu nội dung. (Mức độ A)
  • Cung cấp phụ đề và bản ghi âm cho video, âm thanh giúp người khiếm thính vẫn tiếp cận được thông tin. (Mức độ AA)
  • Tránh sử dụng màu sắc làm duy nhất để truyền đạt thông tin (ví dụ: không chỉ dùng màu đỏ để báo lỗi mà phải có biểu tượng hoặc chú thích đi kèm). (Mức độ A)
  • Nội dung phải dễ đọc và dễ phân biệt, bao gồm độ tương phản màu sắc phù hợp giữa chữ và nền (đạt ít nhất 4.5:1 theo tiêu chuẩn). (Mức độ AA)
  • Nội dung phải có cấu trúc hợp lý để các công cụ hỗ trợ có thể đọc được đúng thứ tự, ví dụ dùng đúng thẻ heading, danh sách, bảng biểu có markup chuẩn. (Mức độ A)
  • Cho phép người dùng tùy chỉnh kích thước văn bản lên đến 200% mà không làm hỏng bố cục hay mất nội dung. (Mức độ AA)
  • Không sử dụng hình ảnh chứa văn bản thay vì dùng text thật, trừ những trường hợp đặc biệt như logo. (Mức độ AA)
  • Đảm bảo website phản hồi với các thiết bị khác nhau, từ máy tính đến điện thoại và các thiết bị hỗ trợ khác. (Mức độ A)

>>> Xem thêm:

Nguyên tắc Perceivable của WCAG 2.2
Đảm bảo website có thể phản hồi chính xác trên các thiết bị khác nhau

Nguyên tắc 2: Có thể vận hành (Operable)

Nguyên tắc này đảm bảo người dùng có thể tương tác và sử dụng toàn bộ các chức năng trên trang web mà không gặp rào cản về phương thức truy cập.

Các yêu cầu chính bao gồm:

  • Toàn bộ nội dung và chức năng phải có thể truy cập bằng bàn phím mà không cần chuột, giúp người dùng khuyết tật vận động dễ dàng điều hướng. (Mức độ A)
  • Người dùng phải có khả năng kiểm soát các nội dung chuyển động, ví dụ như video tự chạy hoặc hoạt ảnh, bằng cách cho phép tạm dừng hoặc tắt chúng. (Mức độ A)
  • Không sử dụng nội dung nhấp nháy quá 3 lần/giây để tránh gây ra nguy cơ động kinh. (Mức độ A)
  • Cung cấp các liên kết bỏ qua (skip links) để người dùng có thể bỏ qua nội dung lặp lại và nhanh chóng đến phần chính của trang. (Mức độ A)
  • Đảm bảo các liên kết có tiêu đề mô tả rõ ràng, giúp người dùng biết họ sẽ được dẫn tới đâu hoặc sẽ tải xuống nội dung gì. (Mức độ A)
  • Hỗ trợ người dùng dễ dàng định vị vị trí hiện tại bằng các hiệu ứng tập trung rõ ràng (focus indicator) khi di chuyển bằng bàn phím hoặc thiết bị hỗ trợ. (Mức độ A)
  • Tránh sử dụng tương tác chỉ dựa trên chuột hoặc cử chỉ cảm ứng mà không có phương án thay thế. (Mức độ A)
  • Các yếu tố tương tác (nút, link) phải đủ lớn, khoảng cách hợp lý để dễ chọn trên mọi thiết bị. (Mức độ AA)

>>> Xem thêm:

Nguyên tắc Operable của WCAG 2.2
Đảm bảo các nội dung và chức năng của website đều có thể truy cập bằng bàn phím

Nguyên tắc 3: Có thể hiểu được (Understandable)

Nguyên tắc này tập trung vào việc làm cho nội dung và giao diện website dễ hiểu đối với mọi người dùng, kể cả người dùng có các khó khăn về nhận thức hoặc người không thông thạo ngôn ngữ.

Các yêu cầu chính bao gồm:

  • Rõ ràng về ngôn ngữ chính của nội dung, và khi có đoạn văn bản chuyển đổi sang ngôn ngữ khác phải thông báo rõ ràng. (Mức độ A)
  • Cung cấp các chỉ dẫn rõ ràng và nhất quán trong giao diện, các chức năng hoạt động theo cách dự đoán được. (Mức độ A)
  • Đảm bảo tất cả các biểu mẫu có nhãn (label) rõ ràng và mô tả chính xác, giúp người dùng điền form dễ dàng hơn. (Mức độ A)
  • Cung cấp thông báo lỗi chi tiết, rõ ràng khi người dùng nhập sai hoặc thiếu dữ liệu trong biểu mẫu, đồng thời gợi ý cách sửa lỗi. (Mức độ AA)
  • Giúp người dùng dễ dàng nhập lại thông tin nếu cần, không phải nhập đi nhập lại nhiều lần. (Mức độ AA)
  • Giúp người dùng đăng nhập và xác thực thông tin đơn giản, không gây nhầm lẫn hoặc khó khăn. (Mức độ AAA)

>>> Xem thêm:

Nguyên tắc Understandable của WCAG 2.2
Người dùng của website có thể đăng nhập và xác thực thông tin một cách đơn giản

Nguyên tắc 4: Mạnh mẽ (Robust)

Nguyên tắc này đảm bảo nội dung và chức năng website có thể được hiểu và xử lý đúng bởi nhiều loại trình duyệt, thiết bị và công nghệ hỗ trợ ở hiện tại cũng như trong tương lai.

Các yêu cầu chính bao gồm:

  • Sử dụng mã nguồn HTML, CSS hợp chuẩn, tuân thủ các quy tắc của W3C để các công nghệ hỗ trợ có thể nhận biết và tương tác chính xác với nội dung. (Mức độ A)
  • Đảm bảo các phần tử giao diện có các thuộc tính ARIA (Accessible Rich Internet Applications) chính xác, mô tả đầy đủ trạng thái và chức năng. (Mức độ A)
  • Đánh dấu rõ các hộp thoại, thông báo quan trọng để trình đọc màn hình có thể cảnh báo người dùng kịp thời. (Mức độ A)
  • Kiểm tra tương thích với các trình duyệt phổ biến và các công cụ hỗ trợ như trình đọc màn hình, bàn phím hỗ trợ. (Mức độ A)
  • Cập nhật và duy trì mã nguồn theo chuẩn mới để tránh lỗi hoặc xung đột khi các công nghệ thay đổi. (Mức độ AA)

>>> Xem thêm:

Nguyên tắc Robust của WCAG 2.2
Cập nhật và duy trì mã nguồn của website theo chuẩn mới để hạn chế lỗi xảy ra

Những nội dung trên mang tính tổng quan về các nguyên tắc và hướng dẫn của WCAG 2.2, không thay thế cho văn bản chính thức hay các tài liệu pháp lý liên quan. Để áp dụng đúng và đầy đủ tiêu chuẩn về khả năng tiếp cận web, bạn có thể xem thông tin chi tiết tại WCAG 2.2.

Việc áp dụng chuẩn WCAG 2.2 không chỉ giúp website trở nên thân thiện và dễ tiếp cận với mọi người dùng, bao gồm cả người khuyết tật, mà còn cải thiện đáng kể hiệu quả SEO và uy tín trên các công cụ tìm kiếm. Đầu tư vào khả năng tiếp cận web theo WCAG 2.2 chính là bước tiến quan trọng để xây dựng một môi trường số công bằng, dễ dàng tiếp cận cho tất cả mọi người.

TopOnTech là đơn vị tiên phong trong lĩnh vực chuyển đổi số toàn diện, cung cấp các giải pháp thiết kế website, phát triển ứng dụng, và xây dựng hệ thống quản trị tối ưu cho doanh nghiệp.

TopOnTech nổi bật với các gói dịch vụ linh hoạt, cá nhân hóa theo từng nhu cầu cụ thể, giúp doanh nghiệp dễ dàng tiếp cận công nghệ, tối ưu vận hành và nâng cao trải nghiệm khách hàng. Với định hướng “Công nghệ vì con người”, TopOnTech không chỉ mang lại hiệu quả kỹ thuật mà còn tạo kết nối cảm xúc giữa thương hiệu và người dùng.

Khách hàng quan tâm đến các giải pháp số của TopOnTech có thể tìm hiểu thêm tại trang Tin tức.

ĐẶT LỊCH TƯ VẤN VÀ NHẬN GÓI AUDIT WEBSITE MIỄN PHÍ NGAY HÔM NAY tại: https://topon.tech/en/contact/

Thông tin liên hệ TopOnTech:

  • Hotline: 0906 712 137
  • Email: long.bui@toponseek.com
  • Địa chỉ: 31 Hoàng Diệu, Phường 12, Quận 4, Thành phố Hồ Chí Minh, Việt Nam