Một nhãn trạng thái vừa đổi trên màn hình nhưng người dùng đang nghe trình đọc màn hình không biết điều đó. Nếu chỉ đổi màu hoặc text, bạn chưa mô tả rõ ứng dụng muốn công nghệ hỗ trợ thông báo thay đổi ấy như thế nào.
Bài này xây một vùng trạng thái nhỏ để thử accessibilityLiveRegion trên Android. Mục tiêu là học cách chọn mức thông báo, giữ nội dung ngắn và kiểm tra bằng TalkBack. Đây là một phần của kiểm thử trợ năng, không phải chứng nhận toàn bộ ứng dụng đã dùng được với mọi công nghệ hỗ trợ.
Điều kiện và giới hạn kiểm chứng
Đối chiếu tài liệu React Native 0.88 ngày 11/11/2026. Hướng dẫn accessibility và View reference ghi prop này dành cho Android; View reference nêu hỗ trợ native từ API 19. Điều đó không hạ yêu cầu Android tối thiểu của một phiên bản React Native cụ thể.
Ví dụ đã được rà theo hợp đồng API, chưa chạy Metro, build Android, thiết bị hay TalkBack. Các bước nghe thông báo ở cuối bài là kế hoạch kiểm tra, không phải kết quả đã quan sát. Bài không triển khai thông báo VoiceOver trên iOS.
1. Dựng một vùng trạng thái độc lập
Ví dụ dùng nút để đổi dữ liệu trong RAM, không tải mạng hay lưu bản ghi. Tách mô phỏng khỏi nghiệp vụ thật giúp bạn xác định nội dung nào thay đổi và thay đổi vào thời điểm nào.
import React, {useState} from 'react';
import {Button, Platform, StyleSheet, Text, View} from 'react-native';
export default function App() {
const [revision, setRevision] = useState(0);
const status = revision === 0
? 'Chưa có cập nhật thử nghiệm'
: `Đã cập nhật thử nghiệm lần ${revision}`;
return (
<View style={styles.screen}>
<Text style={styles.title}>Kiểm tra thông báo trạng thái</Text>
<Button
title="Tạo cập nhật thử"
onPress={() => setRevision(value => value + 1)}
/>
<Text
style={styles.status}
accessibilityLiveRegion={Platform.OS === 'android' ? 'polite' : undefined}>
{status}
</Text>
<Text>Ví dụ chỉ thay đổi trạng thái cục bộ.</Text>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1, justifyContent: 'center', padding: 24},
title: {fontSize: 20, marginBottom: 16},
status: {marginVertical: 16, fontSize: 18},
});Vùng text luôn tồn tại, còn nội dung của nó thay đổi khi bấm nút. Bộ đếm giúp mỗi lần thử có một chuỗi khác nhau; nó không phải mã giao dịch hoặc bằng chứng dữ liệu đã được lưu thành công.
Không đặt một accessibilityLabel cố định khác với dòng trạng thái đang hiển thị. Trong fixture này, nội dung Text chính là thông tin cần đọc. Nếu sau đó bạn bổ sung nhãn riêng, hãy kiểm tra nhãn có còn phản ánh dữ liệu mới hay không.
2. Chọn mức thông báo theo ý nghĩa
Tài liệu mô tả ba lựa chọn: none không yêu cầu thông báo thay đổi; polite yêu cầu thông báo; assertive có thể ngắt lời đang đọc để thông báo ngay. Với trạng thái thử không khẩn cấp, ví dụ chọn polite.
Đừng chọn assertive cho mọi dòng vì muốn chắc chắn người dùng nghe được. Một màn hình cập nhật liên tục có thể làm trải nghiệm bị gián đoạn. Hãy ghi rõ loại sự kiện nào thực sự cần thông báo và loại nào chỉ cần tồn tại để người dùng chủ động khám phá.
Prop này không phải lệnh di chuyển focus tới nhãn. Nếu màn hình cần chuyển focus sau điều hướng hoặc sau một lỗi form, đó là một yêu cầu khác cần thiết kế và kiểm thử riêng. Ví dụ hiện tại không gọi API chuyển focus hay API announcement thủ công.
3. Kế hoạch kiểm tra với TalkBack
Chạy màn hình trên Android được dự án hỗ trợ, bật TalkBack rồi điều hướng tới nút. Kích hoạt một lần, đợi thông báo kết thúc và ghi lại nội dung nghe được. Kiểm tra rằng nhãn hiển thị cũng đổi cùng số revision.
Sau đó thử khi TalkBack đang đọc một phần khác, và thử hai lần cập nhật gần nhau. Ghi lại nếu thông báo bị gộp, trễ hoặc lặp; đừng giả định mỗi lần render tương ứng một câu nói trong mọi cấu hình dịch vụ trợ năng. Cần ghi phiên bản Android, TalkBack và bản build ứng dụng khi báo lỗi.
Thử tắt TalkBack để kiểm tra người dùng nhìn màn hình vẫn hiểu trạng thái. Tăng font scale và xem text có bị cắt hoặc che nút không. Ví dụ không đặt chiều cao cố định cho nhãn để tránh tự tạo một giới hạn không cần thiết.
Lỗi thường gặp và giới hạn
Thông báo cả dòng trạng thái lẫn gọi announcement thủ công cho cùng sự kiện có thể gây đọc lặp. Bài chỉ dùng một cơ chế để dễ đối chiếu. Khi tích hợp vào app, kiểm tra các wrapper và thư viện đã có trước khi thêm cơ chế thứ hai.
Trên iOS, ví dụ chỉ hiển thị text và không hứa đọc thay đổi tự động bằng prop dành cho Android. Nếu sản phẩm hỗ trợ VoiceOver, cần một thiết kế và lượt kiểm thử riêng cho nền tảng đó. Hành vi native chưa được xác nhận chỉ bằng việc JSX có prop đúng tên.
Kết luận
Một vùng trạng thái ngắn, ổn định giúp bạn thử thông báo thay đổi rõ ràng hơn. Chọn mức phù hợp, tránh thông báo trùng và kiểm tra bằng dịch vụ trợ năng thật trước khi dùng trong sản phẩm.
