Để 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, 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 phương án thay thế cung cấp cho một phần tử tên có thể truy cập, một trong các thuộc tính chính để biểu thị ngữ nghĩ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ử đó, bối cảnh của người dùng để họ có thể hiểu được loại phần tử nào đang tương tác và cách thông tin đượ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à thính giác, "nút" "hộp kiểm," "hình ảnh" mà không có ngữ cảnh. Đây là lý do khiến việc gắn nhãn và thay thế văn bản lại có vai trò quan trọng trong việc giúp dễ tiếp cận.
Kiểm tra tên của một phần tử
Dễ dàng kiểm tra tên 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ở Công cụ cho nhà phát triển Bảng điều khiển Phần tử.
- Trong bảng điều khiển Phần tử, tìm ngăn Hỗ trợ tiếp cận. Nội dung này có thể bị ẩn
sau ký hiệu
». - Trong trình đơn thả xuống Computed Properties (Thuộc tính đã 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, thì tất cả các tình huống này đều dẫn đến cùng một kết quả: đưa ra
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 mã. 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 để giải thích cách thêm thông tin.
| 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 | Đường liên kết và nút gắn nhãn |
| Đường liên kết | Đường liên kết và nút gắn nhãn |
| Thành phần 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ó
title
giải thích ngắn gọn chủ đề của trang. Phần tử title cung cấp
tên thành phần hỗ trợ tiếp cận của 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 công bố.
Ví dụ: trang bên dưới có tiêu đề "Công thức nướng bánh nhanh cho quầy 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ò – "khung" – và tên thành phần hỗ trợ tiếp cận, do thuộc tính title cung cấp. Chiến dịch này
cho phép người dùng quyết định 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
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 được dùng làm phần giữ chỗ để người dùng biết được hình ảnh đó là gì
cố gắng truyền tải.
Viết được văn bản alt phù hợp cũng là một nghệ thuật, nhưng bạn cần tuân thủ một số nguyên tắc
bạn có thể theo dõi:
- Xác định xem hình ảnh đó có cung cấp nội dung khó khăn đọc được văn bản xung quanh.
- 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 chỉ dùng để trang trí và không cung cấp nội dung hữu ích nào,
bạn có thể cung cấp cho thuộc tính alt="" trống để loại bỏ thuộc tính này khỏi tính năng hỗ trợ tiếp cận
cây xanh.
Hình ảnh dưới dạng đường liên kết và thông tin đầ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ẽ được 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 phần tử <input type="image"> được dùng để tạo một hình ảnh
, nút này 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
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
hiển thị nếu phần tử không kết xuất đượ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>
Gắn nhãn cho nút và đường liên kết
Các nút và đường liên kết thường có vai trò cực kỳ quan trọng đối với trải nghiệm của một trang web. quan trọng là cả hai tên đều 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 phải là một phần của form, hãy ghi chú giải rõ ràng
hành động vì nội dung văn bản có thể là tất cả những gì bạn cần để tạo
.
<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 được sử dụng trong trình soạn thảo What You See Is What You Get (WYSIWYG) để định dạng văn bản thường chỉ là những biểu tượng đồ hoạ:
Khi làm việc với các nút biểu tượng, có thể hữu ích khi cung cấp cho chúng
tên thành phần hỗ trợ tiếp cận bằng thuộc tính aria-label. aria-label ghi đè bất kỳ giá trị nào
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
bất kỳ ai sử dụng trình đọc màn hình.
<button aria-label="Left align"></button>
Đường liên kết
Tương tự như nút, đường liên kết chủ yếu lấy tên thành công từ văn bản nội dung. Một mẹo hay khi tạo đường liên kết là đặt phần có ý nghĩa nhất văn bản vào chính đường liên kết, thay vì các từ đơn giản 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 với các trình đọc màn hình cung cấp lối tắt để liệt kê tất cả số đườ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ì đây là các lối tắt trở nên kém hữu ích hơn nhiều:
Nhãn thành phần biểu mẫu
Có hai cách để liên kết nhãn với yếu tố biểu mẫu, chẳng hạn như hộp đánh dấu. Một trong hai phương pháp này cũng khiến văn bản nhãn trở thành mục tiêu nhấp chuột cho hộp kiểm, 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 có phần tử:
- Đặ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>
- Bạn cũng có thể 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 khuyến mãi?" như trong ví dụ về VoiceOver dưới đây:
VIỆC CẦN LÀM: DevSite – Bài đánh giá Suy nghĩ và kiểm tra