Accessibility tree là gì và bạn kiểm tra nó như thế nào?

Accessibility tree là một phiên bản của trang mà trình duyệt dựng từ DOM và CSS, rồi expose cho công nghệ hỗ trợ qua các API accessibility của nền tảng. Screen reader đọc cây này, không đọc trang hiển thị.

Mỗi node mang thông tin mà người dùng cần:

• Role: button, link, heading, checkbox.
• Name: nhãn, như "Submit order".
• State và value: checked, expanded, disabled, text hiện tại.
• Quan hệ: thứ gì đặt nhãn hoặc mô tả cho phần tử.

Những gì bị loại ra: phần tử có display: none, visibility: hidden, aria-hidden="true", inert, và phần tử thuần trình bày như ảnh có alt="".

Để kiểm tra, mở DevTools của Chrome hoặc Edge, chọn một phần tử và dùng panel Accessibility để xem name và role đã tính. Firefox có panel Accessibility riêng với dạng xem cây đầy đủ.

Đây là cách nhanh nhất để xác minh một button có name, hoặc một modal đang ẩn thật sự đã ẩn.

HTML ngữ nghĩa tốt cho ra cây tốt; ARIA chỉ điều chỉnh nó khi HTML native không làm được.