Bằng cách sử dụng đúng các phần tử HTML ngữ nghĩa, bạn có thể đáp ứng hầu hết hoặc tất cả nhu cầu truy cập bằng bàn phím. Điều đó có nghĩa là bạn sẽ mất ít thời gian hơn để xử lý tabindex và người dùng sẽ hài lòng hơn!
Hỗ trợ bàn phím miễn phí (và trải nghiệm tốt hơn trên thiết bị di động)
Có một số thành phần tương tác tích hợp sẵn với ngữ nghĩa và tính năng hỗ trợ bàn phím phù hợp. Các công cụ mà hầu hết nhà phát triển sử dụng là:
Ngoài ra, các phần tử có thuộc tính contenteditable đôi khi được dùng để nhập văn bản dạng tự do.
Bạn có thể dễ dàng bỏ qua tính năng hỗ trợ bàn phím tích hợp mà các thành phần này cung cấp.
Dưới đây là một số thành phần mẫu để bạn khám phá. Thay vì sử dụng chuột, hãy thử sử dụng bàn phím để thao tác với các nút này. Bạn có thể sử dụng TAB (hoặc SHIFT +
TAB) để di chuyển giữa các thành phần điều khiển, đồng thời có thể sử dụng các phím mũi tên và các phím như ENTER và SPACE để thao tác với các giá trị của các thành phần đó.
Nếu có sẵn điện thoại, bạn có thể thấy rằng nhiều khi các thành phần tích hợp này có các hoạt động tương tác riêng trên thiết bị di động. Bạn sẽ phải mất nhiều công sức để tự tái tạo các lượt tương tác này trên thiết bị di động! Đây là một lý do khác để bạn nên sử dụng các phần tử tích hợp sẵn bất cứ khi nào có thể.
Sử dụng button thay vì div
Một mẫu chống tiếp cận phổ biến là coi một phần tử không tương tác, chẳng hạn như div hoặc span, là một nút bằng cách thêm trình xử lý lượt nhấp vào phần tử đó.
Tuy nhiên, để được coi là hỗ trợ tiếp cận, nút phải:
- Có thể lấy tiêu điểm bằng bàn phím
- Hỗ trợ bị tắt
- Hỗ trợ phím
ENTERhoặcSPACEđể thực hiện một thao tác - Được trình đọc màn hình thông báo đúng cách
Nút div không có bất kỳ thuộc tính nào trong số này. Điều đó có nghĩa là bạn sẽ cần viết thêm mã để sao chép nội dung mà phần tử button cung cấp cho bạn miễn phí!
Ví dụ: các phần tử button có một thủ thuật gọn gàng được gọi là *kích hoạt lượt nhấp tổng hợp*. Nếu bạn thêm trình xử lý "lượt nhấp" vào button, trình xử lý này sẽ chạy khi người dùng nhấn vào ENTER hoặc SPACE. Nút div không có tính năng này, vì vậy, bạn cần viết thêm mã để theo dõi sự kiện keydown, kiểm tra để đảm bảo mã phím là ENTER hoặc SPACE, sau đó chạy trình xử lý lượt nhấp. Ối!
Bạn sẽ phải làm thêm nhiều việc!
So sánh sự khác biệt trong ví dụ này. TAB để điều khiển và sử dụng ENTER và SPACE để cố gắng nhấp vào các nút đó.
Nếu bạn có các nút div trong trang web hoặc ứng dụng hiện có, hãy cân nhắc việc hoán đổi các nút đó cho các phần tử button. button dễ định kiểu và có nhiều tính năng hỗ trợ tiếp cận!
Đường liên kết so với nút
Một mẫu chống đối phổ biến khác là coi các đường liên kết là nút bằng cách đính kèm hành vi JavaScript vào các đường liên kết đó.
<a href="#" onclick="// perform some action">
Cả nút và đường liên kết đều hỗ trợ một số hình thức kích hoạt lượt nhấp tổng hợp. Vậy bạn nên chọn loại nào?
- Nếu việc nhấp vào phần tử sẽ thực hiện một hành động trên trang, hãy sử dụng
<button>. - Nếu việc nhấp vào phần tử sẽ chuyển người dùng đến một trang mới, hãy sử dụng
<a>. Điều này bao gồm các ứng dụng web một trang tải nội dung mới và cập nhật URL bằng API Nhật ký.
Lý do là trình đọc màn hình thông báo các nút và đường liên kết theo cách khác nhau. Việc sử dụng đúng phần tử giúp người dùng trình đọc màn hình biết kết quả sẽ ra sao.
VIỆC CẦN LÀM: DevSite – Bài đánh giá về việc suy nghĩ và kiểm tra
Định kiểu
Một số phần tử tích hợp, đặc biệt là <input>, có thể khó định kiểu.
Với một chút CSS thông minh, bạn có thể khắc phục một số hạn chế này. Dự án WTFForms (có tên hài hước) chứa một tệp kiểu mẫu minh hoạ một số kỹ thuật để tạo kiểu cho một số phần tử tích hợp khó hơn.
Các bước tiếp theo
Việc sử dụng các phần tử HTML tích hợp sẵn có thể cải thiện đáng kể khả năng hỗ trợ tiếp cận của trang web và giảm đáng kể khối lượng công việc của bạn. Hãy thử nhấn phím tab trên trang web của bạn và tìm mọi chế độ điều khiển không hỗ trợ bàn phím. Nếu có thể, hãy thay thế các tệp đó bằng các tệp HTML chuẩn.
Đôi khi, bạn có thể thấy một phần tử không có phần tử tương ứng trong HTML.
Không sao cả! Hãy đọc tiếp để tìm hiểu cách thêm tính năng hỗ trợ bàn phím vào các chế độ điều khiển tương tác tuỳ chỉnh bằng tabindex.