Giới thiệu về Cây hỗ trợ tiếp cận
Hãy tưởng tượng rằng bạn đang xây dựng giao diện người dùng chỉ dành cho người dùng trình đọc màn hình. Ở đây, bạn không cần tạo bất kỳ giao diện người dùng trực quan nào, mà chỉ cần cung cấp vừa đủ thông tin để trình đọc màn hình sử dụng.
Những gì bạn sẽ tạo là một loại API mô tả cấu trúc trang, tương tự như tới API DOM, nhưng bạn có thể nhận được ít thông tin hơn và ít nút hơn, vì rất nhiều thông tin trong số đó chỉ hữu ích cho việc trình bày trực quan. Nó có thể trông giống như sau.
Về cơ bản, đây là những gì trình duyệt thực sự hiển thị với trình đọc màn hình. Chiến lược phát hành đĩa đơn trình duyệt lấy cây DOM và sửa đổi nó thành dạng hữu ích để công nghệ hỗ trợ. Chúng tôi gọi cây được sửa đổi này là Hỗ trợ tiếp cận Cây.
Bạn có thể hình dung cây hỗ trợ tiếp cận trông hơi giống một trang web cũ từ thập niên 90: một vài hình ảnh, rất nhiều đường liên kết, có thể là một trường và một nút bấm.
Việc quét trực quan xuống một trang như trường hợp này sẽ mang lại cho bạn trải nghiệm tương tự như những gì mà người dùng trình đọc màn hình sẽ nhận được. Giao diện ở đó nhưng đơn giản và trực tiếp, giống như giao diện cây hỗ trợ tiếp cận.
Cây hỗ trợ tiếp cận là thứ mà hầu hết các công nghệ hỗ trợ đều tương tác với. Chiến lược phát hành đĩa đơn flow sẽ diễn ra như thế này.
- Một ứng dụng (trình duyệt hoặc ứng dụng khác) hiển thị một phiên bản ngữ nghĩa của ứng dụng đó Giao diện người dùng thành công nghệ hỗ trợ thông qua API.
- Công nghệ hỗ trợ có thể sử dụng thông tin đã đọc được qua API để tạo một bản trình bày giao diện người dùng thay thế cho người dùng. Ví dụ: trình đọc màn hình sẽ tạo một giao diện mà trong đó người dùng nghe được giọng nói của ứng dụng.
- Công nghệ hỗ trợ cũng có thể cho phép người dùng tương tác với ứng dụng bằng một cách khác. Ví dụ: hầu hết trình đọc màn hình đều cung cấp các hook để cho phép để dễ dàng mô phỏng thao tác nhấp chuột hoặc nhấn ngón tay.
- Công nghệ hỗ trợ chuyển tiếp ý định của người dùng (chẳng hạn như "nhấp chuột") trở lại ứng dụng thông qua API hỗ trợ tiếp cận. Sau đó, ứng dụng có trách nhiệm diễn giải hành động một cách phù hợp trong ngữ cảnh của giao diện người dùng ban đầu.
Đối với trình duyệt web, mỗi hướng sẽ có thêm một bước vì trình duyệt thực tế là một nền tảng dành cho các ứng dụng web chạy bên trong nó. Vì vậy, trình duyệt cần dịch ứng dụng web thành cây hỗ trợ tiếp cận và phải đảm bảo rằng các sự kiện thích hợp được kích hoạt trong JavaScript dựa trên hành động của người dùng xảy ra từ công nghệ hỗ trợ.
Nhưng đó là tất cả trách nhiệm của trình duyệt. Công việc của chúng tôi với tư cách là nhà phát triển web để ý thức được điều này và để phát triển các trang web tận dụng được của quy trình này nhằm tạo ra trải nghiệm dễ tiếp cận cho người dùng.
Chúng tôi làm điều này bằng cách đảm bảo rằng chúng tôi thể hiện ngữ nghĩa của các trang một cách chính xác: đảm bảo rằng các phần tử quan trọng trong trang có quyền truy cập chính xác vai trò, trạng thái và thuộc tính, cũng như chỉ định tên và nội dung mô tả. Sau đó, trình duyệt có thể cho phép công nghệ hỗ trợ truy cập để tạo trải nghiệm tuỳ chỉnh.
Ngữ nghĩa trong HTML gốc
Một trình duyệt có thể biến đổi cây DOM thành cây hỗ trợ tiếp cận do phần lớn DOM có ý nghĩa ngữ nghĩa ngầm ẩn. Tức là DOM sử dụng HTML gốc là các phần tử được các trình duyệt nhận dạng và hoạt động dự đoán được trên nhiều loại nền tảng. Hỗ trợ tiếp cận cho các phần tử HTML gốc như đường liên kết hoặc nút được xử lý tự động. Chúng tôi có thể tận dụng các tính năng hỗ trợ tiếp cận được tích hợp sẵn bằng cách viết HTML thể hiện ngữ nghĩa của các phần tử trang.
Tuy nhiên, đôi khi chúng tôi sử dụng các phần tử trông giống như thành phần gốc nhưng lại không giống như vậy. Ví dụ: "nút" này không phải là một nút.
Thẻ này có thể được xây dựng trong HTML theo nhiều cách; một chiều được trình bày dưới đây.
<div class="button-ish">Give me tacos</div>
Khi chúng ta không sử dụng một phần tử nút thực, trình đọc màn hình không có cách nào để biết sản phẩm đã đạt đến giới hạn nào. Ngoài ra, chúng tôi sẽ phải làm thêm công việc thêm tabindex để tạo chỉ mục có thể sử dụng cho người dùng chỉ sử dụng bàn phím vì vì giờ đây công cụ này đã được mã hoá nên chỉ có thể sử dụng bằng chuột.
Chúng ta có thể dễ dàng khắc phục vấn đề này bằng cách sử dụng phần tử button thông thường thay vì div.
Việc sử dụng phần tử gốc cũng giúp ích cho việc xử lý bàn phím
tương tác nhiều nhất cho chúng tôi. Và đừng quên rằng bạn không nhất thiết phải mất đi hình ảnh lôi cuốn
các hiệu ứng chỉ vì bạn sử dụng phần tử gốc; bạn có thể tạo kiểu cho các phần tử gốc
làm cho chúng trông theo cách bạn muốn mà vẫn giữ lại ngữ nghĩa ngầm ẩn và
hành vi.
Trước đó, chúng ta có lưu ý rằng trình đọc màn hình sẽ thông báo vai trò, tên của một phần tử trạng thái và giá trị. Sử dụng phần tử ngữ nghĩa, vai trò, trạng thái và giá trị phù hợp được đề cập, nhưng chúng ta cũng phải đảm bảo rằng chúng ta tạo tên của một phần tử có thể phát hiện.
Nói chung, có hai loại tên:
- Nhãn hiển thị, được tất cả người dùng sử dụng để liên kết ý nghĩa với một và
- Phương án thay thế văn bản, chỉ được sử dụng khi không cần hình ảnh .
Đối với các phần tử cấp văn bản, chúng ta không cần phải làm gì cả, vì theo định nghĩa thì nó sẽ có một số nội dung văn bản. Tuy nhiên, đối với các phần tử đầu vào hoặc điều khiển, như hình ảnh, chúng tôi cần đảm bảo rằng chúng tôi chỉ định một tên. Trên thực tế, việc cung cấp khả năng thay thế văn bản cho mọi nội dung không phải văn bản chính là đầu tiên trong danh sách kiểm tra của WebAIM.
Một cách để làm điều đó là làm theo đề xuất của họ rằng "Thông tin đầu vào trong biểu mẫu có nhãn văn bản được liên kết". Có hai cách để liên kết nhãn với biểu mẫu , chẳng hạn như hộp đánh dấu. Một trong hai phương pháp này cũng làm cho văn bản nhãn trở thành mục tiêu nhấp chuột cho hộp kiểm. Điều này cũng hữu ích cho việc chuột người dùng màn hình cảm ứng. Cách liên kết nhãn với một phần tử:
- Đặt phần tử đầu vào bên trong một phần tử nhãn
<label>
<input type="checkbox">Receive promotional offers?
</label>
hoặc
- Dùng thuộc tính
forcủa nhãn và tham chiếu đếnidcủa phần tử
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
Khi hộp đánh dấu đã được gắn nhãn chính xác, trình đọc màn hình có thể báo cáo rằng phần tử có vai trò là hộp đánh dấu, ở trạng thái đã đánh dấu và có tên là "Nhận khuyến mãi?".
