Content Description: khái niệm, nguyên tắc và cách thiết lập cho khả năng tiếp cận

Content Description trong trợ năng là gì

Content Description là thuộc tính chuỗi của một phần tử giao diện cung cấp biểu diễn văn bản của nội dung trực quan cho công nghệ hỗ trợ. Trình đọc màn hình (VoiceOver trên iOS, TalkBack trên Android) đọc to mô tả thay vì cố gắng nhận dạng phần tử một cách trực quan. Mô tả được áp dụng cho hình ảnh không có lớp văn bản, biểu tượng, biểu đồ, điều khiển tùy chỉnh và bất kỳ phần tử phi văn bản nào.

Theo Google Material Design, 2024, các phần tử không có contentDescription vi phạm WCAG 1.1.1 (Non-text Content). Kiểm tra của Accessibility Scanner cho thấy có tới 40% biểu tượng trong ứng dụng mua sắm thiếu mô tả. Người dùng VoiceOver chỉ nghe thấy “hình ảnh” hoặc “nút” mà không có thông tin cụ thể — giao diện như vậy trở nên không thể sử dụng để điều hướng.

Content Description không thay thế văn bản hiển thị của phần tử. Nếu nút có nhãn văn bản “Gửi”, không cần thiết lập mô tả bổ sung — trình đọc màn hình sẽ đọc văn bản. Đối với hình ảnh, biểu tượng và trường nhập liệu, mô tả là bắt buộc.

Các công cụ Accessibility Scanner (Android) và Xcode Accessibility Inspector (iOS) tự động kiểm tra sự tồn tại của mô tả. Nên chạy các kiểm tra này trên mọi màn hình trước khi phát hành.

Tại sao Content Description quan trọng: kịch bản người dùng

Người dùng khiếm thị phụ thuộc vào VoiceOver để hiểu giao diện. Nếu biểu tượng giỏ hàng không có mô tả, họ chỉ nghe thấy “nút”. Để biết nút làm gì, họ phải chạm mù — có nguy cơ thực hiện hành động không thể đảo ngược. Mô tả như “Xóa mặt hàng khỏi giỏ” giải quyết vấn đề này trong một giây.

Người dùng có hạn chế tạm thời (nắng gắt bên ngoài, màn hình vỡ) cũng sử dụng VoiceOver. Theo Apple Accessibility Report, 2023, khoảng 20% người dùng VoiceOver không bị khiếm thị vĩnh viễn — họ bật tính năng này theo tình huống.

WCAG 1.1.1: Nội dung phi văn bản

Tiêu chí WCAG 1.1.1 (Cấp A) yêu cầu mọi nội dung phi văn bản phải có lựa chọn thay thế bằng văn bản. Ngoại lệ: nội dung mang tính trang trí, chỉ được sử dụng để trình bày trực quan hoặc không truyền tải thông tin. Kiểm tra tính trang trí: nếu bạn xóa phần tử, ý nghĩa của trang có thay đổi không? Nếu không — có thể ẩn khỏi trình đọc màn hình.

Content Description khác Label như thế nào

Accessibility Label (accessibilityLabel trong iOS) là tên phần tử mà trình đọc màn hình đọc khi được lấy nét. Content Description (accessibilityHint trong iOS) là giải thích bổ sung được đọc sau tên và cho biết kết quả của một hành động.

Sự khác biệt rõ ràng với ví dụ về nút “Giỏ hàng”. Label: “Giỏ hàng”. Description: “Sẽ mở màn hình thanh toán”. VoiceOver nói: “Giỏ hàng. Sẽ mở màn hình thanh toán”. Nếu chỉ thiết lập Label, người dùng sẽ không biết điều gì xảy ra sau khi chạm.

Bảng: Label so với Description

Quy tắc: Label trả lời “Cái gì đây?”, Description trả lời “Điều gì sẽ xảy ra?”. Trong Android, contentDescription có thể đảm nhận cả hai vai trò, nhưng trong thực tế, tốt hơn nên tách chúng ra: sử dụng phép nối “[tên], [giải thích]”.

Khi nào Description quan trọng hơn Label

Đối với cử chỉ phức tạp (vuốt để xóa, nhấn giữ để mở menu ngữ cảnh), accessibilityHint là bắt buộc. Người dùng VoiceOver không biết về các cử chỉ ẩn trừ khi chúng được mô tả. Chỉ định: “Vuốt sang trái để xóa” trong hint của phần tử.

iOS: thuộc tính accessibilityHint

Trên nền tảng iOS, accessibilityHint được thiết lập thông qua thuộc tính cùng tên của UIView hoặc NSObject. Giá trị là một chuỗi tối đa 80 ký tự. VoiceOver đọc hint sau label khi chế độ mô tả chi tiết được bật (trong cài đặt VoiceOver — “Verbosity”).

Ví dụ thiết lập hint cho nút tùy chỉnh:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "Thêm vào yêu thích"
        self.accessibilityHint = "Sẽ lưu mặt hàng vào danh sách yêu thích"
    }
}

Đối với UIImageView không có nội dung văn bản, bắt buộc phải thiết lập isAccessibilityElement = true và accessibilityHint:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "Biểu đồ doanh số quý trước"

VoiceOver đọc: “Biểu đồ doanh số quý trước”. Nếu hint trống — chỉ “hình ảnh”. Apple HIG, 2024 khuyến nghị không sử dụng các động từ như “chạm” hoặc “nhấn” trong hint — VoiceOver tự động thêm hướng dẫn cử chỉ.

SwiftUI: bổ từ accessibilityHint

Trong SwiftUI, hint được thiết lập thông qua bổ từ chuỗi:

Image(systemName: "trash")
    .accessibilityLabel("Xóa")
    .accessibilityHint("Xóa vĩnh viễn phần tử đã chọn")

SwiftUI tự động kết hợp các bổ từ cho các view tổng hợp. Nếu Image nằm trong Button, SwiftUI sử dụng nhãn của nút làm accessibilityLabel chính.

Android: thuộc tính contentDescription

Trong Android, contentDescription được thiết lập trong đánh dấu XML hoặc bằng chương trình qua setContentDescription(). TalkBack đọc mô tả khi phần tử nhận được tiêu điểm.

Ví dụ trong XML:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="Tìm kiếm sản phẩm" />

Thiết lập bằng chương trình cho các phần tử động:

binding.iconSearch.contentDescription =
    "Tìm kiếm. Sẽ mở màn hình tìm kiếm với bộ lọc"

Đối với hình ảnh trang trí(dấu phân cách, nền, biểu tượng trang trí), hãy thiết lập contentDescription = "@null" hoặc setContentDescription(null) — TalkBack sẽ bỏ qua các phần tử này. Trong XML: android:contentDescription="@null". Chuỗi rỗng "" không hoạt động — TalkBack vẫn sẽ đọc “hình ảnh”.

Android: chi tiết quan trọng cho ImageButton và CheckBox

Đối với ImageButton, luôn thiết lập contentDescription — TalkBack không nhìn thấy văn bản trên hình ảnh. Đối với CheckBox, mô tả nên thay đổi động: “Đã chọn” / “Chưa chọn” thay vì mô tả tĩnh. Sử dụng setContentDescription trong trình lắng nghe trạng thái.

Quy tắc viết mô tả

Tính thông tin — mô tả nên truyền tải ý nghĩa, không phải hình thức. Không phải “Biểu tượng màu xanh có dấu tick”, mà là “Mặt hàng đã được thêm vào giỏ”. Trình đọc màn hình không quan tâm đến màu sắc — nó quan tâm đến kết quả.

Tính ngắn gọn — độ dài tối ưu là 2–4 từ (tối đa 80 ký tự). Mô tả dài làm chậm điều hướng: VoiceOver đọc tuần tự, mỗi từ là một giây thời gian của người dùng. Theo Apple WWDC 2023, “Accessibility by Design”, một cụm từ đọc hơn 5 giây sẽ làm gián đoạn luồng nhận thức.

Tính duy nhất — không nên có hai phần tử trên cùng một màn hình có cùng mô tả. Người dùng sẽ không thể phân biệt kết quả khi lấy nét vào phần tử thứ nhất so với phần tử thứ hai. Nếu có nhiều nút “Mua”, hãy thêm định danh: “Mua iPhone 15”, “Mua iPhone 15 Pro”.

Bản địa hóa — Content Description phải được dịch sang tất cả các ngôn ngữ mà ứng dụng hỗ trợ. Lỗi bản địa hóa trong mô tả là một trong những nguyên nhân phổ biến khiến Accessibility Review thất bại trên App Store.

Độ dài mô tả: nghiên cứu

Nghiên cứu của Nielsen Norman Group, 2024 chỉ ra rằng độ dài mô tả tối ưu cho trình đọc màn hình là 3–5 từ (tối đa 50 ký tự). Mô tả dài hơn làm giảm tốc độ điều hướng 30% vì người dùng phải đợi đọc xong trước bước tiếp theo.

Lỗi thường gặp khi sử dụng

Dư thừa — mô tả trùng lặp văn bản hiển thị. Nếu nút có văn bản “Gửi”, đừng thiết lập accessibilityHint = “Nút gửi”. VoiceOver sẽ tự động đọc văn bản và hint sẽ thêm nhiễu không cần thiết.

Nhầm lẫn với Label — sử dụng contentDescription thay cho label cho các nút văn bản. Trong iOS, accessibilityLabel phải khớp với văn bản của nút (hoặc để trống nếu văn bản đã hiển thị) và hint chỉ nên giải thích hành động. Theo Google Testing Blog, 2024, 23% ứng dụng được kiểm tra trên Play Store có mô tả trùng lặp.

Bỏ qua tính động — mô tả không được cập nhật khi trạng thái thay đổi. Ví dụ, mô tả của công tắc “Wi-Fi” vẫn là “Bật Wi-Fi” ngay cả sau khi đã bật. Cách tiếp cận đúng: thay đổi mô tả động thành “Tắt Wi-Fi” bằng cách theo dõi trạng thái.

Chu kỳ kết xuất và hồi quy

Sau khi cập nhật thiết kế (thay đổi biểu tượng, sắp xếp lại phần tử), Content Description thường bị mất. Lý do: nhà thiết kế thay thế hình ảnh và nhà phát triển không kiểm tra thuộc tính trợ năng của tài nguyên mới. Giải pháp: biến kiểm tra trợ năng thành bước bắt buộc trong đánh giá mã — thêm mục danh sách kiểm tra: “Content Description đã được cập nhật chưa?”

Cách kiểm tra Content Description

• Trong iOS: Xcode → Accessibility Inspector — chọn phần tử, kiểm tra trường Label và Hint
• Trong Android: cài đặt Accessibility Scanner từ Play Store — chạy trên màn hình của bạn
• Trên cả hai nền tảng: bật VoiceOver/TalkBack và điều hướng toàn bộ màn hình bằng cử chỉ
• Viết kiểm thử UI kiểm tra contentDescription cho tất cả ImageView

Ví dụ kiểm thử UI cho iOS

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}