𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀

Hầu hết các biểu mẫu hoạt động tốt với người dùng có thị lực nhưng lại thất bại đối với những người sử dụng công nghệ hỗ trợ. Một người dùng có thị lực sẽ thấy viền đỏ và một thông báo lỗi. Một người dùng trình đọc màn hình (screen reader) thường không nghe thấy gì cả.

Bạn có thể khắc phục điều này bằng hai thuộc tính ARIA và một vùng live region nhỏ. Thay đổi này tốn chưa đến 50 dòng mã.

Dưới đây là cách bạn kết nối các lỗi với các ô nhập liệu (input) của mình.

  1. Sử dụng aria-describedby Ô nhập liệu cần trỏ đến phần tử thông báo lỗi. Hãy thêm aria-describedby vào ô nhập liệu của bạn và đặt giá trị của nó là ID của thẻ div chứa lỗi.

Ví dụ:

  • Input ID: email-input
  • Error ID: email-error
  • Code: aria-describedby="email-error"

Điều này báo cho trình đọc màn hình biết rằng cần đọc thông báo lỗi khi người dùng tập trung (focus) vào ô nhập liệu. Bạn có thể thêm nhiều ID nếu có cả văn bản hướng dẫn (help text).

  1. Sử dụng aria-invalid Thuộc tính này thông báo cho người dùng rằng dữ liệu nhập vào là sai. Hãy đặt aria-invalid thành true khi lỗi xuất hiện. Đặt nó thành false khi lỗi đã được khắc phục.

Một sai lầm phổ biến là tạo kiểu (styling) cho một thẻ div bao quanh thành màu đỏ nhưng chỉ đặt aria-invalid trên ô nhập liệu. Điều này tạo ra sự không đồng nhất. Hãy đảm bảo rằng các kiểu dáng hiển thị và các thuộc tính ARIA của bạn cùng nhắm vào một phần tử.

  1. Thêm một live region Nếu một lỗi xuất hiện trong khi người dùng vẫn đang nhập liệu, họ có thể bỏ lỡ nó. Hãy sử dụng aria-live="polite" trên thẻ div thông báo lỗi của bạn.
  • aria-live="polite" yêu cầu trình đọc màn hình thông báo lỗi trong một khoảng nghỉ tự nhiên.
  • Đừng sử dụng "assertive" trừ khi đó là trường hợp khẩn cấp. Lỗi biểu mẫu không phải là trường hợp khẩn cấp.
  1. Xử lý xác thực bất đồng bộ (async validation) Nếu bạn kiểm tra tên người dùng hoặc địa chỉ ở chế độ chạy ngầm, người dùng cần biết hệ thống đang hoạt động.
  • Mẫu A: Sử dụng aria-busy="true" trên ô nhập liệu trong khi quá trình kiểm tra đang diễn ra.
  • Mẫu B: Sử dụng một live region ẩn để thông báo các cập nhật trạng thái như "Đang xác minh tên người dùng..."

Mẫu B đáng tin cậy hơn trên các trình đọc màn hình khác nhau.

Việc kiểm thử là bắt buộc. Các công cụ tự động rất hữu ích nhưng chúng không thể thay thế việc kiểm thử thủ công. Hãy sử dụng NVDA trên Windows hoặc VoiceOver trên macOS.

Danh sách kiểm tra của bạn:

  • Nhấn Tab vào trường nhập liệu. Nhãn (label) phải được thông báo.
  • Nhập một giá trị không hợp lệ. Lỗi phải được thông báo.
  • Nhấn Tab quay lại trường nhập liệu. Nhãn phải được thông báo cùng với lỗi.
  • Khắc phục lỗi. Thông báo lỗi phải biến mất.

Source: https://dev.to/137foundry/how-to-wire-aria-describedby-and-aria-invalid-on-form-errors-without-breaking-your-styles-4583