Để trình đọc màn hình trình bày giao diện người dùng bằng lời nói cho người dùng, các thành phần có ý nghĩa phải có nhãn hoặc văn bản thay thế thích hợp. Nhãn hoặc văn bản thay thế cung cấp cho phần tử một tên có thể truy cập, 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 tên của một phần tử được kết hợp với vai trò của phần tử đó, tên này sẽ cung cấp ngữ cảnh cho 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 chỉ thông báo vai trò của phần tử. Hãy tưởng tượng bạn đang cố gắng điều hướng một trang và nghe thấy "nút", "hộp đánh dấu", "hình ảnh" mà không có bất kỳ ngữ cảnh bổ sung nào. Đó là lý do tại sao việc gắn nhãn và văn bản thay thế là rất quan trọng để mang lại trải nghiệm tốt 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 hỗ trợ tiếp cận của một phần tử bằng cách sử dụng Công cụ của Chrome cho nhà phát triển:
- 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 Thành phần DevTools.
- Trong bảng điều khiển Thành phần, hãy tìm ngăn Hỗ trợ tiếp cận. Nó có thể bị ẩn sau ký hiệu
». - 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 tên hỗ trợ tiếp cận cho phần tử.
Kiểm tra xem có tên nào bị thiếu không
Có nhiều cách để thêm tên có thể truy cập 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 dễ tiếp cận và đường liên kết đến nội dung giải thích 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 cho tài liệu và khung |
Phần tử <frame> hoặc <iframe>
|
Gắn nhãn cho tài liệu và khung |
| Số phần tử hình ảnh | Bao gồm văn bản thay thế cho hình ảnh và đối tượng |
<input type="image"> phần tử
|
Bao gồm văn bản thay thế cho hình ảnh và đối tượng |
<object> phần tử
|
Bao gồm văn bản thay thế cho hình ảnh và đối tượng |
| Nút | Gắn nhãn cho nút và đường liên kết |
| Liên kết | Gắn nhãn cho nút và đường liên kết |
| Phần tử biểu mẫu | Nhãn các phần tử biểu mẫu |
Gắn nhãn cho tài liệu và khung
Mỗi trang phải có một phần tử title giải thích ngắn gọn về nội dung của trang. Phần tử title cung cấp tên dễ đọc cho trang. 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 Maple Bar nhanh của Mary":
<!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" – và tên có thể truy cập của phần tử đó, do thuộc tính title cung cấp. Thao tác này cho phép người dùng quyết định xem họ có muốn nhập khung hay bỏ qua khung đó hay không.
Thêm văn bản thay thế cho hình ảnh và đối tượng
img phải luôn đi kèm với thuộc tính alt để đặt tên có thể truy cập cho hình ảnh. 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 hiểu được nội dung mà hình ảnh muốn truyền tải.
Việc viết văn bản alt hay cũng là một nghệ thuật, nhưng bạn có thể làm theo một số nguyên tắc sau:
- Xác định xem hình ảnh có cung cấp nội dung khó có thể đạt được khi đọc văn bản xung quanh hay không.
- Nếu có, hãy truyền tải nội dung một cách ngắn gọn nhất có thể.
Nếu hình ảnh đóng vai trò trang trí và không cung cấp nội dung hữu ích nào, bạn có thể gán cho hình ảnh đó một 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 một đườ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 nếu họ 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 sử dụng 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ả hành động 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 được 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ẽ hiển thị nếu phần tử không hiển thị được. Văn bản thay thế 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" ở bên dưới:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Nhãn nút và đường liên kết
Nút và đường liên kết thường đóng vai trò quan trọng đối với trải nghiệm của một trang web. Vì vậy, điều quan trọng là cả hai đều phải có tên dễ truy cập.
Nút
Phần tử button luôn cố gắng tính toán tên có thể truy cập bằng nội dung văn bản của phần tử đó. Đối với các nút không thuộc form, bạn chỉ cần viết một thao tác rõ ràng làm nội dung văn bản là có thể tạo một tên dễ truy cập.
<button>Book Room</button>
Một trường hợp ngoại lệ phổ biến đối với quy tắc này là 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 làm việc với các nút biểu tượng, bạn nên đặt tên rõ ràng và dễ truy cập cho các nút đó 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 hành động 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 lấy tên hỗ trợ tiếp cận từ 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ì các từ đệm như "Tại đâ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 cho trình đọc màn hình cung cấp lối tắt để liệt kê tất cả các đường liên kết trên trang. Nếu các đường liên kết chứa đầy văn bản lấp đầy lặp lại, thì các phím tắt này sẽ trở nên kém hữu ích hơn nhiều:
Thành phần biểu mẫu nhãn
Có hai cách để liên kết nhãn với một phần tử biểu mẫu, chẳng hạn như hộp đánh dấu. Một trong hai phương thức này sẽ khiến văn bản nhãn cũng 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 một nhãn với một phần tử, hãy làm như sau:
- Đặt phần tử đầu vào bên trong 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 thành phần này có vai trò là hộp đánh dấu, đang ở trạng thái đã đánh dấu và có tên là "Receive promotional offers?" (Nhận ưu đãi khuyến mãi?) như trong ví dụ về VoiceOver bên dưới:
VIỆC CẦN LÀM: DevSite – Bài đánh giá về việc suy nghĩ và kiểm tra