Sử dụng HTML có ngữ nghĩa để dễ dàng thao tác trên bàn phím

Rob Dodson

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, đôi khi, các phần tử có thuộc tính contenteditable đượ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 sẵn mà các phần tử 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 chế độ điều khiển, cũng như 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 chế độ điều khiể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 trên thiết bị di động này! Đâ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 ENTER hoặc SPACE để thực hiện một thao tác
  • Được trình đọc màn hình thông báo chính xác

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 những gì mà phần tử button cung cấp miễn phí cho bạn!

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 sẽ cần viết thêm mã để theo dõi sự kiện keydown, kiểm tra để chắc chắn rằng 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 để kiểm soát, đồng thời sử dụng ENTER và SPACE để thử nhấp vào các thành phần đó.

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 rất dễ tạo kiểu và vô cùng hiệu quả về khả năng hỗ trợ tiếp cận!

Một cách chống mẫu phổ biến khác là coi đường liên kết là nút bằng cách đính kèm hành vi JavaScript vào các nú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ử sẽ giúp người dùng trình đọc màn hình biết kết quả mong đợi.

VIỆC CẦN LÀM: DevSite – Bài đánh giá 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.