Các ứng dụng một trang đặt ra một thách thức đáng kể về khả năng tiếp cận khi nói đến các thay đổi về chế độ xem. Nếu không có tính năng làm mới trang, trình đọc màn hình sẽ không nhận được những thay đổi giao diện người dùng quan trọng này, khiến người dùng bị khiếm thị bị nhầm lẫn và không nhận biết được.
Một giải pháp là tạo một thông báo dựa trên tiêu đề trang và tận dụng một khu vực trực tiếp ARIA để thông báo rõ ràng, thông qua một thông báo hữu ích, rằng một chế độ xem mới đã được tải. Đầu tiên, hãy tạo một hàm được gọi khi viewContent được cập nhật. AngularJS cung cấp một sự kiện $ viewContentLoaded cho mục đích này. Trong mã bộ điều khiển, lắng nghe sự kiện và gọi một hàm (trong CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, notification_view_loaded
Trong chức năng notification_view_loaded, hãy cập nhật tiêu đề trang và thông báo tin nhắn. Mặc dù các khung đơn trang không tự động cập nhật tiêu đề trang, nhưng việc giữ tiêu đề trang được đồng bộ hóa với chế độ xem hiện tại sẽ cải thiện sự hiểu biết của người dùng về chế độ xem.
Một cách để làm điều này là sử dụng một thuộc tính dữ liệu ở đâu đó trong chế độ xem để lưu trữ tiêu đề chế độ xem:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Bây giờ, hãy tạo một tin nhắn bằng cách sử dụng tiêu đề trang đã cập nhật và thông báo nó:
$ .anosystem (document.title + ’, xem đã tải’)
$ .anosystem () là một hàm jQuery sử dụng một vùng trực tiếp duy nhất, không hiển thị để thông báo nội dung. Cách tiếp cận này giúp đơn giản hóa mã và các nỗ lực gỡ lỗi so với việc sử dụng đặc biệt các khu vực trực tiếp. Tuy nhiên, có một số phương pháp hay nhất cần nhớ.
Trước tiên, hãy tạo một vùng trực tiếp của ‘người thông báo’ duy nhất trong trang của bạn để thông báo nội dung bằng cách sử dụng aria-live = "secure | khẳng định". Không sử dụng bất kỳ khu vực trực tiếp nào khác, bao gồm các vai trò trong khu vực trực tiếp (ví dụ: role = "alert | timer | log"). Một khu vực trực tiếp ví dụ:
div aria-live = "secure" id = "Informuncer"> (Văn bản được thêm vào hoặc cập nhật ở đây sẽ được thông báo) / div>
Thứ hai, xóa nội dung của khu vực trực tiếp ngay sau khi cập nhật nội dung. Điều này giúp người dùng không gặp phải các tin nhắn cũ.
Cuối cùng, như với bất kỳ kỹ thuật trợ năng nào, hãy sử dụng $ .announ () một cách thận trọng. Nó chỉ nên được sử dụng để giao tiếp các bản cập nhật giao diện người dùng quan trọng.
Từ ngữ: Patrick Fox
Patrick Fox là giám đốc công nghệ Web UI tại Razorfish ở Austin. Bài báo này ban đầu xuất hiện trong số 271 của tạp chí net.
Thích cái này? Đọc những thứ này!
- Hướng dẫn của nhà thiết kế về khả năng tiếp cận kỹ thuật số
- Các phông chữ script miễn phí tốt nhất
- Lựa chọn phông chữ graffiti miễn phí
