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 in đậm và nhỏ hơn 14sp, hãy sử dụng màu nền trước và màu nền sau để có 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 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, chúng tôi đề xuất rằ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)
        )
    }
}

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

Mô tả từng thành phần 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)
        )
    }
}

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 chi tiết hình ảnh. Sử dụng thuộc tính ngữ nghĩa Role (như Role.Button hoặc Role.Switch) để hiển thị loại phần tử 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 dư thừa trong phần mô tả. 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, thì 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 sẽ phải có nội dung mô tả riêng, mỗi nội dung mô tả phản ánh nội dung riêng biệt 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 phần tử chỉ mang tính trang trí để các dịch vụ hỗ trợ tiếp cận có thể bỏ qua các phần tử đó. 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ử khác trên giao diện người dùng), hãy truyền null để tránh việc gắn nhãn thừa. Để biết các trường hợp sử dụng phức tạp hơn, 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ư mong đợi. Android Lint, kiểm thử Compose, cũng như 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à cho thấy các vấn đề trong quá trình triển khai của bạn.

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 lượt xem