Cách sử dụng các phím mũi tên trong HTML

Sử dụng tabindex

Theo mặc định, khi mọi người sử dụng phím tab để duyệt trang web, chỉ các yếu tố tương tác (như liên kết, điều khiển biểu mẫu) mới được tập trung. Với thuộc tính toàn cầu

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Thứ tự các phần tử lấy tiêu điểm khi sử dụng bàn phím, theo mặc định là thứ tự nguồn. Trong những trường hợp đặc biệt, tác giả có thể muốn xác định lại thứ tự. Để làm điều này, tác giả có thể đặt

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Cảnh báo. tránh sử dụng các giá trị dương cho

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Bảng sau mô tả hành vi của

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Kiểm soát không phải bản địa

Các phần tử HTML gốc có tính tương tác, như

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Tác giả cũng có thể làm cho bàn phím

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

điều khiển nhóm

Để nhóm các tiện ích con như menu, danh sách tab, lưới hoặc chế độ xem dạng cây, phần tử gốc phải theo thứ tự tab (_______17) và mỗi lựa chọn/tab/ô/hàng con cháu phải được xóa khỏi thứ tự tab (

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Ví dụ dưới đây cho thấy kỹ thuật này được sử dụng với điều khiển menu lồng nhau. Sau khi tiêu điểm bàn phím nằm trên phần tử chứa

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Điều khiển bị vô hiệu hóa

Khi điều khiển tùy chỉnh bị tắt, hãy xóa điều khiển đó khỏi thứ tự tab bằng cách đặt

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Quản lý tiêu điểm bên trong các nhóm

Khi người dùng rời khỏi một tiện ích con và quay lại, tiêu điểm sẽ quay lại thành phần cụ thể đã có tiêu điểm, ví dụ: mục cây hoặc ô lưới. Có hai kỹ thuật để thực hiện điều này

1. Lưu động

   <span tabindex="-1" onkeydown="return handleKeyDown();">…span>
   

   7. tiêu điểm di chuyển theo chương trình

2. <span tabindex="-1" onkeydown="return handleKeyDown();">…span>
   

   65. quản lý tiêu điểm 'ảo'

Kỹ thuật 1. tabindex lưu động

Việc đặt

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Liên kết một trình xử lý phím xuống với từng phần tử trong nhóm và khi một phím mũi tên được sử dụng để di chuyển đến phần tử khác

1. lập trình áp dụng tiêu điểm cho phần tử mới,
2. cập nhật

   <span tabindex="-1" onkeydown="return handleKeyDown();">…span>
   

   7 của phần tử tiêu điểm thành "0" và
3. cập nhật

   <span tabindex="-1" onkeydown="return handleKeyDown();">…span>
   

   7 của phần tử đã tập trung trước đó thành "-1"

Đây là một ví dụ về chế độ xem dạng cây WAI-ARIA sử dụng kỹ thuật này

Lời khuyên

sử dụng yếu tố. tiêu điểm() để đặt tiêu điểm

Không sử dụng

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Sử dụng onfocus để theo dõi tiêu điểm hiện tại

Đừng cho rằng tất cả các thay đổi tiêu điểm sẽ đến thông qua các sự kiện phím và chuột. các công nghệ hỗ trợ như trình đọc màn hình có thể đặt tiêu điểm thành bất kỳ phần tử có thể lấy tiêu điểm nào. Thay vào đó, hãy theo dõi tiêu điểm bằng cách sử dụng

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Kỹ thuật 2. … 65

Kỹ thuật này liên quan đến việc liên kết một trình xử lý sự kiện duy nhất với tiện ích bộ chứa và sử dụng

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Thuộc tính

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Hướng dẫn chung

Sử dụng onkeydown để bẫy các sự kiện quan trọng, không phải onkeypress

IE sẽ không kích hoạt sự kiện

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Đảm bảo rằng bàn phím và chuột tạo ra trải nghiệm giống nhau

Để đảm bảo rằng trải nghiệm người dùng nhất quán bất kể thiết bị đầu vào, trình xử lý sự kiện bàn phím và chuột phải chia sẻ mã khi thích hợp. Ví dụ: mã cập nhật

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Đảm bảo rằng bàn phím có thể được sử dụng để kích hoạt phần tử

Để đảm bảo rằng bàn phím có thể được sử dụng để kích hoạt các phần tử, bất kỳ trình xử lý nào được liên kết với sự kiện chuột cũng phải được liên kết với sự kiện bàn phím. Ví dụ: để đảm bảo rằng phím Enter sẽ kích hoạt một phần tử, nếu bạn có một

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Luôn lấy tiêu điểm cho các mục và phần tử tabindex="-1" nhận tiêu điểm theo chương trình

IE sẽ không tự động vẽ đường viền tiêu điểm cho các mục nhận tiêu điểm theo chương trình. Chọn giữa việc thay đổi màu nền thông qua thứ gì đó như

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Ngăn các sự kiện quan trọng đã sử dụng thực hiện các chức năng của trình duyệt

Nếu tiện ích của bạn xử lý một sự kiện quan trọng, hãy ngăn trình duyệt xử lý sự kiện đó (ví dụ: cuộn để phản hồi các phím mũi tên) bằng cách sử dụng mã trả về của trình xử lý sự kiện của bạn. Nếu trình xử lý sự kiện của bạn trả về

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Ví dụ

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

Nếu

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>

<span tabindex="-1" onkeydown="return handleKeyDown();">…span>