Làm cho ứng dụng dễ tiếp cận hơn

Hãy tìm cách làm cho ứng dụng Android của bạn trở nên dễ sử dụng hơn cho mọi người, bao gồm cả những người cần hỗ trợ tiếp cận.

Người dùng thiết bị Android bao gồm cả những người mắc chứng suy giảm thị lực, mù màu, suy giảm thính lực, suy giảm độ linh hoạt, khuyết tật trí tuệ và nhiều dạng khuyết tật khác. Bằng việc chú trọng khả năng hỗ trợ tiếp cận khi phát triển ứng dụng, bạn có thể cải thiện trải nghiệm người dùng cho nhóm đối tượng cần hỗ trợ tiếp cận.

Trang này trình bày nguyên tắc triển khai các yếu tố hỗ trợ tiếp cận chính để mọi người có thể dễ dàng dùng ứng dụng của bạn. Để biết thêm hướng dẫn chi tiết về cách làm cho ứng dụng dễ tiếp cận hơn, hãy xem bài viết Nguyên tắc để cải thiện khả năng hỗ trợ tiếp cận cho ứng dụng.

Tăng khả năng hiển thị văn bản

Đối với mỗi tập văn bản trong ứng dụng, độ tương phản màu (hay sự khác biệt về độ sáng nhìn thấy giữa màu văn bản và màu nền phía sau văn bản) nên nằm trên một ngưỡng cụ thể. Ngưỡng chính xác phụ thuộc vào cỡ chữ của văn bản cũng như việc văn bản có được in đậm hay không:

  • Nếu văn bản nhỏ hơn 18sp hoặc nếu văn bản được in đậm và nhỏ hơn 14sp, hãy sử dụng màu nền trước và màu nền sao cho tỷ lệ tương phản màu tối thiểu là 4, 5:1.
  • Đối với tất cả các phần văn bản khác, hãy đặt tỷ lệ tương phản màu tối thiểu là 3:1.

Hình ảnh sau đây cho thấy hai ví dụ về độ tương phản giữa màu văn bản và màu nền:

Hai ví dụ về từ "Văn bản" trên nền có màu. Ví dụ bên trái có độ tương phản màu thấp giữa văn bản và nền, trong khi ví dụ bên phải có độ tương phản màu vừa đủ.
Hình 1. Độ tương phản màu thấp hơn mức đề xuất (bên trái) và độ tương phản vừa đủ (bên phải).

Để kiểm tra độ tương phản giữa màu văn bản so với màu nền trong ứng dụng, hãy sử dụng trình kiểm tra độ tương phản màu trực tuyến hoặc ứng dụng Trình quét hỗ trợ tiếp cận.

Dùng các thành phần điều khiển lớn và đơn giản

Giao diện người dùng của ứng dụng sẽ dễ sử dụng hơn nếu các thành phần điều khiển của ứng dụng dễ thấy và dễ nhấn. Đối với giao diện cảm ứng, mỗi phần tử trên giao diện người dùng tương tác nên có một khu vực có thể làm tiêu điểm hoặc kích thước đích chạm ít nhất là 48dp x 48dp. Nếu lớn hơn thì càng tốt.

Trong Jetpack Compose, nhiều thành phần Material tích hợp sẵn như Button, IconButton, và ListItem đã thực thi kích thước tối thiểu này. Tuy nhiên, khi tạo các thành phần tương tác tuỳ chỉnh, bạn cần tự đặt kích thước.

Trong đoạn mã sau, một phần tử trên giao diện người dùng nhỏ được hỗ trợ tiếp cận bằng cách cung cấp cho phần tử đó một đích chạm lớn hơn:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

Để biết thêm thông tin về kích thước đích chạm, hãy xem Kích thước đích chạm tối thiểu.

Mô tả từng phần tử trên giao diện người dùng

Đối với mỗi thành phần trên giao diện người dùng trong ứng dụng, hãy thêm nội dung mô tả cho biết mục đích của thành phần đó. Trong hầu hết trường hợp, bạn đưa thông tin mô tả này vào thuộc tính contentDescription của thành phần, như thể hiện trong đoạn mã sau:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

Xin lưu ý rằng bạn không cần cung cấp contentDescription cho các thành phần kết hợp Text. Các dịch vụ hỗ trợ tiếp cận của Android (như TalkBack) sẽ tự động thông báo văn bản đó.

Khi thêm nội dung mô tả vào các thành phần trên giao diện người dùng của ứng dụng, hãy lưu ý các phương pháp hay nhất sau đây:

  • Sử dụng nội dung mô tả để truyền tải mục đích và kết quả của hoạt động tương tác, chứ không phải các chi tiết trực quan. Sử dụng thuộc tính ngữ nghĩa Role (như Role.Button hoặc Role.Switch) để hiển thị loại thành phần trên giao diện người dùng. Nhờ vậy, trình đọc màn hình có thể thông báo chính xác về thành phần đó.

  • Tránh nội dung mô tả dư thừa. Ví dụ: nếu thao tác chọn nút khiến hành động "gửi" xảy ra trong ứng dụng, nội dung mô tả của nút phải là "Submit", chứ không phải "Submit button".

  • Mỗi phần mô tả phải riêng biệt. Như vậy, khi người dùng trình đọc màn hình bắt gặp nội dung mô tả lặp lại của một thành phần, họ sẽ nhận ra chính xác rằng tiêu điểm đang nằm trên một thành phần đã có tiêu điểm trước đó. Cụ thể, mỗi mục trong một danh sách như LazyColumn phải có nội dung mô tả riêng, mỗi nội dung mô tả phản ánh nội dung dành riêng cho một mục nhất định, chẳng hạn như tên của một thành phố trong danh sách địa điểm.

  • Sử dụng API hideFromAccessibility để đánh dấu các thành phần chỉ mang tính trang trí, nhờ đó các dịch vụ hỗ trợ tiếp cận có thể bỏ qua các thành phần này. Nếu một phần tử trên giao diện người dùng có tham số contentDescription nhưng chỉ mang tính trang trí (chẳng hạn như Icon là một phần của phần tử trên giao diện người dùng khác), hãy truyền null để tránh việc gắn nhãn dư thừa. Để biết thêm các trường hợp sử dụng phức tạp, hãy xem phần Hợp nhất và xoá.

  • Kiểm thử mã để đảm bảo nội dung mô tả được phân phối như dự kiến. Android Lint, kiểm thử Compose và các công cụ kiểm thử thủ công và tự động có thể gắn cờ các vấn đề thường gặp và hiển thị các vấn đề trong quá trình triển khai.

Tài nguyên khác

Để tìm hiểu thêm về cách giúp ứng dụng dễ tiếp cận hơn, hãy xem thêm các tài nguyên sau:

Lớp học lập trình

Video

Nội dung về Chế độ xem