Để trình đọc màn hình hiển thị giao diện người dùng bằng giọng nói cho người dùng, các phần tử có ý nghĩa phải có nhãn hoặc văn bản thay thế phù hợp. Phương thức thay thế nhãn hoặc văn bản cung cấp cho một phần tử có tên thành phần hỗ trợ tiếp cận. Đây là một trong những thuộc tính chính để biểu thị ngữ nghĩa của phần tử trong cây hỗ trợ tiếp cận.
Khi kết hợp tên một phần tử với vai trò của phần tử đó, tên đó sẽ cung cấp bối cảnh người dùng để họ có thể hiểu được loại phần tử mà họ đang tương tác và cách phần tử đó được thể hiện trên trang. Nếu không có tên, thì trình đọc màn hình sẽ chỉ thông báo vai trò của phần tử đó. Hãy tưởng tượng bạn đang cố gắng di chuyển trên một trang và nghe thấy "nút", "hộp đánh dấu", "hình ảnh" mà không có ngữ cảnh bổ sung nào. Đây là lý do tại sao việc gắn nhãn và các văn bản thay thế lại đóng vai trò quan trọng đối với một trải nghiệm chất lượng cao và dễ tiếp cận.
Kiểm tra tên của một phần tử
Bạn có thể dễ dàng kiểm tra tên có thể truy cập của một phần tử bằng cách sử dụng Công cụ cho nhà phát triển của Chrome:
- Nhấp chuột phải vào một phần tử rồi chọn Kiểm tra. Thao tác này sẽ mở bảng điều khiển Phần tử cho nhà phát triển.
- Trong bảng điều khiển Phần tử, hãy tìm ngăn Hỗ trợ tiếp cận. Biểu tượng này có thể bị ẩn sau biểu tượng
». - Trong trình đơn thả xuống Computed Properties (Thuộc tính được tính toán), hãy tìm thuộc tính Name (Tên).
Cho dù bạn đang xem img có văn bản alt hay input có label, tất cả các trường hợp này đều dẫn đến cùng một kết quả: đặt cho một phần tử tên thành phần hỗ trợ tiếp cận.
Kiểm tra xem có tên còn thiếu không
Có nhiều cách để thêm tên thành phần hỗ trợ tiếp cận vào một phần tử, tuỳ thuộc vào loại phần tử đó. Bảng sau đây liệt kê các loại phần tử phổ biến nhất cần có tên thành phần hỗ trợ tiếp cận và đường liên kết đến phần giải thích về cách thêm các phần tử đó.
| Loại phần tử | Cách thêm tên |
|---|---|
| Tài liệu HTML | Gắn nhãn tài liệu và khung |
Phần tử <frame> hoặc <iframe>
|
Gắn nhãn tài liệu và khung |
| Số phần tử hình ảnh | Bao gồm các lựa chọn thay thế văn bản cho hình ảnh và đối tượng |
<input type="image"> phần tử
|
Bao gồm các lựa chọn thay thế văn bản cho hình ảnh và đối tượng |
<object> phần tử
|
Bao gồm các lựa chọn thay thế văn bản cho hình ảnh và đối tượng |
| Nút | Gắn nhãn các nút và đường liên kết |
| Liên kết | Gắn nhãn các nút và đường liên kết |
| Phần tử biểu mẫu | Thành phần biểu mẫu nhãn |
Gắn nhãn tài liệu và khung
Mỗi trang nên có một phần tử title giải thích ngắn gọn nội dung của trang. Phần tử title đặt cho trang tên thành phần hỗ trợ tiếp cận. Khi trình đọc màn hình truy cập vào trang, đây là văn bản đầu tiên được thông báo.
Ví dụ: trang bên dưới có tiêu đề "Công thức làm bánh nhanh của Mary's Maple Bar":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Tương tự, mọi phần tử frame hoặc iframe đều phải có thuộc tính title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Mặc dù nội dung của iframe có thể chứa phần tử title nội bộ riêng, nhưng trình đọc màn hình thường dừng ở ranh giới khung và thông báo vai trò của phần tử – "khung" (frame) cũng như tên thành phần hỗ trợ tiếp cận do thuộc tính title cung cấp. Việc này cho phép người dùng quyết định xem họ muốn đi vào khung hình hay bỏ qua khung hình đó.
Bao gồm các lựa chọn thay thế văn bản cho hình ảnh và đối tượng
img phải luôn đi kèm với thuộc tính alt để cung cấp cho hình ảnh tên thành phần hỗ trợ tiếp cận. Nếu hình ảnh không tải được, văn bản alt sẽ được dùng làm phần giữ chỗ để người dùng biết được hình ảnh đang cố gắng truyền tải nội dung gì.
Việc viết văn bản alt hay là một nghệ thuật, nhưng bạn có thể tuân theo một số nguyên tắc sau:
- Xác định xem hình ảnh có cung cấp nội dung mà bạn khó đạt được khi đọc văn bản xung quanh hay không.
- Nếu có, hãy truyền đạt nội dung càng ngắn gọn càng tốt.
Nếu hình ảnh có vai trò trang trí và không cung cấp nội dung hữu ích nào, thì bạn có thể cung cấp cho hình ảnh thuộc tính alt="" trống để xoá hình ảnh đó khỏi cây hỗ trợ tiếp cận.
Hình ảnh dưới dạng đường liên kết và dữ liệu đầu vào
Hình ảnh được gói trong đường liên kết phải sử dụng thuộc tính alt của img để mô tả nơi người dùng sẽ chuyển đến khi nhấp vào đường liên kết:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Tương tự, nếu bạn dùng một phần tử <input type="image"> để tạo nút hình ảnh, thì phần tử đó phải chứa văn bản alt mô tả thao tác xảy ra khi người dùng nhấp vào nút đó:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Đối tượng được nhúng
Các phần tử <object>, thường dùng để nhúng như Flash, PDF hoặc ActiveX, cũng phải chứa văn bản thay thế. Tương tự như hình ảnh, văn bản này sẽ xuất hiện nếu phần tử không kết xuất được. Văn bản thay thế sẽ nằm bên trong phần tử object dưới dạng văn bản thông thường, chẳng hạn như "Báo cáo hằng năm" dưới đây:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Gắn nhãn các nút và đường liên kết
Các nút và đường liên kết thường đóng vai trò quan trọng đối với trải nghiệm trên một trang web và điều quan trọng là cả hai đều phải có tên dễ tiếp cận.
Nút
Phần tử button luôn cố gắng tính toán tên thành phần hỗ trợ tiếp cận bằng cách sử dụng nội dung văn bản. Đối với các nút không thuộc form, việc viết một thao tác rõ ràng vì nội dung văn bản có thể là tất cả những gì bạn cần để tạo một tên dễ tiếp cận.
<button>Book Room</button>
Một ngoại lệ phổ biến đối với quy tắc này là các nút biểu tượng. Nút biểu tượng có thể sử dụng hình ảnh hoặc phông chữ biểu tượng để cung cấp nội dung văn bản cho nút. Ví dụ: các nút dùng trong trình chỉnh sửa What You See Is What You Get (WYSIWYG) để định dạng văn bản thường chỉ là các ký hiệu đồ hoạ:
Khi thao tác với các nút biểu tượng, bạn nên đặt tên rõ ràng cho các nút này bằng thuộc tính aria-label. aria-label ghi đè mọi nội dung văn bản bên trong nút, cho phép bạn mô tả rõ ràng thao tác cho bất kỳ ai sử dụng trình đọc màn hình.
<button aria-label="Left align"></button>
Liên kết
Tương tự như các nút, đường liên kết chủ yếu nhận tên dễ tiếp cận qua nội dung văn bản. Một mẹo hay khi tạo đường liên kết là đặt đoạn văn bản có ý nghĩa nhất vào chính đường liên kết đó, thay vì điền các từ như "Ở đây" hoặc "Đọc thêm".
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Điều này đặc biệt hữu ích đối với trình đọc màn hình cung cấp lối tắt để liệt kê mọi đường liên kết trên trang. Nếu đường liên kết toàn là văn bản điền lặp lại, thì các khẩu lệnh nhanh này sẽ trở nên kém hữu ích hơn:
Phần tử biểu mẫu nhãn
Có 2 cách để liên kết nhãn với thành phần biểu mẫu, chẳng hạn như hộp đánh dấu. Một trong hai phương thức này đều khiến văn bản nhãn trở thành mục tiêu nhấp cho hộp đánh dấu. Điều này cũng hữu ích cho người dùng chuột hoặc màn hình cảm ứng. Để liên kết nhãn với một phần tử, hãy chọn một trong hai cách sau:
- Đặt phần tử đầu vào bên trong một phần tử nhãn
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Hoặc sử dụng thuộc tính
forcủa nhãn và tham chiếu đếnidcủa phần tử
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Khi hộp đánh dấu được gắn nhãn chính xác, trình đọc màn hình có thể báo cáo rằng phần tử có vai trò là hộp đánh dấu, ở trạng thái đã đánh dấu và có tên là "Nhận ưu đãi khuyến mãi?" như trong ví dụ về VoiceOver dưới đây:
VIỆC CẦN LÀM: DevSite – Bài đánh giá Think and Check