Tiêu điểm bàn phím

Nhiều người sử dụng bàn phím (hoặc phần mềm hoặc phần cứng bắt chước chức năng của bàn phím, chẳng hạn như thiết bị chuyển đổi) làm phương tiện điều hướng chính. Điều này có thể là do lựa chọn ưu tiên cá nhân, hiệu quả hoặc phần cứng bị hỏng.

Những người bị hạn chế về thể chất tạm thời, chẳng hạn như cổ tay bị bong gân hoặc khuyết tật vận động tinh tế như hội chứng ống cổ tay, có thể chọn sử dụng bàn phím để điều hướng. Người dùng khiếm thị hoặc có thị lực kém có thể sử dụng bàn phím để điều hướng kết hợp với phần mềm kính lúp hoặc trình đọc màn hình. Tuy nhiên, họ có thể sử dụng các lệnh phím tắt khác để điều hướng màn hình so với người dùng bình thường.

Một số người không bị khuyết tật cũng có thể chọn thao tác bằng bàn phím.

Việc hỗ trợ bàn phím cho tất cả các trường hợp và tình trạng khuyết tật này là rất quan trọng. Một phần lớn của tính năng hỗ trợ tiếp cận bằng bàn phím tập trung vào tiêu điểm. Tiêu điểm là thành phần hiện trên màn hình đang nhận dữ liệu đầu vào từ bàn phím.

Trong mô-đun này, chúng ta tập trung vào cấu trúc HTML và định kiểu CSS cho bàn phím và các phần tử có thể lấy tiêu điểm. Mô-đun JavaScript cung cấp thêm thông tin về việc quản lý tiêu điểm và thao tác nhấn phím cho các phần tử tương tác.

Thứ tự lấy nét

Các phần tử mà người dùng bàn phím có thể điều hướng đến được gọi là phần tử có thể lấy tiêu điểm. Thứ tự tiêu điểm (còn gọi là thứ tự thẻ hoặc thứ tự điều hướng) là thứ tự các phần tử nhận được tiêu điểm. Thứ tự tiêu điểm mặc định phải hợp lý, trực quan và khớp với thứ tự hình ảnh của trang.

Đối với hầu hết ngôn ngữ, thứ tự tiêu điểm bắt đầu từ đầu trang và kết thúc ở cuối trang, di chuyển từ trái sang phải. Tuy nhiên, một số ngôn ngữ được đọc từ phải sang trái, vì vậy, ngôn ngữ chính của trang có thể đảm bảo thứ tự tiêu điểm khác.

Theo mặc định, thứ tự tiêu điểm bao gồm các phần tử HTML có thể làm tâm điểm một cách tự nhiên, chẳng hạn như đường liên kết, hộp đánh dấu và văn bản đầu vào. Các phần tử HTML có thể làm tâm điểm tự nhiên bao gồm tính năng hỗ trợ thứ tự thẻ tích hợp sẵn và tính năng xử lý sự kiện bàn phím cơ bản.

Bạn có thể cập nhật thứ tự lấy tiêu điểm để thêm mọi phần tử thường không được lấy tiêu điểm, chẳng hạn như các phần tử HTML không tương tác, thành phần tuỳ chỉnh hoặc phần tử bằng ARIA, và ghi đè ngữ nghĩa lấy tiêu điểm tự nhiên.

Tabindex

Thứ tự tiêu điểm bắt đầu bằng các phần tử có thuộc tính tabindex dương (nếu có) và di chuyển từ số dương nhỏ nhất đến số dương lớn nhất (chẳng hạn như 1, 2, 3). Sau đó, thao tác này xử lý các phần tử có chỉ mục thẻ bằng 0 theo thứ tự của các phần tử đó trong DOM. Mọi phần tử có tabindex âm sẽ bị xoá khỏi thứ tự tiêu điểm tự nhiên.

Khi áp dụng một tabindex bằng 0 (tabindex="0") cho các phần tử thường không thể làm tâm điểm, các phần tử này sẽ được thêm vào thứ tự tiêu điểm tự nhiên của trang theo cách chúng xuất hiện trong DOM. Tuy nhiên, không giống như các phần tử HTML có thể lấy tiêu điểm một cách tự nhiên, bạn phải cung cấp thêm tính năng hỗ trợ bàn phím để có thể truy cập đầy đủ vào các phần tử đó.

Tương tự, nếu có một phần tử thường có thể lấy tiêu điểm nhưng không hoạt động (chẳng hạn như một nút không hoạt động cho đến khi điền vào trường nhập), bạn nên thêm một tabindex âm (tabindex="-1") vào phần tử này. Thêm một tín hiệu chỉ mục thẻ tiêu cực vào các công nghệ hỗ trợ và bàn phím rằng nút này nên được xoá khỏi thứ tự lấy nét tự nhiên. Nhưng đừng lo — bạn có thể sử dụng JavaScript để thêm tiêu điểm trở lại phần tử khi cần.

Trong ví dụ này, thuộc tính tabindex được thêm vào các phần tử không nhận được tiêu điểm một cách tự nhiên. Thứ tự của các phần tử được thao tác bằng cách sử dụng tabindex để minh hoạ sức mạnh mà phần tử này có thể có đối với thứ tự tiêu điểm. Đây là ví dụ về những việc không nên làm!

Bỏ qua đường liên kết

Ngày nay, hầu hết các trang web đều có một danh sách dài các đường liên kết trình đơn trong tiêu đề chính của trang đồng nhất giữa các trang. Điều này rất phù hợp với việc điều hướng chung nhưng có thể khiến người dùng chỉ sử dụng bàn phím khó truy cập vào nội dung chính của trang web mà không cần phải nhấn phím nhiều lần.

Một cách để bỏ qua các nhóm đường liên kết thừa hoặc không hữu ích là thêm đường liên kết bỏ qua. Đường liên kết bỏ qua là các đường liên kết neo chuyển đến một phần khác trên cùng một trang bằng cách sử dụng mã nhận dạng của phần đó, thay vì đưa người dùng đến một trang khác trên trang web hoặc một tài nguyên bên ngoài. Đường liên kết bỏ qua thường được thêm dưới dạng phần tử có thể làm tâm điểm đầu tiên mà người dùng sẽ gặp khi truy cập vào một trang web. Đường liên kết này có thể xuất hiện hoặc bị ẩn cho đến khi người dùng mở thẻ đến đó, tuỳ thuộc vào yêu cầu của thiết kế.

Khi người dùng nhấn phím tab và có một đường liên kết bỏ qua đang hoạt động, thao tác này sẽ gửi tiêu điểm bàn phím đến đường liên kết bỏ qua. Người dùng có thể nhấp vào đường liên kết bỏ qua để chuyển sang phần tiêu đề và thanh điều hướng chính. Nếu người dùng chọn không nhấp vào đường liên kết bỏ qua và tiếp tục nhấn phím xuống dưới DOM, thì họ sẽ được gửi đến phần tử tiếp theo có thể làm tâm điểm.

Giống như mọi đường liên kết khác, điều quan trọng là đường liên kết bỏ qua phải cung cấp ngữ cảnh về mục đích của đường liên kết. Thêm cụm từ "Bỏ qua để chuyển đến nội dung chính" sẽ cho người dùng biết đường liên kết sẽ đưa họ đến đâu. Có nhiều tuỳ chọn mã để lựa chọn khi cung cấp ngữ cảnh bổ sung cho các đường liên kết, chẳng hạn như aria-labelledby, aria-label hoặc thêm mã vào nội dung văn bản của phần tử <a>, như minh hoạ trong ví dụ.

Chỉ báo lấy tiêu điểm

Như bạn vừa tìm hiểu, thứ tự tiêu điểm là một khía cạnh quan trọng của tính năng hỗ trợ tiếp cận bằng bàn phím. Một điều quan trọng nữa là bạn cần quyết định phong cách của tiêu điểm đó. Vì ngay cả khi thứ tự tiêu điểm rất tốt, làm cách nào để người dùng biết họ đang ở đâu trên trang nếu không có kiểu phù hợp?

Chỉ báo tiêu điểm hiển thị là yếu tố quan trọng để thông báo cho người dùng về vị trí của họ mọi lúc trên trang. Điều này đặc biệt quan trọng đối với người dùng khiếm thị chỉ sử dụng bàn phím. Focus Not Obscured (Minimum) (Tiêu điểm không bị che khuất (Tối thiểu)) đảm bảo rằng chỉ báo tiêu điểm không bị ẩn dưới các thành phần khác.

Kiểu mặc định của trình duyệt

Ngày nay, mỗi trình duyệt web hiện đại đều có một kiểu hình ảnh mặc định khác nhau áp dụng cho các phần tử có thể lấy tiêu điểm trên trang web hoặc ứng dụng của bạn, một số phần tử hiển thị rõ hơn các phần tử khác. Khi người dùng nhấn phím tab để di chuyển qua trang, kiểu này sẽ được áp dụng khi phần tử nhận được tiêu điểm bàn phím.

Nếu bạn cho phép trình duyệt xử lý kiểu tiêu điểm, bạn cần phải xem lại mã để xác nhận rằng giao diện của bạn sẽ không ghi đè kiểu mặc định của trình duyệt. Cơ chế ghi đè thường được ghi dưới dạng "outline: 0" hoặc "outline: none" trong biểu định kiểu. Mảnh mã nhỏ này có thể xoá kiểu chỉ báo tiêu điểm mặc định của trình duyệt, khiến người dùng rất khó điều hướng trang web hoặc ứng dụng của bạn.

Không nên – không dùng dàn ý

a:focus {
  outline: none; /* don't do this! */
}

Được đề xuất — đường viền được tạo kiểu

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Kiểu tùy chỉnh

Tất nhiên, bạn có thể vượt ra ngoài kiểu trình duyệt mặc định và tạo một chỉ báo tiêu điểm tuỳ chỉnh bổ sung cho giao diện của mình. Khi tạo chỉ báo tiêu điểm tuỳ chỉnh, bạn có rất nhiều quyền tự do để sáng tạo!

Hình dạng của chỉ báo tiêu điểm có thể có nhiều dạng, chẳng hạn như đường viền, đường viền, đường gạch dưới, hộp, thay đổi nền hoặc một số thay đổi rõ ràng khác về kiểu không chỉ dựa vào màu sắc để cho biết tiêu điểm của bàn phím đang hoạt động trên phần tử đó.

Bạn có thể thay đổi kiểu chỉ báo tiêu điểm để đảm bảo người dùng có thể nhìn thấy. Ví dụ: khi một trang có nền trắng, bạn có thể đặt chỉ báo tâm điểm của nút thành nền màu xanh dương. Khi trang có nền màu xanh dương, bạn có thể đặt cùng một kiểu tiêu điểm của nút đó thành nền trắng.

Bạn có thể thay đổi kiểu thành phần tiêu điểm dựa trên loại thành phần. Ví dụ: bạn có thể sử dụng đường gạch dưới có dấu chấm cho các đường liên kết trong nội dung nhưng chọn đường viền bo tròn cho phần tử nút.

Không có quy tắc nào về số lượng kiểu chỉ báo tiêu điểm trên một trang, nhưng hãy nhớ giữ số lượng này ở mức hợp lý để tránh gây nhầm lẫn không cần thiết.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về ARIA và HTML.