Có thể nhận biết
Bài viết này cung cấp lời khuyên thực tế về cách viết nội dung web sao cho phù hợp với các tiêu chí thành công được nêu trong nguyên tắc Có thể nhận biết của Web Content Accessibility Guidelines (WCAG) 2.0 và 2.1. Có thể nhận biết có nghĩa là người dùng phải có thể nhận biết nội dung theo một cách nào đó, bằng một hoặc nhiều giác quan của họ.
Note: Để đọc các định nghĩa của W3C về Có thể nhận biết và các hướng dẫn cũng như tiêu chí thành công của nó, xem Nguyên tắc 1: Có thể nhận biết - Thông tin và các thành phần giao diện người dùng phải có thể trình bày cho người dùng theo những cách họ có thể nhận biết.
Hướng dẫn 1.1 - Cung cấp văn bản thay thế cho nội dung không phải văn bản
Điểm mấu chốt ở đây là văn bản có thể được chuyển sang các dạng khác mà người khuyết tật có thể dùng. Ví dụ, nó có thể được trình đọc màn hình đọc thành tiếng, chuyển sang bản in lớn, hoặc hiển thị trên màn hình chữ nổi Braille. Nội dung không phải văn bản đề cập đến các phương tiện đa phương tiện như hình ảnh, âm thanh, và video.
| Tiêu chí thành công | Cách đáp ứng tiêu chí | Tài nguyên thực hành |
|---|---|---|
| 1.1.1 Cung cấp tương đương văn bản (A) | Tất cả hình ảnh truyền tải nội dung có ý nghĩa nên được cung cấp văn bản thay thế phù hợp. | Văn bản thay thế. |
Hình ảnh hoặc biểu đồ phức tạp nên có một phương án thay thế có thể
truy cập, либо ngay trên cùng trang hoặc thông qua một liên kết. Hãy
dùng liên kết thông thường thay vì thuộc tính longdesc.
|
Mô tả văn bản có thể phù hợp, hoặc một bảng dữ liệu có thể truy cập
(xem khả năng truy cập bảng HTML). Xem
Image Description Extension (longdesc)
của W3C để biết lập luận phản đối |
|
| Nội dung đa phương tiện (tức âm thanh hoặc video) ít nhất nên có một dạng nhận diện mô tả sẵn, chẳng hạn chú thích hoặc tương tự. |
Xem Văn bản thay thế cho các tùy chọn chú thích tĩnh, và Bản ghi âm thanh, Các bản văn bản của video cho các phương án thay thế khác. |
|
| Các điều khiển giao diện như phần tử biểu mẫu và nút nên có nhãn văn bản mô tả mục đích của chúng. |
Nút thì đơn giản - bạn nên bảo đảm văn bản của nút mô tả chức năng của
nút (ví dụ, <button>Tải ảnh lên</button>). Để biết thêm thông tin về các điều khiển giao diện khác, xem
Hãy dùng điều khiển giao diện ngữ nghĩa khi có thể.
|
|
| Triển khai các hình ảnh, video, v.v. mang tính trang trí (không phải nội dung) theo cách vô hình với công nghệ hỗ trợ, để nó không làm người dùng bối rối. |
Hình ảnh trang trí nên được triển khai bằng ảnh nền CSS (xem
Nền và đường viền). Nếu bạn buộc phải chèn hình ảnh bằng phần tử
Nếu bạn đưa video hoặc âm thanh nền tự phát, hãy làm nó càng ít gây chú ý càng tốt. Đừng để nó trông/nghe như nội dung, và hãy cung cấp một điều khiển để tắt nó đi. Tốt nhất là đừng đưa nó vào. |
Note: Cũng xem mô tả WCAG cho Hướng dẫn 1.1: Văn bản thay thế.
Hướng dẫn 1.2 - Cung cấp văn bản thay thế cho phương tiện có thời lượng
Phương tiện có thời lượng đề cập đến nội dung đa phương tiện có độ dài, chẳng hạn âm thanh và video. Lưu ý rằng nếu audio/video đóng vai trò như một phương án thay thế cho nội dung văn bản đã có, bạn không cần cung cấp thêm văn bản thay thế khác.
| Tiêu chí thành công | Cách đáp ứng tiêu chí | Tài nguyên thực hành |
|---|---|---|
| 1.2.1 Cung cấp phương án thay thế cho nội dung chỉ âm thanh và chỉ video đã ghi sẵn (A) | Cần có bản ghi cho phương tiện chỉ âm thanh đã ghi sẵn, và cần có bản ghi hoặc mô tả âm thanh cho video chỉ hình đã ghi sẵn (tức video không tiếng). | Xem Bản ghi âm thanh để biết thông tin về bản ghi. Hiện chưa có hướng dẫn nào về mô tả âm thanh. |
| 1.2.2 Cung cấp phụ đề cho video trên web (A) | Bạn nên cung cấp phụ đề cho video được trình bày trên web (ví dụ, video HTML). Điều này có lợi cho những người không nghe được phần âm thanh của video. | Xem Các bản văn bản của video để biết phụ đề cho video HTML. Xem thêm Thêm phụ đề và chú thích đóng của riêng bạn (YouTube). |
| 1.2.3 Cung cấp bản ghi văn bản hoặc mô tả âm thanh cho video trên web (A) | Bạn nên cung cấp bản ghi văn bản hoặc mô tả âm thanh cho video được trình bày trên web (ví dụ, video HTML). Điều này có lợi cho những người không nhìn thấy phần hình ảnh của video và không nhận được đầy đủ nội dung chỉ từ âm thanh. | Xem Bản ghi âm thanh để biết thông tin về bản ghi. Hiện chưa có hướng dẫn nào về mô tả âm thanh. |
| 1.2.4 Cung cấp phụ đề cho âm thanh trực tiếp (AA) | Bạn nên cung cấp phụ đề đồng bộ cho mọi phương tiện trực tiếp có chứa âm thanh (ví dụ, hội nghị video, phát thanh trực tiếp). | |
| 1.2.5 Cung cấp mô tả âm thanh cho video đã ghi sẵn (AA) | Nên cung cấp mô tả âm thanh cho video đã ghi sẵn, nhưng chỉ ở nơi âm thanh hiện có không truyền tải đầy đủ ý nghĩa được video thể hiện. | |
| 1.2.6 Cung cấp ngôn ngữ ký hiệu tương đương với âm thanh đã ghi sẵn (AAA) | Nên cung cấp một video ngôn ngữ ký hiệu tương đương cho mọi nội dung đã ghi sẵn có chứa âm thanh. | |
| 1.2.7 Cung cấp video mở rộng kèm mô tả âm thanh (AAA) | Khi không thể cung cấp mô tả âm thanh (xem 1.2.5) do vấn đề thời lượng video (ví dụ, không có khoảng dừng phù hợp trong nội dung để chèn mô tả âm thanh), nên cung cấp một phiên bản thay thế của video có chèn các khoảng dừng (và mô tả âm thanh). | |
| 1.2.8 Cung cấp phương án thay thế cho phương tiện đã ghi sẵn (AAA) | Đối với mọi nội dung có video, nên cung cấp bản ghi văn bản mô tả, ví dụ như kịch bản của bộ phim bạn đang xem. Điều này có lợi cho người khiếm thính không nghe được nội dung. | Xem Bản ghi âm thanh để biết thông tin về bản ghi. |
| 1.2.9 Cung cấp bản ghi cho âm thanh trực tiếp (AAA) | Đối với bất kỳ nội dung âm thanh trực tiếp nào đang được phát, nên cung cấp văn bản mô tả, ví dụ như kịch bản của vở kịch hoặc buổi nhạc bạn đang nghe. Điều này có lợi cho người khiếm thính không nghe được nội dung. | Xem Bản ghi âm thanh để biết thông tin về bản ghi. |
Hướng dẫn 1.3 - Tạo nội dung có thể được trình bày theo nhiều cách khác nhau
Hướng dẫn này đề cập đến khả năng nội dung có thể được người dùng tiếp nhận theo nhiều cách, phù hợp với các nhu cầu khác nhau của họ.
| Tiêu chí thành công | Cách đáp ứng tiêu chí | Tài nguyên thực hành |
|---|---|---|
| 1.3.1 Thông tin và quan hệ (A) |
Bất kỳ cấu trúc nội dung nào - hoặc quan hệ trực quan được tạo ra giữa các nội dung - cũng có thể được xác định bằng lập trình, hoặc được suy ra từ mô tả văn bản. Những tình huống chính liên quan là:
|
Toàn bộ
HTML: Nền tảng tốt cho khả năng truy cập chứa rất nhiều thông tin về vấn đề này, nhưng bạn nên đặc biệt tham khảo Ngữ nghĩa tốt, Hãy dùng điều khiển giao diện ngữ nghĩa khi có thể, và Văn bản thay thế. |
| 1.3.2 Chuỗi nội dung có ý nghĩa (A) | Trật tự đọc hợp lý, có logic nên dễ xác định đối với mọi nội dung, ngay cả khi nó được trình bày trực quan theo cách không bình thường. Trật tự đó nên được thể hiện rõ bằng cách dùng các phần tử ngữ nghĩa đúng (ví dụ, tiêu đề, đoạn văn), còn CSS được dùng để tạo các kiểu bố cục bất thường, bất kể markup. | Một lần nữa, hãy tham khảo HTML: Nền tảng tốt cho khả năng truy cập. |
| 1.3.3 Đặc điểm cảm quan (A) |
Hướng dẫn vận hành điều khiển hoặc hiểu nội dung không được phụ thuộc vào một giác quan duy nhất. Điều này có thể làm cho người khuyết tật liên quan đến giác quan đó, hoặc thiết bị không hỗ trợ giác quan đó, không thể truy cập. Ví dụ:
Lưu ý: Truyền đạt hướng dẫn chỉ bằng màu sắc có liên quan, nhưng được bao phủ trong một hướng dẫn khác - 1.4.1. |
|
| 1.3.4 Hướng hiển thị (AA) | Nội dung không được giới hạn việc xem và vận hành chỉ ở một hướng hiển thị duy nhất, chẳng hạn dọc hoặc ngang, trừ khi một hướng hiển thị cụ thể là thiết yếu. | |
| 1.3.5 Xác định mục đích đầu vào (AA) |
Làm theo danh sách 53 trường đầu vào để xác định mục đích của một trường bằng lập trình. |
Hiểu về Xác định Mục đích Đầu vào |
| 1.3.6 Xác định mục đích (AAA) | Trong nội dung được triển khai bằng ngôn ngữ markup, mục đích của các thành phần giao diện người dùng, biểu tượng, và vùng có thể được xác định bằng lập trình. | Hiểu về Xác định Mục đích |
Hướng dẫn 1.4: Làm cho người dùng dễ nhìn và nghe nội dung hơn, bao gồm tách tiền cảnh khỏi nền
Hướng dẫn này liên quan đến việc bảo đảm nội dung cốt lõi dễ phân biệt với nền và các yếu tố trang trí khác. Ví dụ điển hình là màu sắc (cả tương phản màu và việc dùng màu để truyền đạt hướng dẫn), nhưng nó cũng áp dụng trong những tình huống khác.
| Tiêu chí thành công | Cách đáp ứng tiêu chí | Tài nguyên thực hành |
|---|---|---|
| 1.4.1 Dùng màu sắc (A) |
Không nên chỉ dựa vào màu sắc để truyền đạt thông tin. Ví dụ, trong biểu mẫu, bạn không bao giờ nên đánh dấu các trường bắt buộc chỉ bằng một màu (như đỏ). Thay vào đó (hoặc đồng thời), một dấu sao cùng nhãn "bắt buộc" sẽ phù hợp hơn. |
Xem Việc dùng màu sắc, Màu sắc và độ tương phản màu, và Nhãn nhiều hơn một. |
| 1.4.2 Điều khiển âm thanh (A) | Với bất kỳ âm thanh nào phát dài hơn ba giây, hãy cung cấp điều khiển có thể truy cập để phát và tạm dừng âm thanh/video, và để tắt/bật âm lượng. |
Dùng các <button> gốc để cung cấp điều khiển bàn
phím có thể truy cập, như được minh họa trong
Video player styling basics.
|
| 1.4.3 Độ tương phản tối thiểu (AA) |
Độ tương phản màu giữa nền và nội dung phía trước nên đạt mức tối thiểu để bảo đảm khả năng đọc:
|
Xem Tương phản màu và Màu sắc và độ tương phản màu. |
| 1.4.4 Phóng to văn bản (AA) | Trang nên đọc được và sử dụng được khi kích thước văn bản được nhân đôi. Điều này có nghĩa là thiết kế nên có khả năng phản hồi, để khi kích thước văn bản tăng lên thì nội dung vẫn còn truy cập được. | |
| 1.4.5 Hình ảnh của văn bản (AA) | KHÔNG nên dùng hình ảnh để trình bày nội dung mà văn bản có thể làm tốt công việc đó. Ví dụ, nếu một hình ảnh chủ yếu là văn bản, nó cũng có thể được biểu diễn bằng văn bản cùng với hình ảnh. | |
| 1.4.6 Tương phản tăng cường (AAA) |
Tiêu chí này theo sau, và mở rộng, tiêu chí 1.4.3.
|
Xem Màu sắc và độ tương phản màu. |
| 1.4.7 Âm thanh nền thấp hoặc không có (AAA) | Các bản ghi âm đã ghi sẵn chủ yếu là lời nói nên có tiếng nền ở mức tối thiểu, để nội dung có thể được hiểu dễ dàng. | |
| 1.4.8 Trình bày trực quan (AAA) |
Đối với trình bày nội dung văn bản, các điều sau nên đúng:
|
|
| 1.4.9 Hình ảnh của văn bản (Không ngoại lệ) (AAA) | Văn bản không nên được trình bày như một phần của hình ảnh, trừ khi nó chỉ là trang trí (tức là không truyền đạt nội dung nào) hoặc không thể được trình bày theo bất kỳ cách nào khác. | |
| 1.4.10 Tái bố cục (AA) |
|
Hiểu về Tái bố cục |
| 1.4.11 Tương phản không phải văn bản (AA) | Tỷ lệ tương phản màu tối thiểu 3:1 cho các thành phần giao diện người dùng và các đối tượng đồ họa. | Hiểu về Tương phản không phải văn bản |
| 1.4.12 Giãn cách văn bản (AA) |
Không có sự mất nội dung hay chức năng nào xảy ra khi áp dụng các kiểu sau:
|
Hiểu về Giãn cách văn bản |
| 1.4.13 Nội dung khi rê chuột hoặc focus (AA) |
Mặc dù nội dung bổ sung có thể xuất hiện và biến mất đồng bộ với việc rê chuột và focus bằng bàn phím, tiêu chí thành công này quy định ba điều kiện phải được đáp ứng:
|
Hiểu về Nội dung khi rê chuột hoặc focus |
Note: Cũng xem mô tả WCAG cho Hướng dẫn 1.4: Có thể phân biệt: Làm cho người dùng dễ nhìn và nghe nội dung hơn, bao gồm tách tiền cảnh khỏi nền.