Xây dựng Windows Modal có thể truy cập với Hộp thoại A11y

Phương thức được hỗ trợ rộng rãi trong các trình duyệt hiện đại. Chúng có thể được sử dụng như thông báo bật lên, như trường chọn tham gia, hoặc thậm chí cho trình chiếu ảnh.

Bạn có thể xây dựng các cửa sổ này bằng cách sử dụng CSS thuần nhưng đây không phải là giải pháp dễ tiếp cận nhất. Thay vào đó, hãy kiểm tra Hộp thoại A11y, một cửa sổ phương thức hoạt động đầy đủ đặt trọng tâm vào tiếp cận đầu tiên.

Nó chạy trên vani JavaScript với nó API tùy chỉnh riêng và hỗ trợ tất cả các trình duyệt hiện đại trên tất cả các thiết bị. Bạn có thể kiểm tra bản demo này để xem nó trông như thế nào trong hành động.

Nó xuất hiện rất giống như một cửa sổ phương thức điển hình. Nhưng, kịch bản này sử dụng thẻ ARIA để hỗ trợ khả năng tiếp cận hiện đại cho tất cả người dùng.

Theo mặc định, Hộp thoại A11y cũng hỗ trợ màn hình cảm ứng, vì vậy khai thác có tác dụng tương tự như nhấp chuột. Bạn có thể nhấp hoặc nhấn vào bất cứ nơi nào bên ngoài cửa sổ để đóng nó hoặc trên máy tính nhấn phím ESC.

Bằng cách nào đó, thư viện này khá nhỏ, chỉ 1,2kb, bao gồm tất cả các mã CSS và JS. Điều này làm cho nó nhẹ trên đầu trang có thể truy cập đầy đủ.

Bạn có thể tìm hiểu thêm bằng cách đọc qua GitHub repo và Hộp thoại A11y có trang tài liệu riêng, quá. Điều này bao gồm một phần trên cài đặt và thiết lập cho người mới bắt đầu hoàn thành. Ngoài ra còn có một phần dài bao gồm API DOM để thêm các nút đến trang của bạn có thể mở (hoặc đóng) cửa sổ phương thức.

Nếu bạn đang cố gắng để xây dựng các trang web dễ tiếp cận hơn nghiêm túc xem xét việc chạy A11y Dialog trong các dự án của bạn. Bạn có thể lấy mã nguồn từ GitHub hoặc tải xuống từ trình quản lý gói như npm hoặc Bower.

Hãy xem trang chính để tìm hiểu thêm về thiết lập và các tính năng JavaScript cơ bản. Thư viện này đi kèm nhiều hơn khả năng tiếp cận ARIA, vì vậy, đáng để thử nghiệm nếu bạn muốn mở rộng các tính năng của cửa sổ phương thức.