Khả năng truy cập web có nghĩa là xây dựng các trang web mà người khuyết tật có thể sử dụng một cách hiệu quả. Điều này bao gồm những người sử dụng trình đọc màn hình, điều hướng chỉ bằng bàn phím, điều khiển bằng giọng nói, kính lúp màn hình, hoặc những người có hạn chế về thị lực màu sắc. Trong hệ sinh thái WordPress, khả năng truy cập vừa là yêu cầu pháp lý ở nhiều khu vực pháp lý vừa là cách thực tiễn để tiếp cận một đối tượng rộng lớn hơn—hơn 1 tỷ người trên toàn thế giới có một hình thức khuyết tật nào đó.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến các bước thực tiễn để làm cho trang WordPress của bạn có thể truy cập được, theo các Hướng dẫn về Khả năng Truy cập Nội dung Web (WCAG) 2.2 ở cấp độ AA—tiêu chuẩn thường được yêu cầu bởi các luật về khả năng truy cập bao gồm ADA (Mỹ), EAA (EU) và AODA (Canada).
Hiểu các Nguyên tắc WCAG 2.2
WCAG được tổ chức xung quanh bốn nguyên tắc, được gọi là POUR:
| Nguyên tắc | Có nghĩa là gì | Ví dụ WordPress |
|---|---|---|
| Có thể nhận biết | Người dùng có thể nhận biết nội dung qua thị giác, thính giác hoặc xúc giác | Văn bản thay thế cho hình ảnh, phụ đề cho video, độ tương phản màu sắc đủ |
| Có thể vận hành | Người dùng có thể điều hướng và tương tác với giao diện | Điều hướng bằng bàn phím, liên kết bỏ qua, không có bẫy bàn phím |
| Có thể hiểu | Người dùng có thể hiểu nội dung và cách sử dụng giao diện | Ngôn ngữ rõ ràng, điều hướng nhất quán, thông báo lỗi |
| Chắc chắn | Nội dung hoạt động trên các trình duyệt, thiết bị và công nghệ hỗ trợ khác nhau | HTML hợp lệ, vai trò ARIA đúng, đánh dấu ngữ nghĩa |
Chọn một Chủ đề Có thể Truy cập
Cấu trúc HTML và CSS của chủ đề WordPress của bạn tạo thành nền tảng cho khả năng truy cập của trang web. Khi chọn một chủ đề WordPress, hãy đánh giá các yếu tố khả năng truy cập sau:
- HTML ngữ nghĩa: Chủ đề sử dụng các phần tử HTML5 thích hợp (header, nav, main, article, aside, footer) thay vì các div chung cho mọi thứ
- Thứ tự tiêu đề: H1 → H2 → H3 theo một thứ tự hợp lý mà không bỏ qua cấp độ
- Liên kết bỏ qua: Một liên kết "Bỏ qua nội dung" có mặt như là phần tử có thể tập trung đầu tiên, cho phép người dùng bàn phím bỏ qua điều hướng
- Điều hướng bằng bàn phím: Tất cả các phần tử tương tác (liên kết, nút, biểu mẫu) đều có thể tiếp cận và sử dụng bằng phím Tab
- Chỉ báo tiêu điểm: Các phần tử được tập trung có một đường viền hoặc điểm nổi bật rõ ràng (không bị xóa với outline: none)
- Độ tương phản màu sắc: Văn bản đáp ứng tỷ lệ tương phản WCAG AA (4.5:1 cho văn bản bình thường, 3:1 cho văn bản lớn)
Các chủ đề được gán nhãn "ready accessibility" trên WordPress.org đã vượt qua một đánh giá khả năng truy cập cơ bản. Tuy nhiên, nhãn này chỉ ra một điểm khởi đầu, không phải là sự tuân thủ WCAG hoàn toàn. Trong số các chủ đề phổ biến, GeneratePress nổi bật với mã hóa tốt với HTML ngữ nghĩa sạch và các mốc ARIA thích hợp.
Khả năng Truy cập Hình ảnh
Văn bản Thay thế
Mỗi hình ảnh có ý nghĩa cần có văn bản thay thế mô tả. WordPress làm điều này trở nên đơn giản—trường văn bản thay thế có sẵn trong Thư viện Media và khi chèn hình ảnh vào nội dung.
| Loại Hình ảnh | Cách Tiếp cận Văn bản Thay thế | Ví dụ |
|---|---|---|
| Ảnh sản phẩm | Mô tả sản phẩm | "Túi xách chéo màu đỏ bằng da với khóa vàng, góc nhìn phía trước" |
| Ảnh chụp màn hình | Mô tả những gì ảnh chụp màn hình hiển thị | "Bảng điều khiển WordPress hiển thị trang Plugins với 12 plugin đang hoạt động" |
| Đồ họa thông tin | Tóm tắt thông tin chính | "Biểu đồ so sánh: Tính năng của Elementor so với Gutenberg. Elementor có hơn 100 widget, Gutenberg có hơn 90 block" |
| Hình ảnh trang trí | Văn bản thay thế trống (alt="") | Họa tiết nền, đường phân cách, biểu tượng chỉ mang tính trang trí |
| Biểu đồ/đồ thị | Mô tả xu hướng hoặc điểm dữ liệu chính | "Biểu đồ đường cho thấy lưu lượng truy cập website tăng 45% từ tháng 1 đến tháng 12 năm 2025" |
Tối ưu hóa Hình ảnh cho Khả năng Truy cập
- Không sử dụng hình ảnh của văn bản—thay vào đó hãy sử dụng văn bản thực tế được định dạng bằng CSS
- Đảm bảo văn bản nhúng trong hình ảnh đáp ứng yêu cầu về độ tương phản
- Cung cấp mô tả dài cho các hình ảnh phức tạp (biểu đồ, sơ đồ) bằng cách sử dụng một đoạn văn bên cạnh hoặc thuộc tính longdesc
- Đảm bảo hình ảnh có kích thước phù hợp để không gây ra sự thay đổi bố cục (CLS)
Điều hướng bằng Bàn phím
Nhiều người dùng điều hướng các trang web hoàn toàn bằng
một bàn phím—Tab để di chuyển tới, Shift+Tab để di chuyển lùi, Enter để kích hoạt liên kết/nút, Space để chuyển đổi hộp kiểm và nhấp vào nút, và Escape để đóng các hộp thoại.
Các vấn đề truy cập bàn phím phổ biến
- Cạm bẫy tiêu điểm: Các hộp thoại modal không cho phép quay lại nội dung chính (các modal nên giữ tiêu điểm bên trong modal, và Escape nên đóng chúng)
- Thiếu chỉ báo tiêu điểm: CSS loại bỏ viền mặc định trên các phần tử được tập trung (không bao giờ sử dụng *:focus { outline: none } toàn cầu)
- Các phần tử không tương tác với các trình xử lý nhấp chuột: Các div hoặc span với sự kiện onClick không thể truy cập bằng bàn phím (sử dụng nút hoặc liên kết thay vào đó)
- Các menu thả xuống chỉ mở khi di chuột: Người dùng bàn phím không thể kích hoạt trạng thái di chuột. Các menu nên mở khi có tiêu điểm/Enter cũng như vậy
- Các thành phần tùy chỉnh không có ARIA: Các tab, accordion và carousel được xây dựng mà không có vai trò ARIA và trình xử lý bàn phím thích hợp
Màu sắc và Độ tương phản
WCAG AA yêu cầu các tỷ lệ tương phản tối thiểu sau:
| Phần tử | Tỷ lệ tối thiểu | Ví dụ (Đạt) | Ví dụ (Không đạt) |
|---|---|---|---|
| Văn bản bình thường (<18px) | 4.5:1 | #333 trên #fff (12.6:1) | #999 trên #fff (2.8:1) |
| Văn bản lớn (≥18px hoặc ≥14px đậm) | 3:1 | #555 trên #fff (7.4:1) | #aaa trên #fff (2.3:1) |
| Các thành phần UI (nút, input) | 3:1 | Nút màu xanh #2563eb (4.6:1) | Nút màu xanh nhạt #93c5fd (1.8:1) |
| Nội dung không phải văn bản (biểu tượng, viền) | 3:1 | Biểu tượng tối trên nền sáng | Biểu tượng xám nhạt trên nền trắng |
Sử dụng các công cụ như WebAIM's Contrast Checker hoặc tiện ích mở rộng axe để xác minh tỷ lệ tương phản. Không chỉ dựa vào màu sắc để truyền đạt thông tin—sử dụng nhãn văn bản, họa tiết hoặc biểu tượng bên cạnh mã màu.
Truy cập vào Biểu mẫu
Các biểu mẫu là một trong những lĩnh vực quan trọng nhất về khả năng truy cập. Dù sử dụng Gutenberg blocks, Gravity Forms, hoặc WPForms:
- Gán nhãn cho mọi input: Sử dụng phần tử <label> liên kết với mỗi input thông qua thuộc tính for/id. Văn bản placeholder không thay thế cho nhãn
- Nhóm các trường liên quan: Sử dụng <fieldset> và <legend> cho các nhóm input liên quan (ví dụ: các trường địa chỉ giao hàng)
- Cung cấp thông báo lỗi: Khi xác thực thất bại, xác định trường nào có lỗi và mô tả cách khắc phục. Sử dụng aria-describedby để liên kết thông báo lỗi với các trường của chúng
- Đánh dấu các trường bắt buộc: Sử dụng thuộc tính required và chỉ ra trực quan các trường bắt buộc bằng văn bản (không chỉ là dấu hoa thị)
- Hỗ trợ tự động hoàn thành: Thêm các thuộc tính tự động hoàn thành thích hợp (name, email, tel, address-line1) để trình duyệt có thể tự động điền dữ liệu biểu mẫu
Truy cập vào Nội dung
Cấu trúc Tiêu đề
Cấu trúc tiêu đề hợp lý giúp người dùng trình đọc màn hình hiểu cấu trúc trang và điều hướng giữa các phần. Quy tắc:
- Một H1 cho mỗi trang (tiêu đề trang/bài viết)
- H2 cho các phần chính
- H3 cho các tiểu mục trong một H2
- Không bao giờ bỏ qua các cấp độ (H2 → H4 mà không có H3 là không đúng)
- Không sử dụng tiêu đề cho kiểu dáng trực quan—sử dụng các lớp CSS thay vào đó
Văn bản Liên kết
Tránh văn bản liên kết chung chung không có nghĩa trong ngữ cảnh:
| Văn bản Liên kết Kém | Văn bản Liên kết Có thể Truy cập |
|---|---|
| "Nhấp vào đây" | "Đọc hướng dẫn bảo mật WordPress" |
| "Đọc thêm" | "Đọc toàn bộ đánh giá Elementor Pro" |
| "Tìm hiểu thêm" | "Tìm hiểu cách tối ưu hóa thanh toán WooCommerce" |
| "Ở đây" | "Tải xuống báo cáo điểm chuẩn hiệu suất" |
Bảng
Các bảng dữ liệu nên bao gồm:
- <thead> với các phần tử <th> cho tiêu đề cột (với scope="col")
- <th scope="row"> cho tiêu đề hàng
- Một phần tử <caption> mô tả mục đích của bảng
- Cấu trúc đơn giản—tránh các ô hợp nhất khi có thể, vì chúng khó cho trình đọc màn hình diễn giải
Kiểm tra khả năng truy cập của Trang web của bạn
| Công cụ | Loại | Nó Kiểm tra gì |
|---|---|---|
| axe DevTools | Tiện ích mở rộng trình duyệt | Kiểm tra tự động WCA |
| Phát hiện vi phạm G | ||
| WAVE | Tiện ích mở rộng trình duyệt / web | Đánh giá khả năng tiếp cận trực quan với các chú thích nội tuyến |
| Lighthouse | Chrome DevTools | Kiểm tra khả năng tiếp cận với điểm số và khuyến nghị |
| Kiểm tra bàn phím | Thủ công | Điều hướng toàn bộ trang web chỉ bằng Tab, Enter và Escape |
| Trình đọc màn hình | Thủ công | Kiểm tra với VoiceOver (Mac), NVDA (Windows) hoặc TalkBack (Android) |
Các công cụ tự động phát hiện khoảng 30-50% vấn đề về khả năng tiếp cận. Kiểm tra thủ công với bàn phím và trình đọc màn hình là cần thiết để xác định các vấn đề dựa trên tương tác mà các công cụ tự động không thể phát hiện.
Các Plugin WordPress cho Khả Năng Tiếp Cận
- WP Accessibility: Thêm liên kết bỏ qua, sửa các vấn đề khả năng tiếp cận phổ biến, thêm thanh công cụ cho sở thích người dùng
- One Click Accessibility: Thêm một thanh công cụ khả năng tiếp cận phía trước (kích thước phông, độ tương phản, làm nổi bật liên kết)
- Mẫu khởi đầu với khả năng tiếp cận: Astra và GeneratePress đều có nền tảng khả năng tiếp cận mạnh mẽ trong các chủ đề cơ bản của chúng
Lưu ý: Các plugin lớp phủ khả năng tiếp cận (thêm một widget nổi với các nút "sửa") bị cộng đồng khả năng tiếp cận chỉ trích rộng rãi. Chúng không làm cho một trang web trở nên khả năng tiếp cận—chúng thêm một lớp bề mặt có thể thực sự gây cản trở công nghệ hỗ trợ. Tập trung vào việc xây dựng khả năng tiếp cận vào chủ đề và nội dung của bạn thay vì dựa vào các lớp phủ.
Để biết thêm chi tiết, hãy tham khảo tài liệu chính thức: Hướng dẫn WCAG, Nhóm Truy cập WordPress.
Các Câu Hỏi Thường Gặp
WordPress có khả năng tiếp cận ngay từ đầu không?
Nhân tố cốt lõi của WordPress đã cải thiện đáng kể về khả năng tiếp cận. Bảng điều khiển quản trị chủ yếu có thể điều hướng bằng bàn phím, và trình chỉnh sửa khối bao gồm các nhãn ARIA. Tuy nhiên, khả năng tiếp cận của trang web của bạn phụ thuộc nhiều vào chủ đề và các plugin bạn sử dụng. Một chủ đề có cấu trúc HTML kém sẽ làm suy yếu các tính năng khả năng tiếp cận tích hợp của WordPress.
Tôi có cần một trang web khả năng tiếp cận theo luật không?
Ở nhiều khu vực pháp lý, có. ADA (Mỹ), Luật Khả Năng Tiếp Cận Châu Âu (EU, có hiệu lực từ tháng 6 năm 2025), AODA (Canada), và các luật tương tự yêu cầu các trang web phải có khả năng tiếp cận. Các yêu cầu cụ thể phụ thuộc vào vị trí, loại hình kinh doanh và đối tượng của bạn. Tham khảo ý kiến một chuyên gia pháp lý để biết các yêu cầu cụ thể cho tình huống của bạn.
Khả năng tiếp cận có ảnh hưởng đến SEO không?
Có, có sự chồng chéo đáng kể. Cấu trúc tiêu đề đúng, văn bản alt mô tả, HTML ngữ nghĩa, tốc độ tải trang nhanh và thân thiện với di động đều có lợi cho cả khả năng tiếp cận và SEO. Các trang web tuân theo hướng dẫn WCAG thường có thứ hạng tốt hơn vì chúng cung cấp trải nghiệm người dùng tốt hơn về cơ bản. Để biết các thực hành tốt nhất về SEO, hãy xem danh sách kiểm tra của chúng tôi.
Các trình tạo trang có thể tạo ra các trang web khả năng tiếp cận không?
Elementor và các trình tạo trang khác có thể tạo nội dung khả năng tiếp cận nếu được sử dụng đúng cách. Chìa khóa là đảm bảo cấu trúc tiêu đề đúng, thêm văn bản alt cho hình ảnh, sử dụng các widget ngữ nghĩa (nút thay vì div được định kiểu), và kiểm tra điều hướng bằng bàn phím. Chính trình tạo không xác định khả năng tiếp cận—cách bạn sử dụng nó mới là điều quan trọng.
Sai lầm khả năng tiếp cận phổ biến nhất trên các trang WordPress là gì?
Văn bản alt bị thiếu hoặc không đầy đủ trên hình ảnh là vi phạm WCAG thường được báo cáo nhất. Vi phạm phổ biến thứ hai là độ tương phản màu không đủ. Cả hai đều dễ sửa—chúng yêu cầu sự chú ý và thực hành nhất quán hơn là chuyên môn kỹ thuật.
Làm thế nào để tôi làm cho WooCommerce có khả năng tiếp cận?
Các mẫu mặc định của WooCommerce có khả năng tiếp cận hợp lý. Các khu vực chính cần xác minh: văn bản alt cho hình ảnh sản phẩm, nhãn biểu mẫu trên các trường thanh toán, khả năng điều hướng bằng bàn phím của giỏ hàng và quy trình thanh toán, và thông báo lỗi khả năng tiếp cận cho các lỗi xác thực biểu mẫu. Sử dụng một chủ đề khả năng tiếp cận làm nền tảng sẽ giảm đáng kể công việc cần thiết cho WooCommerce.
Xây Dựng Các Trang WordPress Có Khả Năng Tiếp Cận
Bắt đầu với nền tảng chủ đề khả năng tiếp cận. Duyệt qua các chủ đề nhẹ, được mã hóa tốt ưu tiên HTML ngữ nghĩa và tuân thủ WCAG.
Duyệt Các Chủ Đề Khả Năng Tiếp Cận →
