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

Rob Dodson

Khi sử dụng đúng phần tử HTML ngữ nghĩa, bạn có thể đáp ứng được hầu hết hoặc tất cả nhu cầu truy cập bàn phím của mình. Điều đó có nghĩa là bạn sẽ ít phải mất thời gian sử dụng tabindex và khiến người dùng hài lòng hơn!

Hỗ trợ bàn phím miễn phí (và trải nghiệm di động tốt hơn)

Một số phần tử tương tác được tích hợp sẵn có khả năng hỗ trợ bàn phím và ngữ nghĩa phù hợp. Những trình duyệt mà hầu hết các nhà phát triển đều 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 mà các thành phần này cung cấp. Dưới đây là một số yếu tố mẫu để khám phá. Thay vì sử dụng chuột, hãy thử sử dụng bàn phím để thao tác. 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 để điều khiển các giá trị của chúng.

Nếu có sẵn điện thoại, bạn có thể thấy rằng nhiều lần các phần tử tích hợp này có các lượt tương tác riêng trên thiết bị di động. Việc cố gắng tự tái tạo các hoạt động tương tác trên thiết bị di động này tốn rất nhiều công sức! Đó là một lý do hợp lý khác để 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 cách chống mẫu hỗ trợ tiếp cận phổ biến là xem 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 một trình xử lý lượt nhấp vào phần tử đó.

Nhưng để được coi là dễ tiếp cận, nút phải:

  • Có thể lấy tiêu điểm qua bàn phím
  • Chế độ hỗ trợ bị tắt
  • Hỗ trợ các 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 đúng cách

Nút div không có yếu tố nào nêu trên. Điều đó có nghĩa là bạn cần viết thêm mã để sao chép những gì 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 ngắn gọn tên là *kích hoạt lượt nhấp tổng hợp*. Nếu bạn thêm một 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 hay SPACE, sau đó chạy trình xử lý lượt nhấp. Ối! Cần phải làm thêm rất 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 chúng.

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à mang lại nhiều lợi ích 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 đường liên kết đó.

<a href="#" onclick="// perform some action">

Cả hai 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 sản phẩm 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ẽ di chuyển người dùng đến một trang mới, sau đó sử dụng <a>. Trong đó có cả các ứng dụng web một trang tải nội dung mới và cập nhật URL bằng cách sử dụng API Lịch sử.

Lý do là các nút và đường liên kết được thông báo theo cách khác nhau tuỳ theo trình đọc màn hình. 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á Think and Check

Định kiểu

Một số phần tử tích hợp sẵn, cụ thể là <input>, có thể khó tạo kiểu. Với CSS thông minh, bạn có thể giải quyết một số hạn chế này. Dự án WTFForms (được đặt tên vui nhộn) chứa một biểu định 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ó khăn 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ể giúp cải thiện đáng kể khả năng tiếp cận của trang web và giảm đáng kể khối lượng công việc. Hãy thử duyệt qua trang web của bạn và tìm mọi chế độ kiểm soát không hỗ trợ bàn phím. Nếu có thể, hãy thay thế HTML đã chuẩn hoá.

Đôi khi, bạn có thể tìm 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 thành phần điều khiển tương tác tuỳ chỉnh bằng tabindex.